CODEWITHSUNDEEP
javascript
Abs
Abs

Reputation: 57926

getElementById not playing nice with Radio Buttons

I am guessing getElementById doesn't work with radio buttons when you want to get the value of it or to find out if it is checked? I say this because I did this:

<input id="radio1" type="radio" name="group1" value="h264" checked="checked" />
<input id="radio2" type="radio" name="group1" value="flv" />

To get the value of the selected one I did this:

function getRadioValue() {

    if(document.getElementById('radio1').value=='h264'){
        return 'h264';
    }
    else{
        return 'flv';
    }

}

However, firebug keeps telling me:

document.getElementById("radio1") is null
[Break on this error] if(document.getElementById('radio1').checked==true){

What am I doing wrong?

Thanks all

Upvotes: 3

Views: 35091

Answers (6)

Steve
Steve

Reputation: 11

Josh's note above was really helpful, I made a slight modification to stop the function returning all the elements of the objects - this seemed to work OK for me

    function getRadioVal(radioName) {
      var rads = document.getElementsByName(radioName);
      for (var rad=0;rad<=rads.length-1;rad++) {
        if(rads[rad].checked) {
          return rads[rad].value; 
        }
      }
      return null;
    }

    alert(getRadioVal("group1"));

Upvotes: 1

Fernando
Fernando

Reputation: 4028

You should call document.getElementById after the document is loaded. Try executing your code like this:

window.onload = function() {
    alert(getRadioValue());
}

Upvotes: 5

TimT
TimT

Reputation:

I always compare my code with the recordings created by the iMacros Firefox addon. Its very useful as a reference!

Upvotes: 0

Josh Stodola
Josh Stodola

Reputation: 82483

Here is a reliable function to get the radio button selection. Since radio buttons are grouped by the name attribute, it makes sense to use getElementsByName...

function getRadioVal(radioName) {
  var rads = document.getElementsByName(radioName);

  for(var rad in rads) {
    if(rads[rad].checked)
      return rads[rad].value;
  }

  return null;
}

In your case, you'd use it like this...

alert(getRadioVal("group1"));

Upvotes: 8

SolutionYogi
SolutionYogi

Reputation: 32243

As others have pointed out, you will have to put your code in load/ready events.

Also, your code will alwasy return 'h264', you will have to check for the checked attribute.

You will have to iterate through radio buttons to find which one is selected.

function getRadioValue()
{
    var radio1 = document.getElementById('radio1');
    var radio2 = document.getElementById('radio2');

    //You sould not hard code the value of HTML radio button in your code.
    //If you change value in HTML code, you will have to modify your JS code as well.
    return radio1.checked ? radio1.value : radio2.value;
}

Also, it will be better idea not to write this JavaScript code by hand but use library like jQuery. Your code will become as simple as,

$("input[name='group1']:checked").val();

Upvotes: 3

Domenic
Domenic

Reputation: 112847

This works on my machine; have you tried a minimal example like the following?

<html>
    <form>
        <input id="radio1" type="radio" name="group1" value="h264" checked="checked" />
        <input id="radio2" type="radio" name="group1" value="flv" />
    </form>
    <script type="text/javascript">
       alert(document.getElementById("radio1"));
    </script>
</html>

My guess is that you're not waiting until after the radio1 element is created to reference it. Use the DOMContentLoaded or load events.

Upvotes: 1

Related Questions