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):

Solution 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);
        } elseif (this.id == "custom") {
            $("#text2").removeAttr("disabled");
            $("#text1, #text3").val("").attr("disabled", true);
        } elseif (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.

Solution 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.

Baca Juga

Cleaner HTML

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

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

<inputtype="radio" name="group1"id="vector" value="vector_img"/>
<inputtype="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');
    } elseif(radioID == 'custom'){
      $('#text2').removeAttr('disabled');
      $('#text1, #text3').val('').attr('disabled','disabled');
    } elseif(radioID == 'vector'){
      $('#text3').removeAttr('disabled');
      $('#text1, #text2').val('').attr('disabled','disabled');
    }
  });
});

Solution 3:

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

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

JavaScript Programmer Calgary

Radio Button Onclick Event Requires Two Clicks To Fire/execute On Firefox

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "Radio Button Onclick Event Requires Two Clicks To Fire/execute On Firefox"