Preventing Form Caching With Javascript And jQuery

Posted May 8, 2009 at 9:48 AM by Ben Nadel

Tags: Javascript / DHTML, HTML / CSS

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

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

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

well i have found it, you just add to input an attribute autocomplete="off", and it worked for me.

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

hi, thanks for this article, really a great help on my problem....

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.

@Paolo,

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

It is not working for opera or safari
help on my problem?
Danny

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

Thanks DUDE!

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

Post A Comment

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.

Please review the following issues:

Author Name:
Author Email:
Author Website:
Comment:	Supported HTML tags for formatting: <strong>bold</strong>   <em>italic</em>   <code>code</code>
	Remember my information
	Subscribe to comments
	Send me a copy of this comment