How to reset a form using jQuery with .reset() method?

Reset gets anything back to its original state. JQuery doesn’t have a reset() method, but native JavaScript does. So, we convert the jQuery element to a JavaScript object.

JavaScript reset(): The reset() method resets the values of all elements in a form (same as clicking the Reset button).



    Syntax for JavaScript reset button:

  • // type-1
    <input type="reset">
    
  • // type-2
    <input type="button" onclick="this.form.reset();">
  • // type-3
    <input type="button" onclick="formname.reset();">

The button itself resets the form but, the type-1 and type-2, the reset button should be inside the form and type-3 can be either out or in.
But a reset button is a far better choice. (type-1)

  • <input type="reset">
  • Syntax for reset():
    formObject.reset()
  • Syntax to convert jQuery element to a JavaScript object.
    $(selector)[0].reset()

    or

    $(selector).get(0).reset()

If we don’t want to convert the jQuery element to a JavaScript object then we can use the trigger().

As trigger() method triggers the specified event and the default behavior of an event (like form submission) for the selected elements.
Syntax

$(selector).trigger(event, eventObj, ...)

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Try jQuery Online</title>
    <script src=
  </script>
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                //$("#d").trigger("reset");
                //$("#d").get(0).reset();
                $("#d")[0].reset()
            });
        });
    </script>
</head>
  
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <h4> 
        Click on "Submit" to submit and 
          remaining resets to get form to original state. 
        </h4>
        <form id="d" action="/cgi-bin/test.cgi" 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>
                <tr>
                    <td align="center"></td>
                    <td>
                        <input type="submit" value="Submit" />
                    </td>
                </tr>
                <tr>
                    <td align="center"></td>
                    <td>
                        <input type="reset" value="reset button" />
                    </td>
                </tr>
            </table>
        </form>
        <br>
        <input type="button" 
               value="reset() outside form" 
               onclick="geek.reset();" />
        <button>resetby jQuery</button>
    </center>
</body>
  
</html>

chevron_right


Output



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.