In the process of building a WordPress plugin that I’m sure will sweep the nation 😉 , I came across a really annoying FireFox bug with Radio Buttons. The problem is that if you two groups of Radio Buttons (say 3 buttons in each group) and you set one button as Checked in each group, sometimes, the button in the first group won’t show up as Checked. Arrrgghhhh!
Radio Buttons not Showing Checked – a FireFox Bug
So, why???? And why does it do it sometimes and not other times. Well, I thought I knew the answer. I thought that if the names of your radio button groups are similar up to a point, FireFox doesn’t differentiate between them in it’s initial rendering. So I changed the names a little bit (see below) and that appeared to fix it. Then I refreshed the screen…and WHAM!!!! broke again.
Here’s the HTML I had:
<!--Group 1 --> <input style="width: auto;" checked="checked" name="sppl_tr_country" type="radio" value="US" tabindex="55" />US<br /> <input style="width: auto;" name="sppl_tr_country" type="radio" value="UK" tabindex="55" />UK<br /> <input style="width: auto;" name="sppl_tr_country" type="radio" value="CA" tabindex="55" />CA <!--Group 2 --> <input style="width: auto;" name="sppl_tr_cost" type="radio" value="$$" tabindex="56" />$$<br /> <input style="width: auto;" checked="checked" name="sppl_tr_cost" type="radio" value="$$$" tabindex="56" />$$$<br /> <input style="width: auto;" name="sppl_tr_cost" type="radio" value="$$$$" tabindex="56" />$$$$<br /> <input style="width: auto;" name="sppl_tr_cost" type="radio" value="$$$$$" tabindex="56" />$$$$$
In IE 6 and Chrome, it was rendering:
In FireFox, it rendered:
The exact same HTML across 3 browsers, and weirdly enough, IE6 got it right. There were occassions when FF got it right too, but sometimes if you refreshed the screen, it would be wrong again.
For the love of Pete! What’s going on?
I thought the trouble was how close my Radio Button names were to each other:
- Group 1:Â Â sppl_tr_country
- Group 2:Â Â sppl_tr_cost
The first 10 characters were the same. Change the first character (or presumably something near the front) so that the names are different early on seemed to work, until I refreshed the screen. Here’s how I changed the screen:
- Group 1:Â Â 1_sppl_tr_country
- Group 2:Â 2_sppl_tr_country
Ah well, if anyone knows what’s up, pleeeeeeeeease let us know!
Cheers!
Byron
Looks like there’s a bug in Firefox regarding the autocomplete feature and radio buttons. Here’s a fix I found. It’s not ideal, but it works.
http://www.ryancramer.com/projects/asmselect/examples/autocomplete_fix.html
Thanks for the tip! I’ll check it out.
Cheers,
Byron
Thanks to the fellow web developer, that works perfectly.
You just saved me a ton of time. Thanks!
Hallelujah thank you! This saved some major hair pulling.
brilliant! solved a big wtf for me. many thanks!
Thank you! Another developer’s time that you have rescued! Thanks for posting this!
Thanks HEEEAPS from me, too Fellow Web Developer.
I’ve started working in VB.NET and I thought it was my code that was causing the issues!
That has definitely worked and I think is the fix for now for FF developers. 🙂
Thanks a LOT to Byron for this original post, too. It’s VERY detailed and has explained my frustration to a tea…. 🙂
Nice one. 🙂
Welcome, everyone…this was a major pain for me for several hours!
Cheers,
Byron
thank you for this – odd but fixed