Subscribe

Resetting a Form

โœ๏ธ

Two ways to reset a form!

26 Jul, 2020 ยท 2 min read

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

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

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

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next ๐Ÿ“–

Getting started with the HTML canvas

14 Sep, 2020 ยท 3 min read

Getting started with the HTML canvas

Detect Adblockers

22 Jul, 2020 ยท 2 min read

Detect Adblockers

Join 1828 devs and subscribe to my newsletter