CODEWITHSUNDEEP
javascriptformsbuttonradio-buttonundefined
Jason
Jason

Reputation: 93

Javascript Radio Button Values returns undefined

I am having lots of difficulty with getting the value from a radio button group in Javascript. I have searched for hours and have not found the solution. When I try to do a document.write command to show what the value is from the radio button selection, they all come back as "undefined". But the funny thing is, if I select the first radio button, it does come back with the correct value shown. This is part of my frustration and I haven't found the solution to find out how to get the other values in the radio button group, this should be SIMPLE! Your help will be greatly appreciated.

Please take a close look at my Javascript code to try to get the value (please disregard the return false; command as I use it to stop the rest of the code on my page):

for( i = 0; i < document.forms.incident.elements.model.length; i++ )
{
  if(document.forms.incident.elements.model[i].checked)
    var omodcheck = document.forms.incident.elements.model.value;
document.write(omodcheck);
return false;
}

My HTML form name is incident. The form code for the radio button group is as follows:

Laptop Model:
<input type="radio" name="model" value="Lenovo X200" />Lenovo X200<br />
<input type="radio" name="model" value="Lenovo X201" />Lenovo X201<br />
<input type="radio" name="model" value="Lenovo X200T" />Lenovo X200T<br />
<input type="radio" name="model" value="Lenovo X201T" />Lenovo X201T<br />
<input type="radio" name="model" value="Lenovo T400" />Lenovo T400<br />
<input type="radio" name="model" value="Lenovo R400" />Lenovo R400<br />

In this case, the code for the document.write(omodcheck) returns the value "Lenovo X200", however, if I make a selection for any of the other radio buttons, the value comes back "undefined"!

Please help!

Upvotes: 1

Views: 5120

Answers (2)

randomizer
randomizer

Reputation: 1649

If I understand it correctly, you will need something like this:

<!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"  xml:lang="en">
<head>
<script type="text/javascript"> 
function checkChecked(){
    for (var i = 0; i< document.getElementsByName('model').length; i++) {
        if(document.testform["model"][i].checked){          
            var omodcheck = document.testform["model"][i].value
            alert(omodcheck);
        }
    }
}
</script> 
</head>
<body onload="checkChecked()">
Laptop Model:
<form name="testform">
    <input type="radio" name="model" value="Lenovo X200" onchange="checkChecked()" />Lenovo X200<br />
    <input type="radio" name="model" value="Lenovo X201" onchange="checkChecked()" />Lenovo X201<br />
    <input type="radio" name="model" value="Lenovo X200T" onchange="checkChecked()" />Lenovo X200T<br />
    <input type="radio" name="model" value="Lenovo X201T" onchange="checkChecked()" />Lenovo X201T<br />
    <input type="radio" name="model" value="Lenovo T400" onchange="checkChecked()" />Lenovo T400<br />
    <input type="radio" name="model" value="Lenovo R400" onchange="checkChecked()" checked />Lenovo R400<br />
</form>
</body>
</html>

or

use brackets on your if condition:

for( i = 0; i < document.forms.incident.elements.model.length; i++ )
{
  if(document.forms.incident.elements.model[i].checked){
        var omodcheck = document.forms.incident.elements.model[i].value;
        document.write(omodcheck);
    }
}

Upvotes: 1

Kevin Farrugia
Kevin Farrugia

Reputation: 7439

From what I understand, it's a very small mistake in that the for-loop is ending on your return false statement. The return false must be outside of the for loop.

Take a look at this jsfiddle (slightly modified to use alert() instead of document.write();

    btnSubmit.onclick = function(){
for( i = 0; i < document.forms.incident.elements.model.length; i++ )
{
  if(document.forms.incident.elements.model[i].checked)
    var omodcheck = document.forms.incident.elements.model.value;
}
    alert(omodcheck);
return false;
}

Upvotes: 0

Related Questions