Boostrap Modal Box Not showing up while checking conditions in JQuery

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>