reusable function to get radio button's selected value?

[mad.scientist.jr@gmail.com]

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
>Unfortunatel y 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]

Re: reusable function to get radio button's selected value?

On Apr 21, 12:21 pm, mad.scientist.. .@gmail.com wrote:

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_daug...ript_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 getSelectedValu eForName(name) {
for (var i = 0; i < document.getEle mentsByTagName( "input").length ; i+
+) {
var input = document.getEle mentsByTagName( "input")[i];
if (input.type == "radio" && input.checked) {
return input.value;
}
}
return null;
}

You would call getSelectedValu eForName('Radio 1'); where your radio
buttons share the name Radio1.

HTH.

[Peroli]

Re: reusable function to get radio button's selected value?

Tom Cole wrote:

On Apr 21, 12:21�pm, mad.scientist.. .@gmail.com wrote:

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
>Unfortunatel y 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_daug...ript_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 getSelectedValu eForName(name) {
for (var i = 0; i < document.getEle mentsByTagName( "input").length ; i+
+) {
var input = document.getEle mentsByTagName( "input")[i];
if (input.type == "radio" && input.checked) {
return input.value;
}
}
return null;
}
>
You would call getSelectedValu eForName('Radio 1'); 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 getSelectedValu eForName(name) {
var inputs = document.getEle mentsByTagName( "input");
for (var i = 0, len = inputs.length; i < len; i++) {
if (inputs[i].type == "radio" && input[i].checked) {
return input[i].value;
}
}
return null;
}

Even better, if you use Prototype JS Library.

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

-- Peroli Sivaprakasam

[Tom Cole]

Re: reusable function to get radio button's selected value?

On Apr 22, 10:16 am, Peroli <per...@gmail.c omwrote:

Tom Cole wrote:

On Apr 21, 12:21�pm, mad.scientist.. .@gmail.com wrote:

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_daug...ript_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 getSelectedValu eForName(name) {
   for (var i = 0; i < document.getEle mentsByTagName( "input").length ; i+
+) {
           var input = document.getEle mentsByTagName( "input")[i];
           if (input.type == "radio" && input.checked) {
                   return input.value;
           }
   }
   return null;
}

>

You would call getSelectedValu eForName('Radio 1'); 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 getSelectedValu eForName(name) {
        var inputs = document.getEle mentsByTagName( "input");
        for (var i = 0, len = inputs.length; i < len; i++) {
                if (inputs[i].type== "radio" && input[i].checked) {

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

                        return input[i].value;

s/b return inputs[i].value;

                }
        }
        return null;
>
}
>

I'm not convinced that using inputs[i] three times is more efficient
than a single assignment of var input =
document.getEle mentsByTagName( 'input')[i]. 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.]

Re: reusable function to get radio button's selected value?

Peroli wrote on 22 apr 2008 in comp.lang.javas cript:

function getSelectedValu eForName(name) {
var inputs = document.getEle mentsByTagName( "input");
for (var i = 0, len = inputs.length; i < len; i++) {
if (inputs[i].type == "radio" && input[i].checked) {
return input[i].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.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[Peroli]

Re: reusable function to get radio button's selected value?

On Apr 22, 10:22 pm, "Evertjan." <exjxw.hannivo. ..@interxnl.net >
wrote:

Peroli wrote on 22 apr 2008 in comp.lang.javas cript:
>

function getSelectedValu eForName(name) {
var inputs = document.getEle mentsByTagName( "input");
for (var i = 0, len = inputs.length; i < len; i++) {
if (inputs[i].type == "radio" && input[i].checked) {
return input[i].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.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

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

Tim,
I agree to your first point that using inputs[i] 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>Benchmar k</title>
</head>
<body>
<form id="test_form" >
<input type="button" id="getValues" value="getValue s">
</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 getSelectedValu eForName(name) {
for (var i = 0; i <
document.getEle mentsByTagName( name).length; i++) {
var input = document.getEle mentsByTagName( name)[i];
if (input.type == "radio" && input.checked) {
return input.value;
}
}
return null;
}

function getSelectedValu eForName1(name) {
var inputs = document.getEle mentsByTagName( name);
for (var i = 0, len = inputs.length; i < len; i++) {
if (inputs[i].type == "radio" && inputs[i].checked) {
return inputs[i].value;
}
}
return null;
}

function getSelectedValu eForName2(name) {
var inputs = document.getEle mentsByTagName( name);
for (var i = 0, len = inputs.length; i < len; i++) {
var input = inputs[i];
if (input.type == "radio" && input.checked) {
return input.value;
}
}
return null;
}

function getSelectedRadi oValue() {
return $$('input:check ed[type="radio"]').pluck('value ');
}

function benchmark() {
var d = new Date();
(100).times(
function() {
var vals = getSelectedValu eForName('input ');
}
);
var t1 = (new Date()) - d;
d = new Date();
(100).times(
function() {
var vals = getSelectedValu eForName1('inpu t');
}
);
var t2 = (new Date()) - d;
d = new Date();
(100).times(
function() {
var vals = getSelectedValu eForName2('inpu t');
}
);
var t3 = (new Date()) - d;
d = new Date();
(100).times(
function() {
var vals = getSelectedRadi oValue();
}
);
var t4 = (new Date()) - d;
$('result').upd ate( "Tim's way:" + t1 + '<br />caching1:' + t2 +
'<br />caching2:' + t3 + '<br /$$:' + t4);
}

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

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


-- Peroli Sivaprakasam