How to retrieve value based on radiobutton?

JavaScript
1

How I can retrieve value based on radiobutton

This is my 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>
2

How about this one? 2 names?

I try use your code but still occur some problem

// 2 names
var n = (document.SignupForm.n[0].checked)? document.SignupForm.n[0].value : document.SignupForm.n[1].value;
3

You have 4 with name=“n”, not 2

    <td><label>
      <input type="radio" [COLOR="Blue"]name="n"[/COLOR]  value="0.030" onChange="MyCalc()" />
    0.030</label></td>
    <td><label>
      <input type="radio" [COLOR="Blue"]name="n"[/COLOR] value="0.035" onChange="MyCalc()" />
    </label>
      0.035</td>
  </tr>
  <tr>
    <th>Tall Grass Cover</th>
    <td><label>
      <input type="radio" [COLOR="Blue"]name="n" [/COLOR] value="0.035" onChange="MyCalc()" />
    0.035</label></td>
    <td><label>
      <input type="radio" [COLOR="Blue"]name="n"[/COLOR]  value="0.050" onChange="MyCalc()" />
    0.050</label></td>
4

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.

5

but how to retrieve 1 value only??

6

Thanks, it works!!!

7

The radio name is a collection, so reference as an array:

// 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;