calculating a form with radio buttons 1

Kirderf · Feb 4, 2005

I am trying to build a calculator with radio buttons. I keep getting a $NaN error in the display field.

When I use one radio button without the "" around the value it works. When I add the other buttons it gives me the error.
Here is the code:

By the way, how do you post the code in those cool code boxes?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Calculator with Radio Buttons</title>
</head>
<script language='javascript'>function compute(form){

form.totalCost.value ="$" + form.shirtNum.value * form.shirtPrice.value;

}

</script>
<body>
<form method="post">
<p>ShirtNum
<input type="text" name="shirtNum" size="10">
</p>
<p>ShirtPrice
<label>
<input type="radio" name="shirtPrice" value="15">
$15</label>
<label>

<input type="radio" name="shirtPrice" value="20">
$20
</label>
<br>
</p>
<p>TotalCost
<input TYPE="text" NAME="totalCost" SIZE="10">
</p>
<p>
<input TYPE="button" VALUE="Compute Results" ONCLICK="compute(this.form)">
</p>
</form>
</body>
</html>

I'd gladly pay you on Thursday
for a hamburger today!

kaht · Feb 4, 2005

Since you have two radio buttons with the same name you have to scan them both to see which one is selected, and then draw your value from that radio button. The sample below demonstrates this:

And to show your code in a special box you have to encapsulate it with the following tags (removing the spaces)

[ c o d e ] your code here [ / c o d e ]

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Calculator with Radio Buttons</title>
</head>
<script language='javascript'>
function compute(frm){
   for (i = 0; i < frm.shirtPrice.length; i++) {
      if (frm.shirtPrice[i].checked) {
         price = parseInt(frm.shirtPrice[i].value, 10);
      }
   }
   frm.totalCost.value ="$"  + (parseInt(frm.shirtNum.value, 10) * price);
}

</script>
<body>
<form method="post">
  <p>ShirtNum
    <input type="text" name="shirtNum" size="10">
</p>
  <p>ShirtPrice  
    <label>
    <input type="radio" name="shirtPrice" value="15"> 
    $15</label>
    <label>
    
    <input type="radio" name="shirtPrice" value="20"> 
    $20
</label>
    <br>
  </p>
  <p>TotalCost
     <input TYPE="text" NAME="totalCost" SIZE="10">
</p>
  <p>
    <input TYPE="button" VALUE="Compute Results" ONCLICK="compute(this.form)">
  </p>
</form>
</body>
</html>

-kaht

Weaseling out of things is important to learn. It's what separates us from the animals... except the weasel. - Homer Simpson (no, I'm not Homer)

Kirderf · Feb 4, 2005

Perfectly done! I am so envious that you could do that! I am getting it now, I think! Now would check boxes need some sort of verification as well? I notice that with check boxes it registeres the value wether it is checked or not.

I'd gladly pay you on Thursday
for a hamburger today!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

calculating a form with radio buttons 1

Kirderf

Technical User

kaht

Programmer

Kirderf

Technical User

Similar threads

Part and Inventory Search

Sponsor