WWW FAQs: How do I clear a form after the user submits it?


2006-07-31: Most web browsers keep form fields in memory, so that when the user returns to the page with the back button, the form data is still there. This can be useful, because reentering information manually is a real pain.

However, sometimes the information is of a private or financial nature, and it would be better if the form fields were never displayed again. This is much safer if, for instance, the form is part of a logon page.

Fortunately, we can do this easily with JavaScript. The major web browsers all support the reset() method, a simple way to reset a form to its original defaults.

But when do we call the reset() method for the form? We'd like to do it as soon as the user leaves the page. And we can do that from the body element's onUnload handler. In Firefox, that works great.

However, in Internet Explorer 6 for Windows, the code is called but the reset method just doesn't get the job done when called from onUnload.

Luckily for us, we also have the option of clearing the form in our onLoad handler. And onLoad is correctly called every time the user backs up to the page (or arrives at it by other means). Internet Explorer handles this one correctly... but Firefox calls onLoad only when the page is loaded for the first time.

Can we solve the puzzle? Sure: we just call our form-clearing function from both onLoad and onUnload. The mechanism is a little different, but the result is the same: users never see their form entries again in Internet Explorer, Firefox, Safari or Opera.

Here's the complete code for a simple page containing a "self-clearing" form. When you submit the form, and then back up to it again, you'll see that the form fields have been correctly erased.

Of course, you'll want to use your own form and submit it to your own PHP page or other form handler. For more information about handling forms, see the article "how can I receive form submissions?" You don't have to use my sample form! Just be sure to copy my script element to the head element of your page, and add the onLoad and onUnload handlers to your body element.


<html>
<head>
<title>A Self-Clearing Form</title>
<script>
function clearForms()
{
  var i;
  for (i = 0; (i < document.forms.length); i++) {
    document.forms[i].reset();
  }
}
</script>
</head>
<body onLoad="clearForms()" onUnload="clearForms()">
<h1>A Self-Clearing Form</h1>
This form data will self-destruct when you leave the current web page.
<form method="post" action="page2.php" name="test">
<input name="field1"/> Field One
<p>
<input name="field2" type="radio" value="One"/>One
<input name="field2" type="radio" value="Two"/>Two

<input name="field2" type="radio" value="Three"/>Three
<input name="field2" type="radio" value="Four"/>Four
<p>
<input type="submit" value="Submit Form Data"/>
</form>
</body>
</html>

This won't prevent a determined professional from stealing information from a public terminal. Sophisticated data thieves use keystroke logger software and other techniques that no web designer can be expected to protect the user against. The important thing is to do your part to prevent casual theft and maintain your users' comfort level.

Legal Note: yes, you may use sample HTML, Javascript, PHP and other code presented above in your own projects. You may not reproduce large portions of the text of the article without our express permission.

Got a LiveJournal account? Keep up with the latest articles in this FAQ by adding our syndicated feed to your friends list!