jQuery Show() and Hide() functions not working

Question

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>

Where is your javascript on the page, in relation to your body? — Taplar, Aug 20 '18 at 16:05
When I click the button, nothing happens. And the javascript code is outside the , but inside — 4d5050, Aug 20 '18 at 16:08
Possible duplicate of [Show/Hide with Checkbox using jQuery](https://stackoverflow.com/questions/15766875/show-hide-with-checkbox-using-jquery) — Muhammed Ozdogan, Aug 20 '18 at 16:08
Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Taplar, Aug 20 '18 at 16:09
use this instead: $(document).on('click', "#submit", function () { — Andrew, Aug 20 '18 at 16:10
You have really tightly coupled code. I highly recommend reading [Decoupling Your HTML, CSS, and JavaScript](https://philipwalton.com/articles/decoupling-html-css-and-javascript/). — Erik Philips, Aug 20 '18 at 16:17
The issue is, that `setTimeout` doesn't wait for its argument function to be executed, instead the code after `setTimeout` call is executed ( the argument function will be executed after the delay you've passed in the second argument). In your case, the form is submitted, and your server responds with a new page, and all the timers will be reset. — Teemu, Aug 20 '18 at 16:19
@Popnoodles I guess OP wants to submit the form, they probably need AJAX for that, not preventing the submission ..? — Teemu, Aug 20 '18 at 16:24

score 4 · Accepted Answer · answered Aug 20 '18 at 16:11

4

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

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

answered Aug 20 '18 at 16:11

dj079

1,389
8
14

score 1 · Answer 2 · answered Aug 20 '18 at 16:11

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.

jQuery Show() and Hide() functions not working

2 Answers2