Cancel button on bootstrap modal doesn't clear filled data
Just assign an id="reset"
to cancel button
<button type="button" class="btn btn-default" id="reset" data-dismiss="modal">Cancel</button>
and following code do the trick
$(document).ready(function() {
$("#reset").click(function() {
$("input").val("");
});
});
Or Better approach, use form id="myform2"
$(document).ready(function() {
$("#reset").click(function() {
$(':input','#myform2').val("");
});
});
OR
With bootstrap validation plugin, no need of above code and any change in cancel button, just add following script above your bootstrap validation script.
$('#myModal').on('hidden.bs.modal', function(){
$(this).removeData('bs.modal');
$('#myform2').bootstrapValidator('resetForm', true);
});
$('#myform2').bootstrapValidator({
//Validation code comes here
});
Note: Here I'm assuming that modal id is #myModal
if not you have to change it to your modal id
, this will reset the form with cancel button when modal closed and reopen again.
With Bootstrap validation example
With Bootstrap Validation example (auto reset inputs with preload values in form on modal load)
faz faz
Updated on June 07, 2022Comments
-
faz faz almost 2 years
How to clear filled data when user clicks on the cancel button on my jQuery modal form.
Currently when I click on the cancel button it only closes the popup box and when I reopen it previous filled data is still stored.
Please advice
<form id="myform2" data-toggle="validator" class="form-horizontal" role="form" method="POST" action="#"> <div class="form-group"> <div class="col-md-12"> <label class="control-label popup-label">Full Name</label> <input required type="text" class="form-control" name="full_name" value="{{ old('full_name') }}"> </div> </div> <div class="form-group"> <div class="col-md-12"> <label class="control-label popup-label">Username</label> <input required type="text" class="form-control" name="username" value="{{ old('username') }}"> </div> </div> <div class="form-group"> <div class="col-md-12"> <label class="control-label popup-label">Password</label> <input pattern=".{5,10}" required title="5 to 10 characters" type="password" class="form-control" name="password" value="{{ old('password') }}"> </div> </div> <div class="modal-footer"> <button type="submit" class="btn btn-primary">Create</button> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel </button> </div> </form>
I have used bootstrap validations as well for form fields.
$(document).ready(function () { $('#myform2').bootstrapValidator({ // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { full_name: { validators: { notEmpty: { message: 'The Full Name field is required' }, stringLength: { min: 5, max: 15, message: 'The Full Name must be more than 5 and less than 15 characters long' },
Edit
Here is my password validation
password: { validators: { notEmpty: { message: 'The Password field is required.' }, stringLength: { min: 5, max: 15, message: 'The Password must be more than 5 and less than 15 characters long' } } }