Resetting a Form

Let’s look at a function we used to have but somehow seems a bit faded for no good reason!

The form reset option was usually a button at the bottom of your form to reset the whole input.

I work for a company that uses a lot of pre-population based on cookies, but sometimes this information is not what you want in the inputs so that people can reset the whole form.

HTML Reset Method permalink

One method to reset a form a just by using the reset input type, and your HTML would look like this;

<form>
  <input type="text" />
  <br /><br />
  <input type="text" />
  <br /><br />
  <input type="text" />
  <br /><br />
  <input type="reset" />
</form>

Try and type something in the fields and press the reset button. This will reset the whole form.

JavaScript Reset Method permalink

Another way to do this is with JavaScript, for instance, after a submit.

Let’s add the following button:

<button type="button" onclick="myReset()">JavaScript</button>

function myReset() {
  const form = document.querySelector('form');
  form.reset();
}

Alternatively, even easier, we can use the following action:

<button type="button" onclick="reset()">JavaScript #2</button>

View these methods on Codepen.

See the Pen Resetting a Form by Chris Bongers (@rebelchris) on CodePen.

Thank you for reading, and let’s connect! permalink

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter