Finding the selected radio button?

[Mark Haase]

Hey All--

I'm rusty on my JavaScript but I'm pulling it back out to do a PHP/MySQL
database application. I'm doing all the validation in PHP, but I'm using
JavaScript to show/hide questions which depend on the responses to other
questions, e.g. "If you answered yes to the previous question, then what
time of day will you need your service activated?"

One aspect of this is needing to be able to decide which radio button in
certain groups is selected. Most of these are "yes/no", some have three
options. Apparently the only way to do this is with a for loop? I found
the following code many times on Google while looking for an answer:

================
<form name="test">
<input type="radio" name="myradio" />
<input type="radio" name="myradio" />
<input type="radio" name="myradio" />
</form>

<script type="text/javascript">
//a variable that will hold the index number of the selected radio button
for (i=0;i<document.test.myradio.length;i++){
if (document.test.myradio.checked==true)
theone=i
}
</script>
================

Is this really how everybody does it? It seems like such an obvious
shortcoming in JavaScript that I can't believe its true, but none of the
JS references that I've found online indicate the existence of a
selectedIndex() function or similar for a radio group.

Thanks

 

[Mick White]

Hey All--

I'm rusty on my JavaScript but I'm pulling it back out to do a PHP/MySQL
database application. I'm doing all the validation in PHP, but I'm using
JavaScript to show/hide questions which depend on the responses to other
questions, e.g. "If you answered yes to the previous question, then what
time of day will you need your service activated?"

One aspect of this is needing to be able to decide which radio button in
certain groups is selected. Most of these are "yes/no", some have three
options. Apparently the only way to do this is with a for loop? I found
the following code many times on Google while looking for an answer:

================
<form name="test">
<input type="radio" name="myradio" />
<input type="radio" name="myradio" />
<input type="radio" name="myradio" />
</form>

<script type="text/javascript">
//a variable that will hold the index number of the selected radio button
for (i=0;i<document.test.myradio.length;i++){
if (document.test.myradio.checked==true)
theone=i
}
</script>
================

Is this really how everybody does it? It seems like such an obvious
shortcoming in JavaScript that I can't believe its true, but none of the
JS references that I've found online indicate the existence of a
selectedIndex() function or similar for a radio group.

Build your own:
function selectedRadio(radiogroup){
for(i=0;i<radiogroup.length;i++){
if(radiogroup.checked) return i;
}
}

Mick

 

[Matt Kruse]

One aspect of this is needing to be able to decide which radio button
in certain groups is selected. Most of these are "yes/no", some have
three options. Apparently the only way to do this is with a for loop?
Is this really how everybody does it? It seems like such an obvious
shortcoming in JavaScript that I can't believe its true, but none of
the JS references that I've found online indicate the existence of a
selectedIndex() function or similar for a radio group.

It does seem like a bother that form inputs are handled how they are in
javascript. But, this trouble is easily avoided by writing generalized
functions once and then never worrying about the particulars of getting
input values again.

I have general functions like getInputValue(), setInputValue(),
getInputDefaultValue(), etc at:
http://www.javascripttoolbox.com/validations/

They work regardless of input type, how many inputs there are with the same
name, etc. Very handy, and especially useful when an input on your form
changes from one type to another (radio to select, for example). By using
generalized functions, your javascript would most likely not need to be
changed.

Hope that helps,