Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at CFUNITED 2009 (Lansdowne, VA) with:

Preventing Form Caching With Javascript And jQuery

Posted by Ben Nadel

Form caching is the browser mechanism where by you can navigate away from a form and then back to the same form (using the browser navigation buttons) and the form data that you entered remains in the form. Normally, this is a really awesome feature as the basis for re-navigating to a page is to update information that you entered previously. However, in a small percentage of use-cases, form caching can cause serious problems; specifically, if you have dynamic form rendering in which the display is changed on the fly due to user interaction. In cases like that, form caching may present the user with an unusable interface (especially when cached hidden form fields are being used to store state information).

So, in the small percentage of use-cases where we want to prevent form data from being cached, what can we do? I am not sure if this solution is the best one, and in fact, it uses some voodoo magic that I don't fully understand; but, this is the only cross-browser compatible solution that I could come up with:

NOTE: Working on scaling this video. In the mean time, you can view SWF here.

 
 
 
 
 
 
 
 
 
 

As you can see, the trick is to manually reset() the form right after the form XHTML loads. This works in Google Chrome right way. But, to get this manual reset to work in IE, we need to give it a slight delay using setTimeout(). Getting it to work in FireFox requires one more update and this is the voodoo magic that I was referring to above; by simply including the jQuery Javascript library, the setTimeout() trick works in Firefox, Chrome, and IE. Even though we are not using the jQuery library in any way, if we exclude it, then the manual reset never executes in Firefox.

So, even though I don't fully understand why this works (must be the way jQuery hooks into the event listening framework of the browser), it seems that jQuery saves our butts again! (Oh jQuery, how do I love thee, let me count the ways).

If you want to see the code, here it is:

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • <html>
  • <head>
  • <title>Form Cache Issue</title>
  •  
  • <!---
  • Include the jQuery Javascript library. I am not sure
  • why this makes a difference, but by including it, the
  • Javascript below takes effect.
  • --->
  • <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
  • </head>
  • <body>
  •  
  • <h1>
  • Form Cache Issue
  • </h1>
  •  
  • <form id="form">
  •  
  • <p>
  • Name:<br />
  • <input type="text" name="name" size="40" />
  • </p>
  •  
  • <p>
  • Newsletter:<br />
  •  
  • <input type="radio" name="newsletter" value="1"
  • checked="true"
  • />
  • Daily Digest<br />
  •  
  • <input type="radio" name="newsletter" value="2" />
  • Deals / Discounts Only<br />
  • </p>
  •  
  • <p>
  • Preferred Contact Time:<br />
  • <select name="contact_time">
  • <option value="1" selected="true">Day Time</option>
  • <option value="2">Night Time</option>
  • </select>
  • </p>
  •  
  • <p>
  • <input type="submit" value="Submit" />
  • </p>
  •  
  • </form>
  •  
  •  
  • <!---
  • Right after the form HTML has been rendered, set a timeout
  • for the form reset. A slight timeout is needed for this
  • code to work in Internet Explorer.
  • --->
  • <script type="text/javascript">
  •  
  • setTimeout(
  • function(){
  • document.getElementById( "form" ).reset();
  • },
  • 5
  • );
  •  
  • </script>
  •  
  • </body>
  • </html>

Form caching is a really useful mechanism for the user experience. But, in the small percentage of use-cases where we want to disable it, we need to do a little fenagling.

NOTE: No use of headers (pragma, cache-control, etc.) had any effect on form caching.



Reader Comments

I'm skeptical about the jQuery trickery for Firefox thing. I just tried your code in FF and it worked no problem without the jQuery lib. It also works without the timeout (but I'm not surprised the timeout is needed for IE). I really can't see any reason why FF would not reset the form with a simple reset() call.

I know no-one likes to hear this but: Are you 100% sure you tested in Firefox correctly? :) I just can't duplicate it.

Reply to this Comment

@Martin,

I definitely testing this thoroughly. However, that doesn't mean that my version of Firefox might just be a bit different. Maybe the different versions or even the settings can affect this??

Reply to this Comment

I tried it with and without and I get the same results as Martin. What version of FF are you using?

Reply to this Comment

Not sure of the browser compatibility, but I've had good luck in the past by adding autocomplete="off" to the form.

Reply to this Comment

@6dust,

I've only ever used it with individual fields; I have not tried putting it on the form element before.

Reply to this Comment

Hi Ben,

If your using JQuery a more elegant solution might be to utilise the document ready method and a selector to access the form. This way you don't have to worry about using a timeout. I just tested this and it works in all 3 browsers (hoping the code will display ok):

$(document).ready(function() { $("#form").get(0).reset(); })

Reply to this Comment

@James,

The only reason I didn't want to use the document-ready method is that I didn't want someone to start interacting with the form before the page finished loading (say on a long-running JS include at the bottom or something) and then the form resets after they have entered some data.

Using the setTimeout() I can basically run this the moment the FORM HTML can be interacted with.

That aside, it's nice to know that the $() ready function works in all the browsers to do form resets. Sweet!

Reply to this Comment

Aha yeah, I see where you coming from now - I hadn't considered the form being interacted with if the page was slow to fully render.
I was thinking that you must have had a very good reason for going with the non-JQuery method.

Your solution handles this issue very well indeed.

I know I've said it on Twitter but way to go on the new design - it looks fantastic. Fresh and modern.. Great job.

Reply to this Comment

If you need to reset a form element, it's often because the element performs an action which changes the form in some way.

In these cases I often perform that action again on load so the user is presented with the form display they left the page with.

This is really simple with jQuery. Presuming the event is being assigned on DOM ready you can chain the call to run the event after the call to assign it. Something like:

$(function () {
$("#makes").change(function () {
populateSelect($("#models"), this.value)
}).change()
})

Of course this example only works if the populateSelect function here rewrites #models rather than altering it.

Reply to this Comment

@Sean,

That's definitely another way to go; you could have a form "initialization" method that updates the display based on the form values. This could be used at any point.

The more complex the layout, the harder this would become, I assume.

Reply to this Comment

This truly saved my sanity on a complicated booking form! What a great JS trick to add to the "webvoodoo" magic bag. Many awesome thanks for sharing this with us all :D

Reply to this Comment

Thanks for sharing this Ben. I had the exact same problem.
I'm using your code in my page now. Works great :)

Reply to this Comment

hi i have question, how to delete the field suggestion(once you type your name ben you see an autosuggestion drop down), i couldn't find the solution for this issue..
thanks

Reply to this Comment

@Kem,

I am not sure there is a programmatic way to delete auto-suggest features native to the browser. You can, however, do this manually by actually hitting the "Delete" button while one of the auto-suggested options is high-lighted.

Reply to this Comment

@eteflamingo: autocomplete="on"/"off" is the most universally supported feature of HTML 5's so-called "Web Forms 2.0" feature set. Browser vendors realized right away that it had security implications, so it couldn't wait for broader HTML 5 support. But you may find that some older browsers don't support it.

Just something to watch out for.

Reply to this Comment

Great post Ben - funny how I always stumble upon your posts when searching for issues via Google :)

Just to confirm, 6dust's approach of using autocomplete="off" also works.

Reply to this Comment

@Paolo,

Always happy to have you drop by :) And thanks for confirming the autocomplete="off" approach.

Reply to this Comment

Hi - Thanks for posting your solution. Just wanted to share with you a solution that I came across which worked for me. I used the META tags in the header section of my html page:
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="pragma" content="no-cache" />

Reply to this Comment

Can I use it for div content, to prevent FF from caching? Or this is just foe forms?

Reply to this Comment

Post A Comment

?
You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.