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

Deepen your understanding with these curated continuations.

View All Articles

Tutorial 5 min read

Convert array to an object in JavaScript

This article explains simplest and quickest way to convert array to an object in JavaScript. Using widely accepted spread operator `...` makes easy to do it.

Vishnu Jan 21, 2021

Tutorial 5 min read

How to Update an Array Element in JavaScript

Learn the simplest ways to update array elements in JavaScript. This guide explains how to use assignment operators and modern methods to modify array values.

Vishnu Nov 19, 2020

JavaScript 5 min read

Flatten an Array One Level Deep in Javascript

This article explains to flatten an array one level deep in javascript comparing with lodash _.flatten method.

Vishnu Nov 04, 2020