reusable function to get radio button's selected value?

[mad.scientist.jr]

According to
http://www.quirksmode.org/js/forms.html
you need to look through a radio button's members to find the value:

Radio buttons
Unfortunately it's not possible to see at once which radio button in a group the user has checked. You need to go >through all radio's and see which one's checked property is true.

I tried writing a reusable function to return the value, see code at:
http://www.geocities.com/usenet_daughter/javascript_radio.htm

but for some reason I can only get a value if I hard code the control
name.

Can anyone explain how to do this?

Thanks

 

[Tom Cole]

According to
   http://www.quirksmode.org/js/forms.html
you need to look through a radio button's members to find the value:


I tried writing a reusable function to return the value, see code at:
   http://www.geocities.com/usenet_daughter/javascript_radio.htm

but for some reason I can only get a value if I hard code the control
name.

Can anyone explain how to do this?

Thanks

Does this work for you?

function getSelectedValueForName(name) {
for (var i = 0; i < document.getElementsByTagName("input").length; i+
+) {
var input = document.getElementsByTagName("input");
if (input.type == "radio" && input.checked) {
return input.value;
}
}
return null;
}

You would call getSelectedValueForName('Radio1'); where your radio
buttons share the name Radio1.

HTH.

 

[Peroli]

According to
� �http://www.quirksmode.org/js/forms.html
you need to look through a radio button's members to find the value:


I tried writing a reusable function to return the value, see code at:
� �http://www.geocities.com/usenet_daughter/javascript_radio.htm

but for some reason I can only get a value if I hard code the control
name.

Can anyone explain how to do this?

Thanks

Does this work for you?

function getSelectedValueForName(name) {
for (var i = 0; i < document.getElementsByTagName("input").length; i+
+) {
var input = document.getElementsByTagName("input");
if (input.type == "radio" && input.checked) {
return input.value;
}
}
return null;
}

You would call getSelectedValueForName('Radio1'); where your radio
buttons share the name Radio1.

HTH.

Tim, HTH,
Your solution was good, but from performance point of view, you
can do better.
Caching your "input" collection will greatly improve speed. Also, for
loops will calculate
the collection's length for each iteration.

function getSelectedValueForName(name) {
var inputs = document.getElementsByTagName("input");
for (var i = 0, len = inputs.length; i < len; i++) {
if (inputs.type == "radio" && input.checked) {
return input.value;
}
}
return null;
}

Even better, if you use Prototype JS Library.

var checked_values = $$
('input:checked[type="radio"]').pluck('value');

-- Peroli Sivaprakasam

 

[Tom Cole]

Does this work for you?

function getSelectedValueForName(name) {
   for (var i = 0; i < document.getElementsByTagName("input").length; i+
+) {
           var input = document.getElementsByTagName("input");
           if (input.type == "radio" && input.checked) {
                   return input.value;
           }
   }
   return null;
}

You would call getSelectedValueForName('Radio1'); where your radio
buttons share the name Radio1.

HTH.

Tim, HTH,
    Your solution was good, but from performance point of view, you
can do better.
Caching your "input" collection will greatly improve speed. Also, for
loops will calculate
the collection's length for each iteration.

function getSelectedValueForName(name) {
        var inputs = document.getElementsByTagName("input");
        for (var i = 0, len = inputs.length; i < len; i++) {
                if (inputs.type== "radio" && input.checked) {

s/b if (inputs.type == "radio" && inputs.checked) {

                        return input.value;

s/b return inputs.value;

                }
        }
        return null;

}

I'm not convinced that using inputs three times is more efficient
than a single assignment of var input =
document.getElementsByTagName('input'). Maybe someone with better
understanding of what goes on behind the scenes could elaborate. I do
see your point though of not calling .length for each iteration.

Even better, if you use Prototype JS Library.

   var checked_values = $$
('input:checked[type="radio"]').pluck('value');

-- Peroli Sivaprakasam- Hide quoted text -

- Show quoted text -

Better for whom? Fewer lines of code in the OP's code? Maybe, but it
doesn't mean it'll perform better or be more readable code. What does
the $$ and pluck methods in Prototype look like?

 

[Evertjan.]

Peroli wrote on 22 apr 2008 in comp.lang.javascript:

function getSelectedValueForName(name) {
var inputs = document.getElementsByTagName("input");
for (var i = 0, len = inputs.length; i < len; i++) {
if (inputs.type == "radio" && input.checked) {
return input.value;
}
}
return null;
}

Where is the parameter called name used?

If the inputs have a common name in a form do:

var inputs = document.forms['myForm'].elements[name];

 

[Peroli]

Peroli wrote on 22 apr 2008 in comp.lang.javascript:

function getSelectedValueForName(name) {
var inputs = document.getElementsByTagName("input");
for (var i = 0, len = inputs.length; i < len; i++) {
if (inputs.type == "radio" && input.checked) {
return input.value;
}
}
return null;
}

Where is the parameter called name used?

If the inputs have a common name in a form do:

var inputs = document.forms['myForm'].elements[name];

Evertjan,
I agree. I will test my code before posting from now on.

Tim,
I agree to your first point that using inputs 3 times is not
efficient.
In-fact, my test results showed that its slower by 10 - 30%.
I wrote a small test script and found that $$ is indeed faster in
Firefox and Safari.
Haven't tested it in IE, but I know it will be slower, because $$
uses native xpath.
Evaluate my test script and share your suggestions. I am open to
criticism.

--- Script (uses prototype.js) ---

<html>
<head>
<title>Benchmark</title>
</head>
<body>
<form id="test_form">
<input type="button" id="getValues" value="getValues">
</form>
<span id="result" />
<script type="text/javascript" src="http://prototypejs.org/assets/
2008/1/25/prototype-1.6.0.2.js"></script>
<script type="text/javascript">
function getSelectedValueForName(name) {
for (var i = 0; i <
document.getElementsByTagName(name).length; i++) {
var input = document.getElementsByTagName(name);
if (input.type == "radio" && input.checked) {
return input.value;
}
}
return null;
}

function getSelectedValueForName1(name) {
var inputs = document.getElementsByTagName(name);
for (var i = 0, len = inputs.length; i < len; i++) {
if (inputs.type == "radio" && inputs.checked) {
return inputs.value;
}
}
return null;
}

function getSelectedValueForName2(name) {
var inputs = document.getElementsByTagName(name);
for (var i = 0, len = inputs.length; i < len; i++) {
var input = inputs;
if (input.type == "radio" && input.checked) {
return input.value;
}
}
return null;
}

function getSelectedRadioValue() {
return $$('input:checked[type="radio"]').pluck('value');
}

function benchmark() {
var d = new Date();
(100).times(
function() {
var vals = getSelectedValueForName('input');
}
);
var t1 = (new Date()) - d;
d = new Date();
(100).times(
function() {
var vals = getSelectedValueForName1('input');
}
);
var t2 = (new Date()) - d;
d = new Date();
(100).times(
function() {
var vals = getSelectedValueForName2('input');
}
);
var t3 = (new Date()) - d;
d = new Date();
(100).times(
function() {
var vals = getSelectedRadioValue();
}
);
var t4 = (new Date()) - d;
$('result').update( "Tim's way:" + t1 + '<br />caching1:' + t2 +
'<br />caching2:' + t3 + '<br /> $$:' + t4);
}

function init() {
var frm = $('test_form');
(1000).times(
function (count) {
frm.insert({bottom:'<input type="radio" name="radio' +
count + '" value="value' + count + '" />'});
}
);

Event.observe('getValues', 'click', benchmark);
}
Event.observe(window, 'load', init);
</script>
</body>
</html>


-- Peroli Sivaprakasam