ansaurus

Question

getElementById not playing nice with Radio Buttons

Answer 1

+4 A:

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

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

Fernando 2009-07-04 17:13:24

Yes. this managed to work. But I wait for at least 5 seconds after page load yet it gives me a null??

Abs 2009-07-04 17:17:05

Chosen as you where the first closest correct answer. Apologies once again everyone.

Abs 2009-07-04 17:22:21

That's because your element was still not loaded. Do you have a large document or are you retrieving the content from the server via xmlhttprequest?

Fernando 2009-07-04 17:23:50

Answer 2

+2 A:

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.

Domenic 2009-07-04 17:13:56

How long do you have to wait. I waited 5 seconds after page load and now a full minute. Surely it should be quicker??

Abs 2009-07-04 17:18:52

It depends on the document. That's why you need to use the events I referenced; they will execute your function as soon as it is possible, but no sooner. (The difference between them being that DOMContentLoaded will not wait for any images e.g. to fill themselves in, whereas the load event will. So DOMContentLoaded will be sooner.)

Domenic 2009-07-04 17:25:15

Answer 3

+2 A:

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();

SolutionYogi 2009-07-04 17:19:48

I use JQuery in my other projects, but this is a very small project and I don't think the overhead of the JQuery library is worth it. :)

Abs 2009-07-04 17:21:33

Overhead of the jQuery library? Other than adding one line in your head section, I don't think there is any overhead. I am sure you would have wasted WAY MORE time to debug this problem compared to including the library in the first place. For me, even if I was creating a throw away sample code, I would include jQuery.

SolutionYogi 2009-07-04 17:26:31

Answer 4

+1 A:

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"));

Josh Stodola 2009-07-04 21:30:21

Answer 5

A:

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

2009-07-04 22:07:39

ansaurus

tags:

views:

answers:

getElementById not playing nice with Radio Buttons

related questions