display and sum radio value

Hi,

I'm trying to make a form with radio buttons that contain nummeric values.
After selecting a radio button the value should appear below
Then after hit the button it should calculate (sum) the values.

Problem is that the top selection is not working properly and after hit the button it won't calculate.

<html>
<head>
<script>
function toTaal()
{

A1=document.form1.A1.value;
A2=document.form1.B1.value;

document.form1.total.value=parseInt(A1+A2);


}
</script>
<script language="JavaScript">
function subFormA()
{
var j = 0;
var radio_buttons = new Array();
var the_form = window.document.forms[0];
for(var i=5; i<the_form.length; i++)
      {
      var temp = the_form.elements[i].type;
      if((temp == "radio") && (the_form.elements[i].checked)) { radio_buttons[j] = the_form.elements[i].value; j++; }
      }
for(var k=0; k<radio_buttons.length; k++)
      {
      document.form1.A1.value=(radio_buttons[k]);
      }
}

function subFormB()
{
var j = 0;
var radio_buttons = new Array();
var the_form = window.document.forms[0];
for(var i=5; i<the_form.length; i++)
      {
      var temp = the_form.elements[i].type;
      if((temp == "radio") && (the_form.elements[i].checked)) { radio_buttons[j] = the_form.elements[i].value; j++; }
      }
for(var k=0; k<radio_buttons.length; k++)
      {
      document.form1.B1.value=(radio_buttons[k]);
      }
}
</script>
</head>

<body><form id="form1" name="form1" method="post">
<table width="300" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <input name="A" type="radio" value="0" onClick="subFormA()"/>
      test0    </td>
  </tr>
  <tr>
    <td><input name="A" type="radio" value="1" onClick="subFormA()"/>
      test1</td>
  </tr>
  <tr>
    <td><input name="A" type="radio" value="2" onClick="subFormA()"/>
test2</td>
  </tr>
  <tr>
    <td><input name="A" type="radio" value="3" onClick="subFormA()"/>
test3</td>
  </tr>
  <tr>
    <td><input name="A" type="radio" value="4" onClick="subFormA()"/>
test4</td>
  </tr>
  <tr>
    <td>totaal
      <input name="A1" type="text" id="A1" value=""/></td>
  </tr>
</table>
<br />
<table width="300" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><input name="B" type="radio" value="0" onClick="subFormB()"/>
      test0 </td>
  </tr>
  <tr>
    <td><input name="B" type="radio" value="1" onClick="subFormB()"/>
      test1</td>
  </tr>
  <tr>
    <td><input name="B" type="radio" value="2" onClick="subFormB()"/>
      test2</td>
  </tr>
  <tr>
    <td><input name="B" type="radio" value="3" onClick="subFormB()"/>
      test3</td>
  </tr>
  <tr>
    <td><input name="B" type="radio" value="4" onClick="subFormB()"/>
      test4</td>
  </tr>
  <tr>
    <td>totaal
      <input name="B1" type="text" id="B1"/></td>
  </tr>
</table>
<p>
  <input name="totaal" type="button" id="totaal" value="Totaal" onClick="toTaal()"/>
</p>
<p>totaal
  <input name="total" type="text" id="total"/>
</p>
</form>
</body>
</html>
MilcoiAsked:
Who is Participating?
 
Michel PlungjanConnect With a Mentor IT ExpertCommented:

<html>
<head>
<script language="JavaScript">
function toTaal(theForm) {
  var A1=parseInt(theForm.A1.value);
  var A2=parseInt(theForm.B1.value);
  theForm.total.value=A1+A2;


}

function radClick(theRad,fld) {
  theRad.form.elements[fld].value=(theRad.value);
}

</script>
</head>

<body><form id="form1" name="form1" method="post">
<table width="300" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <input name="A" type="radio" value="0" onClick="radClick(this,'A1')"/>
      test0    </td>
  </tr>
  <tr>
    <td><input name="A" type="radio" value="1" onClick="radClick(this,'A1')"/>
      test1</td>
  </tr>
  <tr>
    <td><input name="A" type="radio" value="2" onClick="radClick(this,'A1')"/>
test2</td>
  </tr>
  <tr>
    <td><input name="A" type="radio" value="3" onClick="radClick(this,'A1')"/>
test3</td>
  </tr>
  <tr>
    <td><input name="A" type="radio" value="4" onClick="radClick(this,'A1')"/>
test4</td>
  </tr>
  <tr>
    <td>totaal
      <input name="A1" type="text" id="A1" value=""/></td>
  </tr>
</table>
<br />
<table width="300" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><input name="B" type="radio" value="0" onClick="radClick(this,'B1')"/>
      test0 </td>
  </tr>
  <tr>
    <td><input name="B" type="radio" value="1" onClick="radClick(this,'B1')"/>
      test1</td>
  </tr>
  <tr>
    <td><input name="B" type="radio" value="2" onClick="radClick(this,'B1')"/>
      test2</td>
  </tr>
  <tr>
    <td><input name="B" type="radio" value="3" onClick="radClick(this,'B1')"/>
      test3</td>
  </tr>
  <tr>
    <td><input name="B" type="radio" value="4" onClick="radClick(this,'B1')"/>
      test4</td>
  </tr>
  <tr>
    <td>totaal
      <input name="B1" type="text" id="B1"/></td>
  </tr>
</table>
<p>
  <input name="totaal" type="button" id="totaal" value="Totaal" onClick="toTaal(this.form)"/>
</p>
<p>totaal
  <input name="total" type="text" id="total"/>
</p>
</form>
</body>
</html>
0
 
Michel PlungjanIT ExpertCommented:

document.form1.total.value=parseInt(A1)+parseInt(A2);

0
 
MilcoiAuthor Commented:
TY. It's working perfect now and it's easy to add more..

best rgrds
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.