Skip to main content
Ben Nadel at Scotch On The Rocks (SOTR) 2011 (Edinburgh) with: Andy Weber and Gunnar Lieb and Thilo Hermann
Ben Nadel at Scotch On The Rocks (SOTR) 2011 (Edinburgh) with: Andy Weber Gunnar Lieb ( @akitogo ) Thilo Hermann ( @thfusion_de )

Preventing Form Caching With Javascript And jQuery

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

		Form Cache Issue

	<form id="form">

			Name:<br />
			<input type="text" name="name" size="40" />

			Newsletter:<br />

			<input type="radio" name="newsletter" value="1"
			Daily Digest<br />

			<input type="radio" name="newsletter" value="2" />
			Deals / Discounts Only<br />

			Preferred Contact Time:<br />
			<select name="contact_time">
				<option value="1" selected="true">Day Time</option>
				<option value="2">Night Time</option>

			<input type="submit" value="Submit" />


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

				document.getElementById( "form" ).reset();



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.

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.



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


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


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



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)

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



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


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


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



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.


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


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.


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

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