Updated April 14, 2023
Introduction to jQuery Reset Form
Reset, in simple terms, means bringing anything to its original state. When we talk about reset a form, that means, clearing the web form of all the data or values from its fields.
When handling a website, we often encounter a need to clear or reset a web form, say for example, when we need to empty the form fields after its submission. Resetting simply removes all data from the form including text inputs, select boxes, radio buttons, checkboxes, etc.
In this tutorial, we are going to talk more of resetting a web form using jQuery.
- Reset a web form means clearing of all the data form its fields and bringing them to its original state.
- When using JavaScript, simply the reset() method will suffice the purpose of resetting a web form which is pretty straightforward.
- However, when using jQuery, there is no method as such, but native JavaScript does have it.
- This is the reason we convert the jQuery element to a JavaScript object.
- In case we don’t want to convert the jQuery element to a JavaScript object, we can use the jQuery trigger() method to trigger the JavaScript native reset()
Syntax:
1. To convert the jQuery element to a JavaScript object
$(selector)[0].reset()Or,
$(selector).get(0).reset()2. To trigger JavaScript native reset() method.
$(selector).trigger(event, eventObj…)Implementation of jQueryReset Form
jQuery reset of a form can be achieved using the two ways, using the reset() method of native JavaScript or using trigger() method of jQuery.
Let us take a look at some of the examples to understand the reset of a form.
Example #1
Given below is a very simple example to demonstrate the reset of a form using jQuery.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(document).ready(function () {
$("#resetAnchor").click(function () {
$("#myForm")[0].reset();
});
});
</script>
<style>
#divstyle {
width: 500px;
height: 350px;
padding-top: 20px;
padding-left: 5px;
font-size: 24px;
text-align: center;
color: maroon;
background-color: cadetblue;
}
</style>
</head>
<body>
<div id="divstyle">
<h2>Register</h2>
<hr />
<form id="myForm">
<label>Name :</label>
<input type="text" /><br /><br />
<label>Email :</label>
<input type="text" /><br /><br />
<label>Phone :</label>
<input type="text" />
</form>
<br />
<hr />
<a href="#" id="resetAnchor">Reset Form</a>
</div>
</body>
</html>Output:
- Below screen displays when the above source code gets executed.
- In this example, we have a very simple form containing three input boxes and a link outside the form that should clear the input fields, when clicked.
- On clicking the “Reset Form” link, all the three input fields get cleared of all their values and the form gets to its original state.
- Here, we have used $(selector)[0].reset()way of resetting the form using jQuery.
Example #2
Let us consider another example that illustrates the reset of a form using jQuery.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(document).ready(function () {
$("#btn").click(function () {
$("#form")[0].reset();
});
});
</script>
<style>
#divstyle1 {
width: 960px;
height: 610px;
margin: 50px auto;
font-family: "Droid Serif", serif;
position: relative;
}
#divstyle2 {
width: 320px;
float: left;
padding: 10px 60px 40px;
background: ghostwhite;
border: 1px dotted #ccc;
box-shadow: 0 0 10px;
border-radius: 2px;
font-size: 13px;
}
label {
color: #464646;
text-shadow: 0 1px 0 #fff;
font-size: 20px;
font-weight: bold;
}
h1 {
text-align: center;
font-size: 25px;
}
#btn {
font-size: 17px;
border: 1px solid gray;
padding: 7px 35px;
background-color: #e3b5f5;
font-weight: bold;
box-shadow: 0 0 5px;
border-radius: 2px;
cursor: pointer;
width: 100%;
}
input[type="text"] {
width: 97.7%;
height: 34px;
padding-left: 5px;
margin-bottom: 20px;
margin-top: 8px;
box-shadow: 0 0 5px;
border: 1px solid #b7b7b7;
color: #4f4f4f;
font-size: 20px;
}
</style>
</head>
<body>
<div id="divstyle1">
<div id="divstyle2">
<h1>jQuery Reset Form</h1>
<hr />
<form action="#" method="post" id="form">
<label>Name :</label>
<input type="text" name="name" />
<label>Email :</label>
<input type="text" name="email" />
<label>Gender :</label>
<input type="radio" name="gender" value="male" />Male
<input type="radio" name="gender" value="female" />Female
<hr />
<input type="button" id="btn" value="Reset" />
</form>
</div>
</div>
</body>
</html>Output:
- Below screen displays when the above source code gets executed.
- The given form contains two input text fields and two radio buttons along with a “Reset” button.
- On clicking the “Reset” button, all the input fields get cleared of the values leaving behind the original form with empty input fields.
Example #3
The given example is similar to the previous one but here we have used a different approach to reset the form, using trigger() method of jQuery.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Reset Form Using jQuery</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function () {
$("#btn").click(function () {
$("#form").trigger("reset");
});
});
</script>
<style>
#divstyle1 {
width: 960px;
height: 610px;
margin: 50px auto;
font-family: "Droid Serif", serif;
position: relative;
}
#divstyle2 {
width: 320px;
float: left;
padding: 10px 60px 40px;
background: ghostwhite;
border: 1px dotted #ccc;
box-shadow: 0 0 10px;
border-radius: 2px;
font-size: 13px;
}
label {
color: #464646;
text-shadow: 0 1px 0 #fff;
font-size: 20px;
font-weight: bold;
}
h1 {
text-align: center;
font-size: 25px;
}
#btn {
font-size: 17px;
border: 1px solid gray;
padding: 7px 35px;
background-color: #e3b5f5;
font-weight: bold;
box-shadow: 0 0 5px;
border-radius: 2px;
cursor: pointer;
width: 100%;
}
input[type="text"] {
width: 97.7%;
height: 34px;
padding-left: 5px;
margin-bottom: 20px;
margin-top: 8px;
box-shadow: 0 0 5px;
border: 1px solid #b7b7b7;
color: #4f4f4f;
font-size: 20px;
}
</style>
</head>
<body>
<div id="divstyle1">
<div id="divstyle2">
<h1>jQuery Reset Form</h1>
<hr />
<form action="#" method="post" id="form">
<label>Name :</label>
<input type="text" name="name" />
<label>Email :</label>
<input type="text" name="email" />
<label>Gender :</label>
<input type="radio" name="gender" value="male" />Male
<input type="radio" name="gender" value="female" />Female
<hr />
<input type="button" id="btn" value="Reset" />
</form>
</div>
</div>
</body>
</html>Output:
- The below screen displays when the above source code gets executed.
- In this example, we are using trigger() method of jQuery to reset the form.
Conclusion – jQuery Reset Form
- In this article, we discussed on how we can reset a form in jQuery using two different ways.
- The first one, using the reset() method of native JavaScript and the second one, using the trigger() method of jQuery.
- To use the first approach, we need to convert the jQuery element to a JavaScript object and then call reset()
- For the second approach, trigger() method of jQuery is used to trigger the JavaScript native reset()
Recommended Articles
This is a guide to jQuery Reset Form. Here we also discuss the introduction and syntax along with different examples and its code implementation. You may also have a look at the following articles to learn more –
