How To Reset Modal Form In jQuery

In this article, we will see how to reset the modal form in jquery. Here, we will learn how to clear the bootstrap modal form on the close button click using jquery. You can trigger the reset function to clear the form also you can find the form and use the reset() function.

So, let's see the jquery reset form, bootstrap modal form reset using jquery, reset modal form on the close button, how to clear modal form using jquery, and reset modal form after submit button click.

In this step, we will add a bootstrap modal with a form. So, add the following code to the HTML file.

<div class="container">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
  <div class="modal fade" id="myModalExample" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
                  How To Reset Modal Form In jQuery - Websolutionstuff
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
  <form action="">
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="text" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>
  </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>      
    </div>
  </div>  
</div>

Add the following jquery to reset the form. So, add the following code to the script tag.

$("#myModalExample").modal("show");
$('#myModalExample').on('hidden.bs.modal', function () {
    $('#myModal form')[0].reset();
});

Also, you can trigger the reset() function like the below code.

$('#MyModalExample').on('hidden.bs.modal', function () {
    $(this).find('form').trigger('reset');
})

Output:

You might also like:

• Read Also: How To Restrict User Access From IP Address In Laravel 9
• Read Also: How To Add Bootstrap Modal In React JS
• Read Also: How To Add Bootstrap Modal In Laravel
• Read Also: Bootstrap Modal In Angular 13