How to get a value from a checkbox?

@RoxxorDec 21.2008

Not a checkbox, but a radiobutton. Can´t edit the subject.

I am trying to get the selected value from a group of radiobuttons, but I just get “undefined”.

[code]var radio = document.getElementById(‘pollvote’);

for (var i=0; i < radio .length; i++) { if (radio [i].checked) { var radio_value = radio [i].value; } } alert(radio_value);[/code]

Why does it return undefine?

to post a comment

JavaScript

5 Comments(s) _↴

@aj_nscDec 21.2008 — #Syntax is very important

<i>
 </i>var radio = document.getElementById('pollvote');
 
 <i>	</i>for (var i=0; i &lt; radio.length; i++)
 <i>    </i>{
 <i>   	</i>	if (radio[i].checked)
 <i>    </i>  	{
 <i>    </i> 		var radio_value = radio[i].value;
 <i>    </i>            break;
 <i>    </i>  	} 
 }
 alert(radio_value);

There is no space between radio and the [i] and there is also no space between radio and .length

I also added the break statement because there's no need to keep looping through your radio array once you've found the selected value.

EDIT: Also, I've just noted that you have one more problem with your code.

getElementById returns a single reference to an HTML object, it will never be an array. So the line:

<i>
 </i>var radio = document.getElementById('pollvote');

will return just a single element - even if you have incorrectly given all of your radio buttons the same id of pollvote.

If you had something like this:

[code=html]
 <div id="pollvote">
 <input type="radio" name="choice" value="1" />
 <input type="radio" name="choice" value="2" />
 <input type="radio" name="choice" value="3" />
 <input type="radio" name="choice" value="4" />
 </div>
 [/code]

Then you could use the following code to get your array of radio buttons:

<i>
 </i>radio = document.getElementById('pollvote').getElementsByTagName('input');

Hope this helps.

@RoxxorauthorDec 21.2008 — #Thanks, but I still don´t get it working.

Here is an example code:

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
 &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
 &lt;title&gt;Untitled Document&lt;/title&gt;
 &lt;script language="javascript" type="text/javascript"&gt;
 function sendVote() 
 {
 var radio = document.getElementById('pollvote');
 for (var i=0; i &lt; radio.length; i++)
 {
 if (radio[i].checked)
 {
 alert(radio[i].value);
 break;
 } 
 }
 
 }
 &lt;/script&gt;
 &lt;/head&gt;
 
 &lt;body&gt;
 &lt;label&gt;
 &lt;input type="radio" name="pollvote" id="pollvote" value="1" /&gt;
 &lt;/label&gt;
 &lt;p&gt;
 &lt;input type="radio" name="pollvote" id="pollvote" value="2" /&gt;
 &lt;/p&gt;
 &lt;p&gt;
 &lt;input type="radio" name="pollvote" id="pollvote" value="3" /&gt;
 &lt;/p&gt;
 &lt;p&gt;
 &lt;input type="radio" name="pollvote" id="pollvote" value="4" /&gt;
 &lt;/p&gt;
 &lt;p&gt;
 &lt;label&gt;
 &lt;input type="submit" name="button" id="button" value="Submit" onclick="sendVote()" /&gt;
 &lt;/label&gt;
 &lt;/p&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@aj_nscDec 21.2008 — #See my edit above, I changed the post after I made it originally - it has to do with document.getElementById returning a single element.

[code=html]
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Untitled Document</title>
 <script language="javascript" type="text/javascript">
 function sendVote() 
 {
 var radio = document.getElementById('pollvote').getElementsByTagName('input');
 for (var i=0; i < radio.length; i++)
 {
 if (radio[i].checked)
 {
 alert(radio[i].value);
 break;
 } 
 }
 
 }
 </script>
 </head>
 
 <body>
 <form name="pollvoteform" action="">
 <div id="pollvote">
 <input type="radio" name="pollvote" value="11" />
 <input type="radio" name="pollvote" value="2" />
 <input type="radio" name="pollvote" value="3" />
 <input type="radio" name="pollvote" value="4" />
 <input type="submit" name="button" id="button" value="Submit" onclick="sendVote()" />
 </div>
 </form>
 </body>
 </html>
 [/code]

If you're going to use a valid doctype, it's just as well to make it valid HTML

@tivrfoaDec 21.2008 — #hi!

well ... id is one for each page. you have to use radios with the same name.

some things to consider:

1) you will get undefined because none of the radios are checked

[code=html]<input type="radio" name='pollvote' value='hello' /> hello
 <input type="radio" name='pollvote' value='wtf' /> wtf
 <input type="button" value="Get Value" onclick="getValue();" />
 <script type='text/javascript'>
 function getValue() {
 var radio = document.getElementsByName('pollvote');
 var radio_value;
 for (var i=0; i < radio.length; i++) {
 if (radio[i].checked) {
 radio_value = radio [i].value;
 } 
 }
 alert(radio_value);
 }
 getValue();
 </script>[/code]

2) you will get hello

[code=html]
 <input type="radio" name='pollvote' value='hello' checked="checked"/> hello
 <input type="radio" name='pollvote' value='wtf' /> wtf
 <input type="button" value="Get Value" onclick="getValue();" />
 <script type='text/javascript'>
 function getValue() {
 var radio = document.getElementsByName('pollvote');
 var radio_value;
 for (var i=0; i < radio.length; i++) {
 if (radio[i].checked) {
 radio_value = radio [i].value;
 } 
 }
 alert(radio_value);
 }
 getValue();
 </script>[/code]

3) you will get undefined, don't matter if is checked or not, because the fields doesn't exist yet.

[code=html]
 <script type='text/javascript'>
 function getValue() {
 var radio = document.getElementsByName('pollvote');
 var radio_value;
 for (var i=0; i < radio.length; i++) {
 if (radio[i].checked) {
 radio_value = radio [i].value;
 } 
 }
 alert(radio_value);
 }
 getValue();
 </script>
 <input type="radio" name='pollvote' value='hello' checked="checked"/> hello
 <input type="radio" name='pollvote' value='wtf' /> wtf
 <input type="button" value="Get Value" onclick="getValue();" />
 [/code]

@RoxxorauthorDec 21.2008 — #Thank you all! Now I got it working.

Also in #JavaScript _↴

Scrolling Text Force Download Javascript without an event?

Success!

Help @Roxxor spread the word by sharing this article on Twitter...

Tweet This

How to get a value from a checkbox?

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

How to get a value from a checkbox?

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴