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)
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")[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.