检查JQuery中的条件时，Boostrap模式框未显示

Question

This is my JQuery Code

$(document).ready(function()
{
    $("#pincode-check").click(function()
        {
            var pincode = $("#pincode").val();

            if(pincode == "" || pincode == null)
                {
                    var data = "<div class='modal-dialog'>"+
                                    "<div class='modal-content'>"+
                                        "<div class='modal-header' align='center'>"+
                                            "<h3 class='modal-title'>UNCBroadband - Pincode Status</h3>"+
                                        "</div>"+
                                        "<div class='modal-body'>"+
                                            "Please Enter A Valid Pincode. The pincode you have entered is <b>Blank</b> or <b>Invalid</b>"+
                                        "</div>"+
                                        "<div class='modal-footer'>"+
                                            "<button class='btn btn-primary' type='button' data-dismiss='modal'>Close!</button>"+
                                        "</div>"+
                                    "</div>"+
                                "</div>";
                                $('#pincode-modal').html(data);
                                $('#pincode-modal').modal('show');
                }

            if(pincode == "400607" || pincode == "444605")
                {
                    var data = "<div class='modal-dialog'>"+
                                    "<div class='modal-content'>"+
                                        "<div class='modal-header' align='center'>"+
                                            "<h3 class='modal-title'>UNCBroadband - Pincode Status</h3>"+
                                        "</div>"+
                                        "<div class='modal-body'>"+
                                        "</div>"+
                                        "<div class='modal-footer'>"+
                                            "<button class='btn btn-primary' type='button' data-dismiss='modal'>Close!</button>"+
                                        "</div>"+
                                    "</div>"+
                                "</div>";
                                $('#pincode-modal').html(data);
                                $('#pincode-modal').modal('show');
                }

            else
                {
                    var data = "<div class='modal-dialog'>"+
                            "<div class='modal-content'>"+
                                "<div class='modal-header' align='center'>"+
                                    "<h3 class='modal-title'>UNCBroadband - Pincode Status</h3>"+
                                "</div>"+
                                "<div class='modal-body'>"+
                                    "We do not currently supply broadband connection in your area. You can visit our contact page & leave us a feedback."+
                                    "<br /><br /><a href='http://www.uncbroadband.com/contact' title='unc'>Click here to visit Contact Us Page!</a>"+
                                "</div>"+
                                "<div class='modal-footer'>"+
                                    "<button class='btn btn-primary' type='button' data-dismiss='modal'>Close!</button>"+
                                "</div>"+
                            "</div>"+
                        "</div>";
                        $('#pincode-modal').html(data);
                        $('#pincode-modal').modal('show');
                }   
        });
});

And this is my HTML code

<div class="display-tc animate-box" data-animate-effect="fadeIn">
    <h1 class="main-title">We connect you to the internet world. Quick setup & dazzling speed than any other providers</h1>
    <h2>Enter Your Pincode Below To Check Connection Delivery Status!</h2>
    <div class="row">
        <form class="form-inline" id="fh5co-header-subscribe">
            <div class="col-md-6 col-md-offset-3">
                <div class="form-group">
                    <input type="text" class="form-control" id="pincode" placeholder="Enter Your Pincode Here!">
                    <button type="submit" id="pincode-check" class="btn btn-default">Check Status!</button>
                </div>
            </div>
        </form>
    </div>
</div>

in the script code in scripts.php i have added a code to stop submit forms:

<script>
  $(document).on("submit", false);
</script>

The problem is whenever i am checking the condition through JQuery for the pin-code by default every-time the else block gets executed no matter whatever i put the input but only the else block is executing.

I had alerted the value, the value is being displayed in the alert box but i don't understand why won't JQuery understand it.

Please help. thanks in advance

Answer 1

Use an else if after your first if to prevent two modals from opening.

 $(document).ready(function() { $("#pincode-check").click(function() { var pincode = $("#pincode").val(); if (pincode == "" || pincode == null) { var data = "<div class='modal-dialog'>" + "<div class='modal-content'>" + "<div class='modal-header' align='center'>" + "<h3 class='modal-title'>UNCBroadband - Pincode Status</h3>" + "</div>" + "<div class='modal-body'>" + "Please Enter A Valid Pincode. The pincode you have entered is <b>Blank</b> or <b>Invalid</b>" + "</div>" + "<div class='modal-footer'>" + "<button class='btn btn-primary' type='button' data-dismiss='modal'>Close!</button>" + "</div>" + "</div>" + "</div>"; $('#pincode-modal').html(data); $('#pincode-modal').modal('show'); }else if (pincode == "400607" || pincode == "444605") { var data = "<div class='modal-dialog'>" + "<div class='modal-content'>" + "<div class='modal-header' align='center'>" + "<h3 class='modal-title'>UNCBroadband - Pincode Status</h3>" + "</div>" + "<div class='modal-body'>" + "</div>" + "<div class='modal-footer'>" + "<button class='btn btn-primary' type='button' data-dismiss='modal'>Close!</button>" + "</div>" + "</div>" + "</div>"; $('#pincode-modal').html(data); $('#pincode-modal').modal('show'); } else { var data = "<div class='modal-dialog'>" + "<div class='modal-content'>" + "<div class='modal-header' align='center'>" + "<h3 class='modal-title'>UNCBroadband - Pincode Status</h3>" + "</div>" + "<div class='modal-body'>" + "We do not currently supply broadband connection in your area. You can visit our contact page & leave us a feedback." + "<br /><br /><a href='http://www.uncbroadband.com/contact' title='unc'>Click here to visit Contact Us Page!</a>" + "</div>" + "<div class='modal-footer'>" + "<button class='btn btn-primary' type='button' data-dismiss='modal'>Close!</button>" + "</div>" + "</div>" + "</div>"; $('#pincode-modal').html(data); $('#pincode-modal').modal('show'); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="display-tc animate-box" data-animate-effect="fadeIn"> <h1 class="main-title">We connect you to the internet world. Quick setup & dazzling speed than any other providers</h1> <h2>Enter Your Pincode Below To Check Connection Delivery Status!</h2> <div class="row"> <form class="form-inline" id="fh5co-header-subscribe"> <div class="col-md-6 col-md-offset-3"> <div class="form-group"> <input type="text" class="form-control" id="pincode" placeholder="Enter Your Pincode Here!"> <button type="submit" id="pincode-check" class="btn btn-default">Check Status!</button> </div> </div> </form> </div> <div id="pincode-modal" class="modal fade" tabindex="-1" role="dialog"></div> </div>