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

03 Aug, 2021
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).
// type-1
<input type="reset">

// type-1
<input type="reset">

// type-2
<input type="button" onclick="this.form.reset();">
// type-2
<input type="button" onclick="this.form.reset();">
// type-3
<input type="button" onclick="formname.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">
<input type="reset">
Syntax for reset():formObject.reset()
formObject.reset()
Syntax to convert jQuery element to a JavaScript object.$(selector)[0].reset()or$(selector).get(0).reset()
$(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:
<!DOCTYPE html><html>  <head>    <title>Try jQuery Online</title>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">  </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>
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.
jQuery-Misc
Picked
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
jQuery | ajax() Method
jQuery | children() with Examples
How to check whether a checkbox is checked in jQuery?
How to prevent Body from scrolling when a modal is opened using jQuery ?
How to change the background color of the active nav-item?
Installation of Node.js on Linux
Roadmap to Become a Web Developer in 2022
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?