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 be cleared after the user submits it?

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

 

 

TLDR – QUICK SLIDES

[web_stories_embed url=”https://code-boxx.com/web-stories/reset-html-form-after-submission/” title=”Reset HTML Form After Submission” poster=”https://code-boxx.com/wp-content/uploads/2021/11/STORY-JS-20230518.webp” width=”360″ height=”600″ align=”center”]

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

 

EXAMPLE 1) AUTOCOMPLETE OFF

<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, and 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

<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

function process () {
  // (A) GET FORM DATA
  var form = document.getElementById("my-form"),
      data = new FormData(form);
 
  // (B) AJAX SEND FORM
  // NOTE: USE HTTP://. NOT FILE://.
  fetch("x-dummy.txt", { method: "POST", body: data })
  .then(res => res.text())
  .then(txt => {
    console.log(txt);
    form.reset(); // reset form
  });
 
  // (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 data = new FormData(form).
2. We use fetch(URL, { method: "POST", body: data }) to send the form to the server via an AJAX call.
   • .then(res => res.text()) Returns the server response as plain text.
   • .then(txt => { DO SOMETHING }) Do something with the server response. In this simple example, we useform.reset() to reset the form.

There, it’s not really that difficult.

 

 

EXAMPLE 3) PARTIAL FORM RESET

3A) HTML FORM

<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, and confirm password. After submitting, we will reset the password fields, but leave the email be.

 

3B) THE JAVASCRIPT

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

  // (B) AJAX SEND FORM
  fetch("x-dummy.txt", { method: "POST", body: data })
  .then(res => res.text())
  .then(txt => {
    console.log(txt);
    document.getElementById("user-password").value = ""; // reset password
    document.getElementById("confirm-password").value = ""; // reset confirm password
  });

  // (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.

 

 

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

LINKS & RECOMMENDED READS

• Javascript AJAX – A Beginner’s Tutorial – Code Boxx
• HTML Form Validation – Code Boxx
• HTML Autocomplete attribute – MDN

 

INFOGRAPHIC CHEAT SHEET