How to break the back button with javascript and how to fix it.

Firefox has a known bug where it can fail to restore the state of a form when you hit the back button or reload the page. Here is a situation in which I encountered this and how I got around it.

We have a project that has some fancy jQuery "flyouts" (think jQuery's datepicker meets a select box) that replace standard select boxes, but we want the page to degrade gracefully if javascript is disabled, and that means when you disable javascript you should be able to see select boxes. The way to do this is to hide the select boxes on page load with jQuery and then to add the text boxes with flyout functionality to the form. It works great until you submit the form and hit the back button. Firefox only partially repopulates the previously selected form values. With javascript disabled everything works fine. What is the problem? Turns out firefox has problems repopulating forms when form elements have been added or moved with javascript. This is because form elements are repopulated based on their position in the dom, not based on the name of the elements. Bummer. But, if you know what causes the bug it becomes easy to work around. The solution is to simply not move or replace anything on the form. Most of the time you can replicate this behavior by showing and hiding elements. So for our case it was simple enough to put the textboxes for the flyouts on the page in a "hidden" state. Then if javascript is enabled they will become unhidden on page load at the same time the select boxes are hidden. Now firefox has no problem repopulating the form on reload or with the back button, and in the case of no javascript we still degrade gracefully.

I posted this because it took us a couple days to realize this was a limitation of firefox and not something we were doing wrong. Hopefully this will help someone else. Incidentially Safari doesn't have this problem, so clearly there is room for improvement in the way firefox repopulates forms. Probably something based on both form element name AND position, instead of a purely positional approach.