Can't change value in textfield name[wow] and [total]

JavaScript
1

How I can solve my problem right now?

This is my code


<script type="text/javascript">
function MyCalc(){

var r = SignupForm.r.value;
var q = SignupForm.q.value;
var s = SignupForm.s.value;
var z = SignupForm.z.value;
var n = SignupForm.n.value;

r1 =parseFloat(r);
q1 =parseFloat(q);
s1 =parseFloat(s);
z1 =parseFloat(z);
n1 =parseFloat(n);

b = 1/2;
a = (q1*n1)/s1;
total = Math.pow(a,b);

woc = r-1 ;

SignupForm.total.value = total;
SignupForm.woc.value = woc ;

  }
</script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<form action="" method="post" name="SignupForm" id="SignupForm">

<fieldset>
<legend>VEE SHAPED SWALE DESIGN</legend>
<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" id="r" 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" id="q" 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" id="s" 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" id="z" 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" disabled="disabled" />
      </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" id="n" value="0.030" onchange="MyCalc()" />
    0.030</label></td>
    <td><label>
      <input type="radio" name="n" id="n" value="0.035" onchange="MyCalc()" />
    </label>
      0.035</td>
  </tr>
  <tr>
    <th>Tall Grass Cover</th>
    <td><label>
      <input type="radio" name="n" id="n" value="0.035" onchange="MyCalc()" />
    0.035</label></td>
    <td><label>
      <input type="radio" name="n" id="n" value="0.050" onchange="MyCalc()" />
    0.050</label></td>
  </tr>
</table>

</fieldset>
<fieldset><legend>VEE SHAPED SWALE DESIGN</legend>
<p>Refer to Design Chart 26.2 in MASMA, page 26-11</p>
<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>
  <tr>
    <th><div align="right">Channel Cross - section:</div></th>
    <td>&nbsp;</td>
  </tr>
</table>

</fieldset>
</form>
2

thank you, solve!!

3 
if(!isNaN(total)) {
SignupForm.total.value = total;
}
4

thank you sifu

but i got still problem about the data type?

How to avoid output NaN?

5

You need to use the document object in order to access the form.

document.SignupForm

or dogFang’s way :slight_smile:

6

Incorrect referencing, add reference

function MyCalc(){
[COLOR="Blue"]var SignupForm = document.getElementById('SignupForm');[/COLOR]
var r = SignupForm.r.value;
.
.