Resetting a Form

Let's look at a function we used to have a lot 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 people can reset the whole form.

HTML Reset Method

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

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() {
  var 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!

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

Comments

[JS Bits Bill]

Love it! It's easy to overlook the built-in functionality the browser already provides but tips like this are great for reminding you they're there.

[Chris Bongers]

Yeah it's not used often, but always a good to keep in mind what we do have and possibly need one day.