Page Reload Clears Form Variables

Depending on the browser, certain form fields retain their information when a web page is reloaded.

If that's not desired, JavaScript can be used to reset the form fields when the page is reloaded — assuming the JavaScript is made aware a page reload has occurred.

I'll describe how to do that. And why this article was written in the first place.

A custom project with various screens on one web page, each screen brought in on demand with Ajax (a beautiful concept that can work a treat), needed a way to recover from a page reload. Not only did form fields need to be reset, but certain divs also needed their CSS display values updated.

It should've been easy, right? A person would expect a web page reload to restore the page to the state it was in when it was first loaded.

Well, it didn't.

On page reload, radio buttons that revealed a div remained checked but with their corresponding divs hidden. Unacceptable and rather gauche.

The JavaScript onload function could be used, of course. It could point to a custom function with code to reset form fields (and reveal/hide divs as appropriate, but we'll concentrate only on form fields in this article).

The onload function has a drawback in that it won't fire until everything is loaded, including all images. I wanted the form fields to reset as soon as the source code of the page was loaded into the browser, not wait for images and other external files to load.

There's a way to do that, too, the DOMContentLoaded function. Except it doesn't work in all browsers, particularly older IE.

I ended up coding for both the onload and DOMContentLoaded functions — with a global JavaScript variable as a flag.

There's another thing about JavaScript a person needs to be aware of. Global JavaScript variables aren't restored to their original values when a page is reloaded.

The major complexity has been done for you.

You'll find the code in this article. There's also an example of a function for resetting form fields — with instructions for customizing it for your own purposes.

Here's are the example form fields.

If you'll change the form field values and reload the page, the field values will reset.

Here's the code, including both the example form fields and the JavaScript. Notes follow.

<form onsubmit="return false">
<input type="text" id="form-text" style="width:100px;">
<br>
<textarea id="form-textarea" style="height:50px; width:100px;"></textarea>
<br>
<input type="radio" id="form-radio-1" name="form_radio_name"> 
<input type="radio" id="form-radio-2" name="form_radio_name"> 
<br>
<input type="checkbox" id="form_checkbox">
<br>
<select id="form_select">
<option>- Select One -</option>
<option>Red</option>
<option>Blue</option>
<option>Yellow</option>
</select>
</form>

<script type="text/javascript">
/* 
   Reload Clears Form Variables
   Version 1.0
   July 7, 2014

   Will Bontrager Software LLC
   https://www.willmaster.com/
   Copyright 2014 Will Bontrager Software LLC

   This software is provided "AS IS," without 
   any warranty of any kind, without even any 
   implied warranty such as merchantability 
   or fitness for a particular purpose.
   Will Bontrager Software LLC grants 
   you a royalty free license to use this 
   software provided this notice appears 
   on all copies. 
*/

/* Revise the code of function DoThisUponLoading() to accomplish 
   what needs to be done very time the page loads or reloads. */
function DoThisUponLoading()
{
   document.getElementById("form-text").value = "";
   document.getElementById("form-textarea").value = "";
   document.getElementById("form-radio-1").checked = false;
   document.getElementById("form-radio-2").checked = false;
   document.getElementById("form_checkbox").checked = false;
   document.getElementById("form_select")[0].selected = true;
} // function DoThisUponLoading()

/* No customization required with the following JavaScript code. */
var GlobalDoUponLoading = true;

function DomLoadedFunction()
{
   if( ! GlobalDoUponLoading ) { return; }
   GlobalDoUponLoading = false;
   DoThisUponLoading();
} // function DomLoadedFunction()

function DocumentLoadedFunction()
{
   DomLoadedFunction();
   GlobalDoUponLoading = true;
} // function DocumentLoadedFunction()

function AppendOnloadEvent(f)
{
   var cache = window.onload;
   if(typeof window.onload != 'function') { window.onload = f; }
   else
   {
      window.onload = function()
      {
         if (cache) { cache(); }
         f();
      };
   }
} // function AppendOnloadEvent()

AppendOnloadEvent(DocumentLoadedFunction);
document.addEventListener("DOMContentLoaded",DomLoadedFunction);
</script>

Notes:

In the above code, you'll see the HTML markup for the example form fields. It's followed by JavaScript.

The only place in the JavaScript that needs customization for your own forms is the code within the DoThisUponLoading() function that's colored blue.

To modify function DoThisUponLoading(), first study the JavaScript, noting the id values of the form fields the JavaScript refers to.

Then apply the JavaScript to your own form.

To blank/uncheck/default-select any of the five represented types of form fields, only the form field id needs to be changed in the JavaScript.

To have the JavaScript provide other values to the form fields:

With the pre-written JavaScript, it's relatively easy to cause certain actions on page reload.

The article example show how to reset form fields. Using the same JavaScript, changing only the one function, other actions can also be done — reload content with Ajax and reveal or hide certain content are examples of other actions.

Will Bontrager