In this article, we will implement the reset functionality with the reset() method in jQuery and reset all the input fields of a form. Resetting anything will set everything 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.
Syntax:
$('element_selector')[0].reset();
OR
$('element_selector').get(0).reset();
Example 1: The below example implements the reset functionality using the reset() method and $(‘element_selector’)[0].reset(); syntax:
<!DOCTYPE html> <html>
<head>
<title>Try jQuery Online</title>
<script src=
</script>
<script>
$(document).ready(function() {
$("#resetBtn").click(function(e) {
//$("#d").trigger("reset");
//$("#d").get(0).reset();
e.preventDefault();
$("#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" 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>
<input type="submit" value="Submit" />
</form>
<button id="resetBtn">Reset Form</button>
</center>
</body>
</html>
|
Output:
Example 2: This example implements the reset functionality using the reset() method and $(‘element_selector’)[0].reset(); syntax:
<!DOCTYPE html> <html>
<head>
<title>Try jQuery Online</title>
<script src=
</script>
<script>
$(document).ready(function() {
$("#resetBtn").click(function(e) {
//$("#d").trigger("reset");
//$("#d").get(0).reset();
e.preventDefault();
$("#d").get(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" 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>
<input type="submit" value="Submit" />
</form>
<button id="resetBtn">Reset Form</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.