Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to reset or clear a form using JavaScript?
This tutorial teaches us how to reset or clear a form using JavaScript. This option is very helpful for users in the situation where they have filled the wrong form and before submitting they get to know about it and now they want to delete all the data. If the form is too large then manually deleting everything may be hard so it's better to use the reset() method of JavaScript.
The reset() method is defined in JavaScript and by just clicking on it the form which will be linked to its onclick() method will reset every input section of the provided form.
Syntax
We have seen the basics of the reset() function, now let’s move to its syntax −
var element = document.getElementById( Id_of_required_form ). element.reset()
In the above syntax, “Id_of_required_form” is the id of the form which we want to reset or clear. We have used the ‘getElementById’ method of the DOM to get the form and stored that in a variable name ‘element’.
After that, by using the method reset() we reset or clear the form with the id ‘Id_of_required_form’ element by calling it.
Algorithm
We have seen the syntax to reset or clear a form by getting its id and reset() method, let’s see the complete algorithm step by step to understand it in a better way −
Creating a user form
In these steps, we will create the form in which we will define or create many input boxes for user input to fill the form and a button which will call the function to delete the object from the dropdown list.
Initially, we have to create a form using the <form> tag which we want to reset or clear using the reset() method of JavaScript.
In the form, we have created some input boxes by using the <input> tag where the user can write the data.
These input spaces will be of type text and number to get the user input in the required type.
In the form after defining ‘inputs’ to take user input, we will define an input field using the <input> tag and will make it of type button and we will define the 'onclick' event which will call the function which we will define later in the script.
Defining script or function to remove
In these steps, we will define the function which will be called in the ‘onclick’ event of the above-defined button.
Initially, we will create a function using the ‘function’ keyword and will give it a name that will be called in the ‘onclick’ event.
In the defined function we will create a variable to store the return value from the call to the ‘document.getElementById()’ method.
We will pass the ‘id’ of the above-defined form as the parameter to the call to the ‘document.getElementById()’ method.
By using the reset method with the variable (which contains the return value of the call to the method) we can reset every input field to empty.
These are the basic steps to reset or clear a form using JavaScript, now let’s see some examples to get a better understanding of the above-defined steps.
Example
In this example, we are going to implement the above-defined algorithm step by step, let’s implement the code −
<!DOCTYPE html> <html> <body> <h3>Fill out the below-given form and click the reset button to see the working of the reset() function in JavaScript.</h3> <form id=" form_id "> Student Name <br> <input type="text" name="sname"> <br> Student Subject <br> <input type = "password" name = "ssubject" > <br> Student Roll Number <br> <input type = "roll_no" name = "roll_number" > <br> <input type = "button" onclick = "newFunction()" value = "Reset" > </form> <script> function newFunction(){ var element = document.getElementById(" form_id "); element.reset() } </script> </body> </html>
In the above output, we got one form in which there are some input spaces, where the user can provide some input and at last, there is a reset button which will reset the form to the original or initial form.
Conclusion
In this tutorial, we have learned the method to reset or clear the HTML form using JavaScript. This is only possible if while defining the HTML form programmer defines or creates a button for the user to reset the form otherwise the user has to reset it manually.
The reset() function is defined in JavaScript and by just clicking on it the form which will be linked to its onclick() method will reset every input section of the provided form. Also, if there is any pre-defined value is there present for any input it will get that value.
35K+ Views
