How To Reset An HTML Form With JavaScript
With HTML, a reset button can be added in a form with <input />
tag. For that, we need to specify an attribute type
with "reset"
value as type="reset"
<input type="reset" value="Reset" />
And when the user clicks on the Reset
button, the form that it belongs to will reset to its original state.
This can also be done with JavaScript by using reset()
method.
In this tutorial, we’ll see how to reset an HTML form with JavaScript.
Example
- Assume that we have an E-commerce website containing login and registration form on the same page like Facebook.
- An HTML form for registration with id
registrationForm
which will be used by a new customer coming to our website.
<form action="https://example.com/registration" method="post" id="registrationForm">
<!-- .... -->
</form>
So in order to reset this form we will use JavaScript reset()
method.
const registrationForm = document.getElementById("registrationForm");
registrationForm.reset();
With method chaining
document.getElementById("registrationForm").reset();
This will restore the form to its original state by clearing all the form elements.
“Talk is cheap. Show me the code.”
~ Linus Torvalds
Happy 😄 coding