Home »
jQuery »
jQuery Examples
Resetting a multi-stage form with jQuery
In this tutorial, we'll discuss how to reset an HTML multi-stage form using jQuery?
Submitted by Pratishtha Saxena, on August 11, 2022
Resetting a form is sometimes needed while filling up a form. If the user has filled the form but wants to go for a few changes throughout it, then instead of unchecking each checkbox & radio button, deleting the text in the textboxes one by one, the form should be cleared all at once. This can be achieved dynamically using jQuery.
jQuery reset() Method
This is a jQuery built-in method, which helps clear up all the input values within a form in one go.
Syntax:
$(selector)[0].reset();
The form is selected using the appropriate selector and then it is reset using the reset() method. This reset method can be set as a function for a click event of a button.
Let's understand this better with the help of an example:
Example to reset a multi-stage form with jQuery
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Title</title>
</head>
<body>
<center>
<form id="myForm">
<label>Name: </label>
<input type="text"> <br><br>
<label>Age: </label>
<input type="number"><br><br>
<label>Email: </label>
<input type="email"><br><br>
<label>Address: </label>
<input type="textarea"><br><br>
<label>Gender: </label>
<input type="radio">Female
<input type="radio">Male<br><br>
<label>Education: </label>
<input type="checkbox">X
<input type="checkbox">XII
<input type="checkbox">Graduation<br><br>
<input type="button" id="resetForm" value="Reset"> <input type="button" value="Submit">
</form>
</center>
</body>
</html>
jQuery:
$(document).ready(function() {
$("#resetForm").click(function() {
$("#myForm")[0].reset();
});
});
Output:
After clicking on "Reset" button.
