# How to retrieve value based on radiobutton?

• Aug 4, 2010, 21:30
revivalx
How to retrieve value based on radiobutton?
How I can retrieve value based on radiobutton

This is my code

Code:

```<script type="text/javascript"> function MyCalc(){ var r = document.SignupForm.r.value; var q = document.SignupForm.q.value; var s = document.SignupForm.s.value; var n = document.SignupForm.n.value; var a = (q*n)/s; var b = 1/2; var woc  = r-1; var total = Math.pow(a,b); document.SignupForm.n1.value = round(n); document.SignupForm.total.value = round(total); document.SignupForm.woc.value = round(woc); function round(x) {   return Math.round(x*100)/100;   } //Qn/s^1/2 ==> (Q*n)/s^(1/2) and width of channel,B = R-1 //flow depth, y ==> we get from graph   }</script> <table>   <tr>     <th width="19%"><div align="right">Drainage Reserved Width, R =</div></th>     <th width="5%">&nbsp;</th>     <th width="76%"><div align="left">       <label>       <input name="r" type="text" size="32"/>       </label>     m</div></th>   </tr>   <tr>     <th><div align="right">Design Flow Q =</div></th>     <td>&nbsp;</td>     <td><div align="left">       <label>       <input name="q" type="text" size="32" />       </label>     m 3/s</div></td>   </tr>   <tr>     <th><div align="right">Longitudinal Slope, s =</div></th>     <td>&nbsp;</td>     <td><div align="left">       <label>       <input name="s" type="text" size="32" />       </label>     m</div></td>   </tr>   <tr>     <th><div align="right">Side Slope, Z =</div></th>     <td>&nbsp;</td>     <td><div align="left">       <label>       <input name="z" type="text" size="32" />       </label>     </div></td>   </tr>   <tr>     <th><div align="right">Manning's, n =</div></th>     <td>&nbsp;</td>     <td><div align="left">       <label>       <input name="n1" type="text" id="n1" size="32" />       </label>     </div></td>   </tr> </table> <br /> <table class="tbl_brdr">   <tr>     <th rowspan="2">Surface Grass Cover</th>     <th colspan="2">Suggested n Values</th>   </tr>   <tr>     <th>Min</th>     <th>Max</th>   </tr>   <tr>     <th>Short Grass Cover</th>     <td><label>       <input type="radio" name="n"  value="0.030" onChange="MyCalc()" />     0.030</label></td>     <td><label>       <input type="radio" name="n" value="0.035" onChange="MyCalc()" />     </label>       0.035</td>   </tr>   <tr>     <th>Tall Grass Cover</th>     <td><label>       <input type="radio" name="n"  value="0.035" onChange="MyCalc()" />     0.035</label></td>     <td><label>       <input type="radio" name="n"  value="0.050" onChange="MyCalc()" />     0.050</label></td>   </tr> </table> <table width="908" class="tbl_brdr">   <tr>     <th width="179"><div align="right">Qn/s^ 1/2 =</div></th>     <td width="209"><label>       <input name="total" type="text" id="total" size="32" disabled="disabled" value="0"/>     m 3/s</label></td>   </tr>   <tr>     <th><div align="right">Flow Depth, y =</div></th>     <td><label>       <input name="fd" type="text" id="fd" size="32" />     m ?</label></td>   </tr>   <tr>     <th><div align="right">Width of Channel =</div></th>     <td><label>       <input name="woc" type="text" id="woc" size="32" disabled="disabled" value="0" />     m</label></td>   </tr> </table>```
• Aug 4, 2010, 22:12
dogFang
The radio name is a collection, so reference as an array:
Code:

```// multiple names var aRadio = document.getElementsByName('n'); for(var i=0; len=aRadio.length, i<len; i++) {     if(aRadio[i].checked) {         var n = aRadio[i].value;         break;         }     } // 2 names var n = (document.SignupForm.n[0].checked)? document.SignupForm.n[0].value : document.SignupForm.n[1].value;```
• Aug 5, 2010, 01:15
revivalx
Thanks, it works!!!
• Aug 5, 2010, 06:05
revivalx
but how to retrieve 1 value only??
• Aug 5, 2010, 06:10
dogFang
var "n" will have the value of the checked radio control; only one radio, using the same name, can be checked.
In your document you have 4 "n" radio's, only one can be checked.
• Aug 5, 2010, 06:22
revivalx
```// 2 names var n = (document.SignupForm.n[0].checked)? document.SignupForm.n[0].value : document.SignupForm.n[1].value;```
```    <td><label>       <input type="radio" name="n"  value="0.030" onChange="MyCalc()" />     0.030</label></td>     <td><label>       <input type="radio" name="n" value="0.035" onChange="MyCalc()" />     </label>       0.035</td>   </tr>   <tr>     <th>Tall Grass Cover</th>     <td><label>       <input type="radio" name="n" value="0.035" onChange="MyCalc()" />     0.035</label></td>     <td><label>       <input type="radio" name="n"  value="0.050" onChange="MyCalc()" />     0.050</label></td>```