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