Radio Button Onclick Event Requires Two Clicks to Fire/Execute on Firefox

Question

Hoping someone has a solution to this weirdness on Firefox 3.

I basically have 3 radio buttons and 3 text input fields (see following code):

<input type="radio" name="group1" id="preloaded" value="preloaded_img" checked="checked" onclick="SetVals();" />
<input type="text" name="text1"  id="text1" />

<input type="radio" name="group1" id="custom" value="custom_img" onclick="SetVals();" />
<input type="text" name="text2"  id="text2" />

<input type="radio" name="group1" id="vector" value="vector_img" onclick="SetVals();" />
<input type="text" name="text3"  id="text3" />

Now, every time I click on a specific Radio Button, the text input elements for the other two buttons should get cleared and also become disabled (see following code).

function SetVals() { // using JQuery + straight JS for this...
$(document).ready(function() {
 $(":radio").click(function(event) {

// use event.target to determine which radio button was clicked
   if (event.target.id=="preloaded") {
    document.getElementByID("text1").disabled=false;
    $("#text2").val("");
    $("#text3").val("");
    document.getElementById("text2").disabled=true;
    document.getElementById("text3").disabled=true;

   } else if (event.target.id=="custom") {
    document.getElementByID("text2").disabled=false;
    $("#text1").val("");
    $("#text3").val("");
    document.getElementById("text1").disabled=true;
    document.getElementById("text3").disabled=true;

   } else if (event.target.id=="vector") {
    document.getElementByID("text3").disabled=false;
    $("#text1").val("");
    $("#text2").val("");
    document.getElementById("text1").disabled=true;
    document.getElementById("text2").disabled=true;
   }
 });
});
}

Also, when the page is initially loaded, the text2 and text3 input fields are disabled via javascript as the text1 field is checked by default:

document.getElementById("text2").disabled=true;
document.getElementById("text3").disabled=true;

The problem I'm having is that it requires 2 (two) clicks to get this to work on Firefox. On Internet Explorer, it works as expected.

So, when clicking on a radio button the first time - nothing happens. When clicking on it a second time, that's when the Onclick Event is triggered.

NOTE: I'm using JQuery for this, but have also used straight Javascript to no avail.

You can simply copy and paste my code on an editor and open the page with Firefox to see issue firsthand.

Has anybody else encountered this? Is it some sort of Firefox bug? If so, is there a work-around?

Any and all help, comments, suggestions, and input are welcome.

Thanks in advance!

Answer 1

Since you are using jQuery to assign the event handler for the radio button click, you can remove the onClick attribute.

This should work for you:

$(function() {
    $(":radio").click(function(event) {
        if (this.id == "preloaded") {
            $("#text1").removeAttr("disabled");
            $("#text2, #text3").val("").attr("disabled", true);
        } else if (this.id == "custom") {
            $("#text2").removeAttr("disabled");
            $("#text1, #text3").val("").attr("disabled", true);
        } else if (this.id == "vector") {
            $("#text3").removeAttr("disabled");
            $("#text1, #text2").val("").attr("disabled", true);
        }
    });
    $("#text2, #text3").val("").attr("disabled", true);
});

Code example on jsfiddle .

Side note: since you are using jQuery you might as well use jQuery for almost all dom interactions since mixing the two will eventually lead to some pain. Let jQuery hide the inconsistencies in browsers.

Answer 2

You started using jQuery, and then returned to vanilla JavaScript... but you mis-typed the getElementById() function.

I would stick with jQuery if you have it, it will avoid IE bugs with this particular method too.

Cleaner HTML

<input type="radio" name="group1" id="preloaded" value="preloaded_img" checked="checked"/>
<input type="text" name="text1" id="text1"/>

<input type="radio" name="group1" id="custom" value="custom_img"/>
<input type="text" name="text2" id="text2"/>

<input type="radio" name="group1" id="vector" value="vector_img"/>
<input type="text" name="text3" id="text3"/>

and the jQuery...

$(document).ready(function(){
  //bind the click event to the radio buttons
  $(':radio').click(function(){
    var radioID = $(this).attr('id');
    if(radioID == 'preloaded'){
      $('#text1').removeAttr('disabled');
      $('#text2, #text3').val('').attr('disabled','disabled');
    } else if(radioID == 'custom'){
      $('#text2').removeAttr('disabled');
      $('#text1, #text3').val('').attr('disabled','disabled');
    } else if(radioID == 'vector'){
      $('#text3').removeAttr('disabled');
      $('#text1, #text2').val('').attr('disabled','disabled');
    }
  });
});

Answer 3

You could try the .change() event handler. I think that could work better.

EDIT: There are issues with the .change() event and IE.