The Cancel button on the boot module does not clear completed data

Question

How to clear populated data when user clicks cancel button in my jQuery modal form.

Currently, when I click the cancel button, it only closes the popup, and when I open it again, all previously saved data is saved.

I ask for 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 also used bootstrap checks 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 check

 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' } } } 

Answer 1

Just assign id="reset" to cancel

 <button type="button" class="btn btn-default" id="reset" data-dismiss="modal">Cancel</button> 

and the following code do the trick

 $(document).ready(function() { $("#reset").click(function() { $("input").val(""); }); }); 

Script example

Or a better approach, use the id="myform2" form

 $(document).ready(function() { $("#reset").click(function() { $(':input','#myform2').val(""); }); }); 

Example script with form identifier

OR

With the bootstrap authentication plugin, without the need to use the above code and any change to the cancel button, just add the following script above your script bootstrap check.

  $('#myModal').on('hidden.bs.modal', function(){ $(this).removeData('bs.modal'); $('#myform2').bootstrapValidator('resetForm', true); }); $('#myform2').bootstrapValidator({ //Validation code comes here }); 

Note. Here, I assume that the modal identifier #myModal , if you do not have to change it to your modal id , it will reset the form with the cancel button when the modal is closed and reopens.

With Bootstrap Validation Example

With Bootstrap verification example (automatically reset inputs with preload values ​​in the form on a modal load)

Answer 2

add new id attribute to cancel button

 <button id="cancel" type="button" class="btn btn-default" data-dismiss="modal">Cancel </button> <script type="text/javascript"> $(document).ready(function() { // clear input values $('#cancel').on('click', function() { $('form').find('input').val(''); }); }); </script>