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 clear the form after submitting in JavaScript without using reset?
On the internet, we will find very few websites that don’t contain the form. Most websites contain the contact form, some contain the job application form, and some contain the product order form.
The form allows us to take input from users and manipulate it at the front end or backend side of the application. Also, to provide a good user experience to the application user, we need to reset all the form data once the user submits the form.
In this tutorial, we will learn various approaches to clear the form's input fields once the user presses the submit button.
Clear the single input field after submitting the form
In this part, we will learn to clear the single input field of the form. Sometimes, it requires that users submit the form multiple times by changing some input values. So, in such cases, we can clear only some input fields separately rather than clearing all input fields.
Syntax
Users can follow the syntax below to clear the single input field of the form.
let input1 = document.getElementById('input1');
input1.value = "";
In the above syntax, we have accessed the form's input via its id and assigned the empty string to the value of the input.
Example
In the example below, we have created the form containing a single input. When users press the clear input field button, it invokes the clearText() function, which resets the input field's value.
In the output, users can observe that it clears the input field when they press the submit button.
<html>
<body>
<h3>Clearing only single input field of form when a user submits the form</h3>
<p>Please enter a string below:</p>
<form>
<input type = "text" id = "input1" />
<br> <br>
</form>
<button type = "submit" onclick = "clearText()"> clear input field</button>
<p id = "output"> </p>
<script>
let output = document.getElementById('output');
function clearText(event) {
// access input field
let input1 = document.getElementById('input1');
// clear the input field.
input1.value = "";
output.innerHTML += "Form submitted successfully! <br>";
}
</script>
</body>
</html>
Clear all input fields of the form after submitting the form
Sometimes, we may require to clear all input fields of the form. We can use the querySelector() method of JavaScript to select all the form's input fields, which returns the array of all input fields.
After that, we can iterate through the array of inputs and clear every single input by assigning the empty string to its value attribute.
Syntax
Users can follow the syntax below to access all inputs and clear them.
var allInputs = document.querySelectorAll('input');
allInputs.forEach(singleInput => singleInput.value = '');
In the above syntax, the ‘inputs’ is an array of all inputs, and we have used the forEach() loop method to iterate through all inputs.
Example
In the example below, we have created multiple input forms of different types. After that, in JavaScript, we used the querySelector() method to select all inputs. In the forEach() loop, we have passed the callback function, which sets the empty string for a value attribute of each input.
When the user clicks the ‘clear all inputs’ button, it clears all input fields.
<html>
<body>
<h3>Clearing only all input fields of form when a user submits the form</h3>
<form>
First Name: <input type = "text" id = "input1" />
<br> <br>
Last Name: <input type = "text" id = "input2" />
<br> <br>
Email: <input type = "email" id = "input3" />
<br> <br>
</form>
<button type = "submit" onclick = "clearAllInputs()"> clear all inputs </button>
<p id = "output"> </p>
<script>
let output = document.getElementById('output');
function clearAllInputs(event) {
var allInputs = document.querySelectorAll('input');
allInputs.forEach(singleInput => singleInput.value = '');
output.innerHTML += "Form submitted and cleared successfully! <br>";
}
</script>
</body>
</html>
Usinf the form.reset() method reset the whole form
The form.reset() is a built-in method in JavaScript to clear the form. We can use it to reset all values to the default in the form.
Syntax
Users can follow the syntax below to use the reset() method to reset the whole form when a user submits the form.
formToReset.reset();
In the above syntax, formToReset() is a form element to reset.
Example
The below example demonstrates the use of the reset() method. It contains the form with two different input fields. Also, we have created a button of type ‘submit’, and users can press it to submit the form.
In JavaScript, we have used the event listener to submit the event and executed the reset() method on submitting an event.
<html>
<body>
<h3>Clearing only the form using the reset() method when a user submits the form</h3>
<form id = "demo_form">
Name: <input type = "text" id = "input1" />
<br> <br>
Email:<input type = "email" id = "input3" />
<br> <br>
<button type = "submit"> clear all inputs </button>
</form>
<p id = "output"> </p>
<script>
let output = document.getElementById('output');
const formToReset = document.getElementById('demo_form');
formToReset.addEventListener('submit', (e) => {
e.preventDefault();
formToReset.reset();
output.innerHTML += "The form is resetted successfully!"
});
</script>
</body>
</html>
We have successfully learned three approaches to clear the form after submitting it. Users can use the reset() method to clear the whole form. Also, users can only clear the form's input fields using the second approach. Users should use the first approach to clear only particular input fields.
31K+ Views
