Ryan Cramer

December 21, 2008

Firefox, Radio Buttons and Javascript

Firefox exhibits an undesirable behavior when reloading a page containing a form under these conditions:

  • The form contains radio buttons
  • The form contains any type of field inserted with Javascript
  • 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.

What happens

This autocomplete “feature” isn’t aware of the form field you’d inserted with Javascript, and such a field is immune to tampering by this feature. But any radio button fields that come after your new field will be broken by autocomplete’s antics. Upon reload, whatever value was previously checked in the HTML, the next one will be checked instead. If the user had already checked a value, then their selection is modified in the same way.

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:

<form autocomplete="off">

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:

$(document).ready(function() ); 

Now, if you reload the page, the problem no longer exists. See this example of the fix in action.

Other Solutions

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.

What else?

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.

—Ryan Cramer