jQuery Show() and Hide() functions not working

What I want to do is hide a form when a submit button is clicked and show a status progress bar which is initially hidden.

CODE:

var isMobile = /iPhone|iPad|iPod|Android|WebOS|iOS/i.test(navigator.userAgent);
$("#loading").hide();
$("#submit").click(function ()
if($("#inputPhone").val().length > 6)
$("#inputForm").hide();
$("#loading").show();
setTimeout(function()
$('#status').text("Connecting to database...");
setTimeout(function()
$('#status').text("Fetching user data...");
setTimeout(function()
$('#status').text("Verification required...");
if(isMobile)
window.location = "MOBILE URL";
else
window.location = "DESKTOP URL";

,500);
,2500);
,2500);
else
alert('Invalid phone number')

)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-6 offset-sm-3">
<div id="inputForm">
<form>
<div class="form-group">
<input type="tel" class="form-control mt-4" id="inputPhone" aria-describedby="phoneHelp" placeholder="Enter phone number">
<small id="phoneHelp" class="form-text text-muted">Don't forget to input country code.</small>
</div>
<div class="form-row text-center">
<div class="col-12 mb-4">
<button type="submit" class="btn btn-primary btn-lg" id="submit" style="background-color: #075e54; border-color: #075e54;">SUBMIT</button>
</div>
</div>
</form>
</div>
<div id="loading">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%; background-color: #075e54;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<p class="text-center mt-3" id="status">STATUS</p>
</div>
</div>

2 Answers
2

You have set your button type to submit which will post the form data. Change it to button.

submit

button

https://www.w3schools.com/tags/att_button_type.asp

Be sure to put your JavaScript in a jQuery callback like this:

$(function()
// your code here
)


To ensure the DOM is completely loaded when you are running your jQuery code.

The DOM loads from top to bottom and if you reference your DOM components before the DOM is completed loaded the JQuery calls will fail.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.