Reset HTML Form After Submission – Simple Examples

Welcome to a quick beginner’s tutorial on how to reset an HTML form after submission. So you are working on a form that needs to clear after the user submits it?

There are 2 mechanisms in HTML and Javascript to take note of when it comes to resetting forms:

  1. Use document.getElementById("FORM").reset() in Javascript to reset the form.
  2. Add an autocomplete="off" property to the HTML form to prevent possible auto-filling after the form reset.

That covers the basics, but let us walk through a few examples in this guide – Read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Form Reset Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

FORM RESET

All right, let us now get into the examples of resetting the form after submission.

 

EXAMPLE 1) AUTOCOMPLETE OFF

1-no-autofill.html
<form method="post" autocomplete="off">
  Name: <input type="text" name="user-name" required/>
  Email: <input type="email" name="user-email" required/>
  <input type="submit" value="Go!"/>
</form>

First, this is nothing but a simple HTML form with autocomplete="off". What has this got to do with resetting forms? Heard of “autocomplete” or “autofill”? This modern convenience can be a stupid pain when resetting forms – You reset the form, autocomplete fills them back. Genius.

So yes, autocomplete="off" is optional, but recommended. Take note though, this is not a directive but more of a recommendation. Browsers and plugins can still ignore and do the form autocomplete.

 

EXAMPLE 2) AJAX FORM SUBMIT & RESET

2A) HTML FORM

2A-reset.html
<form id="my-form" autocomplete="off" onsubmit="return process()">
  <!-- (A) TAKE NOTE: THIS WILL RESET TO "JOHN DOE", NOT EMPTY. -->
  Name: <input type="text" name="name" value="John Doe" required/>
 
  <!-- (B) THIS WILL REVERT TO BLANK -->
  Email: <input type="email" name="email" required/>

  <input type="submit" value="Go!"/>
</form>

In this example, we have an HTML form that submits via AJAX. There is nothing special here, take note of the value though:

  • <input type="text" id="user-name" value="John Doe"/>  This field will reset to “John Doe”, not blank.
  • <input type="email" id="user-email"/> This will reset to a blank field.

 

2B) THE JAVASCRIPT

2B-reset.js
function process () {
  // (A) GET FORM DATA
  var form = document.getElementById("my-form");
  var data = new FormData(form);
 
  // (B) AJAX SEND FORM
  // NOTE: USE HTTP://. NOT FILE://.
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "0-dummy.html");
  xhr.onload = function () {
    console.log(this.response);
    form.reset(); // RESET FORM
  };
  xhr.send(data);
 
  // (C) STOP DEFAULT FORM SUBMIT/PAGE RELOAD
  return false;
}

This may throw the absolute beginners off a little bit because we are not submitting the form in the “traditional way”. This is called Asynchronous Javascript And XML (AJAX), in short, submitting the form without reloading the page. Now, it may seem to be a small handful at first, but it is very straightforward.

  1. First, get the HTML form var form = document.getElementById("my-form"). Then, collect the form data var data = new FormData(form).
  2. Create the AJAX request itself var xhr = new XMLHttpRequest().
    • The part to take extra note is xhr.onload – This runs after the form is submitted and the server responds with an “OK”.
    • As in the introduction, useform.reset() to reset the form.

There, it’s not really that difficult.

 

 

EXAMPLE 3) PARTIAL FORM RESET

3A) HTML FORM

3A-reset-part.html
<form id="my-form" autocomplete="off" onsubmit="return process()">
  Email: <input type="email" name="email" required/>
  Password: <input type="password" id="user-password" name="password" required/>
  Confirm Password: <input type="password" id="confirm-password" name="cpassword" required/>
  <input type="submit" value="Go!"/>
</form>

A dummy HTML form as usual, but this time with 3 fields – Email, password, confirm password. After submitting, we will reset the password fields, leave the email be.

 

3B) THE JAVASCRIPT

3B-reset-part.js
function process () {
  // (A) GET FORM DATA
  var data = new FormData(document.getElementById("my-form"));

  // (B) AJAX SEND FORM
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "0-dummy.html");
  xhr.onload = function () {
    console.log(this.response);
    // MANUAL RESET
    document.getElementById("user-password").value = "";
    document.getElementById("confirm-password").value = "";
  };
  xhr.send(data);

  // (C) STOP DEFAULT FORM SUBMIT/PAGE RELOAD
  return false;
}

This is pretty much the same old AJAX process. But to partially reset a form, there is sadly no quick way around it. We have to manually get the fields and reset their values one by one.

 

 

USEFUL BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

LINKS & RECOMMENDED READS

 

INFOGRAPHIC CHEAT SHEET

How To Reset Form After Submit (click to enlarge)

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published.