How To Reset Modal Form In jQuery

WebSolutionStuff | Jan-04-2023 | Categories : Laravel PHP jQuery Bootstrap

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 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 class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>


Add jQuery

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

$('#myModalExample').on('', function () {
    $('#myModal form')[0].reset();

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

$('#MyModalExample').on('', function () {




You might also like:

Recommended Post

Featured Post

Follow us
facebooklogo github instagram twitter