Guide: How to Clear Form Data After Submit In HTML

Many websites utilize forms to allow users to go through their programs and features. As a result, some people may want to have their personal information scrubbed off after pressing that “submit” button. Others may have a problem with the autocomplete function, as it can mess with their submissions.

Whatever the case, there are quick fixes you can apply using a couple lines of HTML. The key is to apply the method which seems most comfortable to you. You may also choose to apply any of these methods based on what your websites need.

Before we go on to the actual solutions I would like to thank TestDinBolig.dk and Led-strips.dk for making this guide a reality.

The “Autocomplete Off” Solution

As with anything related to HTML, it helps to come up with the most basic solutions first. In this case, it comes in the form in a simple form that features a few lines to remove the “autofill” functionality present in most websites.

Although it can be convenient for lazy people who do not like filling out forms, it can also be a pain for HTML programmers. These functionalities make it so that resetting forms is almost useless, since the form just autocompletes details for the user.

Here is an example that gets rid of the autocomplete function.

Username: <input type=”text” name=”user-name” required/>

Email: <input type=”email” name=”user-email” required/>

</form>

If you look closely, you will see that this solution is very simple. It includes an autocomplete=”off” ton remove the autofill function. With this in place, there will no longer be any autocompleted details each time a user fills out the form. If your preference for your project is to remove any privacy breaches, this can be a handy tool to have.

Keep in mind that the autocomplete=”off” is optional. Most people may want to have their details auto-filled for them due to the convenience. After all, it does get tiring to key in your full name, email address, home address, and other personal details from time to time. But if privacy and data removal are your utmost concerns, then removing the autofill works as a quick solution.

Using Ajax to Reset Form Submissions

If you want to go beyond basic HTML command lines, then there can also be solutions made via a variety of AJAX techniques. Here are the most commonly used ones:

Using HTML Form through AJAX

<!– (A) REMINDER: THIS WILL RESET TO “JOHN SMITH”, NOT EMPTY. –>

Name: <input type=”text” name=”name” value=”John Smith” required/>

<!– (B) THIS WILL RESET TO BLANK –>

Email: <input type=”email” name=”email” required/>

</form>

For the lines above, you will see that the HTML form utilizes AJAX for submissions. Much like the previous example, there is not much to worry about if you are a beginner.

However, there are some crucial pieces of code that you want to remember:

In this case, the field will not go to blank. Instead, it will display “John Smith,” and you can also configure the placeholders to use other names. For instance, you can also include “John Doe” or “Jane Smith.”

This is helpful if you want to leave an example for a field before the user fills them out.

For this one though, the email field will reset to blank after submission. This line is the way to go if you want to remove all traces of email addresses upon completion. Much like passwords, email addresses also need to be protected.

Using Javascript Methods

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;

}

Javascript can be a lot harder to grasp for beginners. In this case, the form submission happens in a unique way. The form submission occurs without refreshing the page, utilizing the AJAX mechanism in full.

If you’re wondering what AJAX stands for by the way, it means Asynchronous Javascript and XML. Quite a mouthful but reading it carefully will tell you exactly its purpose.

Now, onto the nitty gritty. To fully implement this, follow the following steps.

The first thing you need to do is obtain the HTML form:

var form = document.getElementById(“my-form”).

After that, gather the form data:

var data = new FormData(form).

Next, come up with the AJAX request:

var xhr = new XMLHttpRequest().

Now, make sure to pay close attention to the “xhr.onload.” This line contains a crucial part of the programming needed to submit the form. When executed, the form is submitted, and the server will let you know it received the data.

This is very important to note when creating a form that is foolproof and efficient.

Partial Form Reset

If you want to rest only a portion of the form, then there is a way to do so. What you can do is employ some lines of HTML that specify which parts of the form must be cleared.

One of the best things to do this is through the following example:

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

</form>

This form will give you a conventional HTML form. But this time, it removes the password fields. The email field retains the information keyed in by the user. That way, the convenience gets retained without compromising privacy and personal details.

Using Javascript for Partial

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;

}

In these lines of code, you will see that it is very similar to other AJAX processes. However, resetting only part of the forms will require some changes to some of these lines. That is why the fields have to be manually set up, with the values reset individually.

Conclusion on how to clear Form Data after Submit

All in all, resetting the form data after submission is a process that requires some tinkering with HTML. Whatever mode you choose to implement, make sure that you test it out to avoid any errors. Try to do repeated test runs with multiple users before letting the project go live.

Also read Outstanding Themes Guide on How to Center a Video in HTML