Preventing Form Caching With Javascript And jQuery
Posted May 8, 2009 at 9:48 AM
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:
Launch code in new window » Download code as text file »
- <!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.
Download Code Snippet ZIP File
Post Comment | Ask Ben | Other Searches | Print Page
Reader Comments
Wow, I was just trying to figure this out. Thanks Ben!
@Chris,
No problem my man :)
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.
@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??
I tried it with and without and I get the same results as Martin. What version of FF are you using?
@anthony,
Firefox 3.0.10
Not sure of the browser compatibility, but I've had good luck in the past by adding autocomplete="off" to the form.
@6dust,
I've only ever used it with individual fields; I have not tried putting it on the form element before.
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(); })
@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!
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.
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.
@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.
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
hi ,this is cool man ..
its working greatfully
