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
– Taplar, Commented Aug 20, 2018 at 16:05
When I click the button, nothing happens. And the javascript code is outside the <body>, but inside <html> — 4d5050
– 4d5050, Commented Aug 20, 2018 at 16:08
Possible duplicate of Why does jQuery or a DOM method such as getElementById not find the element? — Taplar
– Taplar, Commented Aug 20, 2018 at 16:09

dj079 · Accepted Answer · 2018-08-20 16:11:42Z

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, 2018 at 16:11

dj079

1,3899 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

André Vermeulen · Accepted Answer · 2018-08-20 16:11:57Z

1

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.

answered Aug 20, 2018 at 16:11

André Vermeulen

1,8444 gold badges18 silver badges26 bronze badges

Collectives™ on Stack Overflow

jQuery Show() and Hide() functions not working

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related