Trigger bootstrap modal if a condition statement is not met
31,298
Solution 1
In your case, since the modal has an id
of id="#myModal"
, you need to escape the #
within the jQuery selector, $('#\\#myModal').modal('show')
:
$('#go').click(function() {
var test1 = $('#test').val();
if (test1 === "") {
$('#\\#myModal').modal('show');
}
});
<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>
<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-->
<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">×</span>
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>Please enter all values in the fields.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!--End Modal-->
Solution 2
Remove the '#' from the id and your code should work
<div class="modal fade" id="myModal">
Author by
mcadamsjustin
Updated on July 09, 2022Comments
-
mcadamsjustin almost 2 years
Instead of using the default jquery alert popup, I'd like to trigger a Bootstrap Modal. All the tutorials I've read, the modal is triggered by the
click(function(){});
. I'd like to have if triggered if a condition in my "if statement" is not met. Here is the code I havevar test1 = $('#test').val(); $('#go').click(function() { if (test1 === "") { alert("Please enter all values in the fields"); $('#myModal').modal('show'); } });
<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> <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--> <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">×</span> </button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal --> <!--End Modal-->