CODEWITHSUNDEEP
javascriptjquery
AB21
AB21

Reputation: 385

Pop up modal showing according to condition

I want to show the pop up modal if there is no input in text and also show pop up modal if there is any input text according to condition.

I have used two modal but it is not working. I have used IF condition to show the different modal according to condition but I am getting the same modal box having the title "Modal title". 

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

    </head>
    <body>
        <div class="form-group">
            <label for="test" class="col-sm-3 control-label">Test</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" id="test" placeholder="Enter A Value">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-6 col-sm-3">
                <button type="button" id="go" class="btn btn-primary">Go</button>
            </div>
        </div>

        <!--Modal if input is empty-->
        <div class="modal fade" id="#myModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>

                        </button>
                        <h4 class="modal-title">Modal title</h4>

                    </div>
                    <div class="modal-body">
                        <p>One fine body&hellip;</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>

        <!--modal if there is some text--->
        <!--Modal-->
        <div class="modal fade" id="#myModal1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>

                        </button>
                        <h4 class="modal-title">HI</h4>

                    </div>
                    <div class="modal-body">
                        <p>One fine body&hellip;</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <script type="text/javascript">
            var test1 = $('#test').val();

            $('#go').click(function () {
                if (test1 === "") {
                    $('#\\#myModal').modal('show');
                } else {
                    $('#\\#myModal1').modal('show');
                }

            });
        </script>
        <!-- /.modal -->
        <!--End Modal-->
    </body>
</html>

Upvotes: 2

Views: 73

Answers (3)

Varun Malhotra
Varun Malhotra

Reputation: 1202

You dose't have to add # while giving id to div.and you can call it with #sign.you have to get input value again when click event is triggered on button.here you can check the working code at JSFiddle Your updated Code snippet

HTML CODE:

 <!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

</head>
<body>
<div class="form-group">
  <label for="test" class="col-sm-3 control-label">Test</label>
  <div class="col-sm-3">
    <input type="text" class="form-control" id="test" placeholder="Enter A Value">
  </div>
</div>
<div class="form-group">
  <div class="col-sm-offset-6 col-sm-3">
    <button type="button" id="go" class="btn btn-primary">Go</button>
  </div>
</div>

<!--Modal if input is empty-->
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>

        </button>
        <h4 class="modal-title">Modal title</h4>

      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>

<!--modal if there is some text--->
<!--Modal-->
<div class="modal fade" id="myModal1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>

        </button>
        <h4 class="modal-title">HI</h4>

      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>

<!-- /.modal -->
<!--End Modal-->
</body>
</html>

JS Code:

$('#go').click(function() {
var test1 = $.trim($('#test').val());
  if (test1.length==0) {
    $('#myModal').modal('show');
  }
  else{
    $('#myModal1').modal('show');
  }

});

Upvotes: 1

SantoshK
SantoshK

Reputation: 1877

There is No need to use variable you need to use $('#test').val() == "" || $('#test').val() == null to check the condition.. for your scenario if you really want to use variable than you need to define inside click function.. working demo as below -:)

$('#go').click(function() {
  if ($('#test').val() == "" || $('#test').val() == null ) {
    $('#\\#myModal').modal('show');
  }
  else{
    $('#\\#myModal1').modal('show');
  }

});
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

</head>
<body>
<div class="form-group">
  <label for="test" class="col-sm-3 control-label">Test</label>
  <div class="col-sm-3">
    <input type="text" class="form-control" id="test" placeholder="Enter A Value">
  </div>
</div>
<div class="form-group">
  <div class="col-sm-offset-6 col-sm-3">
    <button type="button" id="go" class="btn btn-primary">Go</button>
  </div>
</div>

<!--Modal if input is empty-->
<div class="modal fade" id="#myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>

        </button>
        <h4 class="modal-title">Modal title with blank text box value</h4>

      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>

<!--modal if there is some text--->
<!--Modal-->
<div class="modal fade" id="#myModal1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>

        </button>
        <h4 class="modal-title">HI</h4>

      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>

<!-- /.modal -->
<!--End Modal-->
</body>
</html>

Upvotes: 2

Pankaj Makwana
Pankaj Makwana

Reputation: 3050

You are trying to get value when script loads var test1 = $('#test').val();. SO when script loads the value of test1 will be blank so only one poup will work. Put this statement inside the condition var test1 = $('#test').val();

    <script type="text/javascript">
        $('#go').click(function () {
            var test1 = $('#test').val();
            if (test1 === "") {
                $('#\\#myModal').modal('show');
            } else {
                $('#\\#myModal1').modal('show');
            }

        });
    </script>

You can checkout below demo for better understanding.

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

        </head>
        <body>
            <div class="form-group">
                <label for="test" class="col-sm-3 control-label">Test</label>
                <div class="col-sm-3">
                    <input type="text" class="form-control" id="test" placeholder="Enter A Value">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-6 col-sm-3">
                    <button type="button" id="go" class="btn btn-primary">Go</button>
                </div>
            </div>

            <!--Modal if input is empty-->
            <div class="modal fade" id="#myModal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>

                            </button>
                            <h4 class="modal-title">Modal title</h4>

                        </div>
                        <div class="modal-body">
                            <p>One fine body&hellip;</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>

            <!--modal if there is some text--->
            <!--Modal-->
            <div class="modal fade" id="#myModal1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>

                            </button>
                            <h4 class="modal-title">HI</h4>

                        </div>
                        <div class="modal-body">
                            <p>One fine body&hellip;</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>
            <script type="text/javascript">
                $('#go').click(function () {
                    var test1 = $('#test').val();
                    if (test1 === "") {
                        $('#\\#myModal').modal('show');
                    } else {
                        $('#\\#myModal1').modal('show');
                    }

                });
            </script>
            <!-- /.modal -->
            <!--End Modal-->
        </body>
    </html>

Upvotes: 1

Related Questions