I am trying to generate a modal box on submitting a form but when I submit it, it is not validating the required input because it's type='button'. If I replace it with 'submit' then it not showing pop-up box. And also I want to validate first and then generate pop-up. Would someone please help me out in this!
<html>
<head>
<meta name="viewport" content="width = device-width , initial-scale = 1.0">
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cyborg/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<form>
<div class="form-group">
<label for="water">Enter Water :</label>
<input id="water" type="number" min="150" max="210" placeholder="150 to 210 " required class='form-control'>
</div>
<div class="form-group">
<label for="compressiveStrength">Compresive Strength :</label>
<input id="compressiveStrength" type="number" min="30" max="80" placeholder="30 to 80" required class="form-control">
</div>
<div class="form-group">
<label for="plasticViscosity">Plastic Viscosity :</label>
<input id="plasticViscosity" type="number" min="3" max="15" placeholder="3 to 15" required class="form-control">
</div>
<div class="form-group">
<label for="fiber">Fiber Volume Fraction :</label>
<input id="fiber" type="number" min="0" max="2" placeholder="0 to 2" required class="form-control">
</div>
<div class="form-group">
<label for="aspectRatio">Aspect Ratio :</label>
<select id="aspectRatio" class="form-control">
<option>60</option>
<option>50</option>
</select>
</div>
<button type="button" data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-lg">Generate</button>
</form>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Result</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</html>
Simply prevent the default behaviour like this:
$('#form1').submit(function(event){
// cancels the form submission
event.preventDefault();
//If the form is valid open modal
if($('#form1')[0].checkValidity() ){
$('#myModal').modal('toggle');
}
// do whatever you want here
});
So for your example it would be:
<html>
<head>
<meta name="viewport" content="width = device-width , initial-scale = 1.0">
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cyborg/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<form id="form1" name="form1">
<div class="form-group">
<label for="water">Enter Water :</label>
<input id="water" type="number" min="150" max="210" placeholder="150 to 210 " required class='form-control'>
</div>
<div class="form-group">
<label for="compressiveStrength">Compresive Strength :</label>
<input id="compressiveStrength" type="number" min="30" max="80" placeholder="30 to 80" required class="form-control">
</div>
<div class="form-group">
<label for="plasticViscosity">Plastic Viscosity :</label>
<input id="plasticViscosity" type="number" min="3" max="15" placeholder="3 to 15" required class="form-control">
</div>
<div class="form-group">
<label for="fiber">Fiber Volume Fraction :</label>
<input id="fiber" type="number" min="0" max="2" placeholder="0 to 2" required class="form-control">
</div>
<div class="form-group">
<label for="aspectRatio">Aspect Ratio :</label>
<select id="aspectRatio" class="form-control">
<option>60</option>
<option>50</option>
</select>
</div>
<button type="submit" class="btn btn-primary btn-lg">Generate</button>
</form>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Result</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script>
$('#form1').submit(function(event){
// cancels the form submission
event.preventDefault();
if($('#form1')[0].checkValidity() ){
$('#myModal').modal('toggle');
}
// do whatever you want here
});
</script>
</html>
For more information check out: https://stackoverflow.com/a/5688798/7667467
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments