Skip to main content
Ben Nadel at CFUNITED 2010 (Landsdown, VA) with: Christian Ready
Ben Nadel at CFUNITED 2010 (Landsdown, VA) with: Christian Ready

Preventing Form Caching With Javascript And jQuery

By
Published in , — Comments (27)

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.

Want to use code from this post? Check out the license.

Short link: https://bennadel.com/1584

Reader Comments

1 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.

15,848 Comments

@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??

1 Comments

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

31 Comments

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(); })

15,848 Comments

@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!

31 Comments

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.

1 Comments

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.

15,848 Comments

@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.

1 Comments

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

1 Comments

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

2 Comments

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

15,848 Comments

@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.

290 Comments

@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.

21 Comments

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.

1 Comments

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

Oh my chickens, this post is old!
I believe in love. I believe in compassion. I believe in human rights. I believe that we can afford to give more of these gifts to the world around us because it costs us nothing to be decent and kind and understanding. And, I want you to know that when you land on this site, you are accepted for who you are, no matter how you identify, what truths you live, or whatever kind of goofy shit makes you feel alive! Rock on with your bad self!
— Ben Nadel