[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

display and sum radio value

Posted on 2007-10-04
3
Medium Priority
?
1,155 Views
Last Modified: 2008-01-09
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>
0
Comment
Question by:Milcoi
  • 2
3 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20013296

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

0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 1000 total points
ID: 20013321

<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
 

Author Comment

by:Milcoi
ID: 20013506
TY. It's working perfect now and it's easy to add more..

best rgrds
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question