December 21, 2008
Firefox exhibits an undesirable behavior when reloading a page containing a form under these conditions:
- The form contains radio buttons
- The inserted field lives before the radio buttons (in the source)
The radio buttons will become corrupted. This article takes a close look at the issue, isolates the conditions, and presents examples. Following that, a couple of simple solutions are presented as a way to avoid this issue.
Assuming you are using Firefox, see this example of what happens in these conditions. The radio buttons take on the wrong value. Keep reloading, and the checked button cycles through in a linear fashion on each reload. I would call this data corruption. It doesn’t happen in any other browser as far as I can tell.
Firefox’s autocomplete feature
I don’t know if this is a bug in Firefox or not, but it sure behaves like one. It’s tied up into Firefox’s autocomplete mechanism. Autocomplete kicks in when you reload a page with a form, trying to populate the values you had already selected.
Sounds like a good feature, right?
While this may be a helpful feature, I’d argue that people often reload pages with forms in order to return it to a fresh state. So this behavior can be confusing even when it’s working as it should. But that’s beside the point.
Isolated to radio buttons
To the best of my knowledge and testing, only radio buttons are affected by this issue. I haven’t observed other form fields having their values interfered with. Please let me know if you find otherwise.
How do you fix it?
The simplest solution is to turn off autocomplete in Firefox. The easiest way to do this is just to add a new attribute to the form tag:
But perhaps you want a solution that validates with XHTML and doesn’t apply this attribute to other browsers. Here’s how you’d do it in jQuery:
Now, if you reload the page, the problem no longer exists. See this example of the fix in action.
Lets say that you actually want to keep Firefox’s autocomplete feature in place. What do you do then? The only thing I can think of at this point is to be aware of the issue when designing and developing your form.
Radio button placement
If you are using radio buttons, then make sure that they live before the inserted fields in the source, where they will be unaffected.
Using checkboxes instead
If your radio buttons are relatively simple, like a “yes” or “no”, then you could also convert that to a single “yes” checkbox, which should be unaffected.
Perhaps there are other ways around this, but I’m not aware of them. Let me know if you can think of one and I’ll post it here.