How to Reset Form using jQuery with reset() Method?

Last Updated : 08 Oct, 2024

Reset a form means clear all input fields data and returns to their initial default values. It can be useful where a user wants to clear all entered data or you want to reset the form after a successful submission. The reset() method can easily reset the form data after clicking the reset button or successful form submission.

Resetting a Form using JavaScript reset() Method

The reset() method is a built-in JavaScript method that can be used to reset a form. When invoked, this method restores the form’s fields to their default values. The reset() method is used with jQuery to reset the form fields.

Syntax

$('selector')[0].reset();
//  OR
$('selector').get(0).reset();

Example 1: In this example, we use reset() method to reset the form data. The form will be reset when user click on “Reset Form” button.

HTML

<!DOCTYPE html> <html>  <head>     <title>         Reset a form using jQuery         with reset() method     </title>      <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">     </script> </head>  <body>     <h1 style="color:green">         GeeksforGeeks     </h1>      <h4>         Reset Form using Reset Form         or Form Submit Buttons     </h4>      <form id="d" name="geek">         <table cellspacing="0" cellpadding="3" border="1">             <tr>                 <td align="center">Username</td>                 <td>                     <input type="text" name="name" />                 </td>             </tr>             <tr>                 <td align="center">Email</td>                 <td>                     <input type="text" name="name" />                 </td>             </tr>             <tr>                 <td align="center">Password</td>                 <td>                     <input type="password" />                 </td>             </tr>         </table>         <br>          <input type="submit" value="Submit" />          <button id="resetBtn">             Reset Form         </button>     </form>      <script>         $(document).ready(function () {             $("#resetBtn").click(function (e) {                 //$("#d").trigger("reset");                  //$("#d").get(0).reset();                  e.preventDefault();                 $("#d")[0].reset()             });         });      </script> </body>  </html>

Output

Example 2: In this example we use jQuery to reset a form with ID d when the “Reset Form” button is clicked. It prevents the default behavior and ensures the form returns to its initial state.

HTML

<!DOCTYPE html> <html>  <head>     <title>         Reset a form using jQuery         with reset() method     </title>      <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">     </script> </head>  <body style="margin: 0 0 0 50px;">     <h1>GeeksforGeeks</h1>      <h4>         Reset Form using Reset Form         or Form Submit Buttons     </h4>      <form id="d" name="geek">         <table cellspacing="0" cellpadding="3" border="1">             <tr>                 <td>Username</td>                 <td>                     <input type="text" name="name" />                 </td>             </tr>             <tr>                 <td>Email</td>                 <td>                     <input type="email" name="email" />                 </td>             </tr>             <tr>                 <td>Password</td>                 <td>                     <input type="password" />                 </td>             </tr>         </table>         <br>          <input type="submit" value="Submit" />          <button id="resetBtn">             Reset Form         </button>     </form>      <script>         $(document).ready(function () {             $("#resetBtn").click(function(e) {                  //$("#d").trigger("reset");                  //$("#d").get(0).reset();                  e.preventDefault();                 $("#d").get(0).reset()              });          });      </script> </body>  </html>

Output:

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”. You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.

How to submit a form or a part of a form without a page refresh using jQuery?

Tejashwi5

Improve

Article Tags :

How to Reset Form using jQuery with reset() Method?

Resetting a Form using JavaScript reset() Method

Similar Reads