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:
<!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> |
Output