There may be times when you want to clear input fields on submit in JavaScript. Perhaps you have a form where the user needs to enter data in multiple fields, and you want to make sure that all data is erased after the user hits submit.
In this tutorial, we’ll show you how to clear input fields on submit in JavaScript.
Clear Input Fields On Submit In JavaScript
Clear Single Input Field On Submit In JavaScript
The easiest way to clear an input field on submit is to set the value of the input field to an empty string. This will erase all data from the input field and leave it blank.
Here’s a quick example:
document.getElementById("my-input").value = "";You can add a click event listener on the submit button and execute the above code.
This code will find the element with the ID of “my-input” and set its value to an empty string. So when the user submits the form, the input will be blank.
Here is the complete HTML –
<html>
<body>
<input type="text" id="my-input"/>
<button id="btn">Submit</button>
<script>
document.getElementById("btn").addEventListener("click", function() {
document.getElementById("my-input").value = "";
});
</script>
</body>
</html>In the above code, we have added a click event listener to the submit button. When the user clicks on the button, the input field will be cleared.
Now, let’s take a look at how to clear multiple input fields on submit in JavaScript.
Clear Multiple Input Fields On Submit In JavaScript
If you have a form with multiple input fields, you can use the same method as above to clear all fields on submit. However, this can become tedious if you have a lot of fields.
Instead, you can loop through all the input fields and set their values to an empty string. This will clear all data from the form and leave it blank.
Here’s a quick example:
var inputs = document.querySelectorAll("#first-name, #second-name");
for (var i = 0; i < inputs.length; i++) {
inputs[i].value = "";
}Alternatively, you can use the forEach() method to loop through the input fields:
var inputs = document.querySelectorAll("#first-name, #second-name");
inputs.forEach(function (input) {
input.value = "";
});This code will find all input fields with the IDs of “first-name” and “second-name”. It will then loop through each field and set its value to an empty string. So when the user submits the form, these fields will be blank.
You can add a click event listener on the submit button and execute the above code.
Here is the complete HTML –
<html>
<body>
<input type="text" id="first-name"/>
<input type="text" id="second-name"/>
<button id="btn">Submit</button>
<script>
var inputs = document.querySelectorAll("#first-name, #second-name");
const button = document.getElementById("btn");
button.addEventListener("click", function() {
var inputs = document.querySelectorAll("#first-name, #second-name");
inputs.forEach(function (input) {
input.value = "";
});
});
</script>
</body>
</html>In the above code, we have added a click event listener to the submit button.
We have two input fields with the IDs of “first-name” and “second-name”. When the user clicks on the button, the code will find all input fields with these IDs.
It will then loop through each field and set its value to an empty string. So when the user submits the form, these fields will be blank.
Clear All Input Fields On Submit In JavaScript
If you have a form with multiple input fields, you can use the form.reset() method to clear all fields on submit. This will reset the form to its default state and all data will be erased.
Here’s a quick example:
document.getElementById("my-form").reset();You can add a click event listener on the form and execute the above code.
This code will find the element with the ID of “my-form” and reset it. So when the user submits the form, all data will be cleared.
Here is the complete HTML –
<html>
<body>
<form id="my-form">
<input type="text" id="first-name"/>
<input type="text" id="second-name"/>
<button id="btn" type="submit">Submit</button>
</form>
<script>
const form = document.getElementById("my-form");
form.addEventListener("submit", function() {
form.reset();
});
</script>
</body>
</html>In the above code, we have added a submit event listener to the form. When the user submits the form, the code will execute and reset the form using the reset() method.
Conclusion
In this article, you learned how to clear input fields on submit in JavaScript. You can use the form.reset() method to clear all data from a form or you can loop through all the input fields and set their values to an empty string.
I hope this article was helpful and that you now know how to clear input fields on submit in JavaScript.