...

View Full Version : Adding Form Field Values



bspahr
09-15-2005, 06:17 PM
I have a form with 3 questions - I want to have the values added together and placed in the text field when the user clicks on the Sum button.

So, if someone click Yes for all 3 questions and clicked Sum - the number 3 woudl show up in the text box.


<html>
<head>
<title></title>
</head>

<body leftMargin="0" topMargin="0" marginheight="0" marginwidth="0">


<form action="#" method="post" name="quiz">


<table width="500" border="0" cellpadding="3" cellspacing="1" bgcolor="#000000">
<tr bgcolor="f1f1f1">
<td>1. Quesion 1</td>
</tr>
<tr bgcolor="#FFFFFF">
<td> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="q1" value="1">
Yes
<input type="radio" name="q1" value="0">
No</td>
</tr>
<tr bgcolor="f1f1f1">
<td bgcolor="f1f1f1">2. Quesion 2</td>
</tr>
<tr bgcolor="#FFFFFF">
<td> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="q2" value="1">
Yes
<input type="radio" name="q2" value="0">
No</td>
</tr>
<tr bgcolor="#FFFFFF">
<td bgcolor="f1f1f1">3. Quesion 3</td>
</tr>
<tr bgcolor="#FFFFFF">
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="q3" value="1">
Yes
<input type="radio" name="q3" value="0">
No</td>
</tr>
</table>

<p><input type="button" name="Submit" value="Sum >>">&nbsp;&nbsp;
<input type="text" name="score" size="2">
</form>

</body>
</html>

Canuck WebGeek
09-15-2005, 06:36 PM
Quickest method would be to add onclick events on the radio buttons.

if "yes" is clicked (and not already selected), increment an internal counter.
if "no" is clicked (and not already selected), decrement an internal counter.

when sum gets pressed, simply display the value of your counter.

bspahr
09-15-2005, 08:37 PM
I am tryng to use the below function but I keep getting NaN as a result.


<SCRIPT language = JavaScript>
function calculate() {
A = document.quiz.q1.value
B = document.quiz.q2.value
A = Number(A)
B = Number(B)
C = (A + B)
document.quiz.score.value = C
}

</SCRIPT>



<input type="button" value="Calcuate" onClick="calculate()">nbsp;&nbsp;
<input type="text" name="score" size="2">

Brandoe85
09-15-2005, 08:44 PM
Try:


<html>
<head>
<title></title>
<script type="text/javascript">
function Sum()
{
var rads = document.getElementsByTagName("INPUT");
var total = 0;
for(var i = 0; i < rads.length; i++)
{
if(rads[i].type == "radio")
{
if(rads[i].checked && rads[i].value == 1)
{
total++;
}
}
}

document.quiz.score.value = total;
}
</script>
</head>

<body leftMargin="0" topMargin="0" marginheight="0" marginwidth="0">


<form action="#" method="post" name="quiz">


<table width="500" border="0" cellpadding="3" cellspacing="1" bgcolor="#000000">
<tr bgcolor="f1f1f1">
<td>1. Quesion 1</td>
</tr>
<tr bgcolor="#FFFFFF">
<td> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="q1" value="1">
Yes
<input type="radio" name="q1" value="0">
No</td>
</tr>
<tr bgcolor="f1f1f1">
<td bgcolor="f1f1f1">2. Quesion 2</td>
</tr>
<tr bgcolor="#FFFFFF">
<td> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="q2" value="1">
Yes
<input type="radio" name="q2" value="0">
No</td>
</tr>
<tr bgcolor="#FFFFFF">
<td bgcolor="f1f1f1">3. Quesion 3</td>
</tr>
<tr bgcolor="#FFFFFF">
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="q3" value="1">
Yes
<input type="radio" name="q3" value="0">
No</td>
</tr>
</table>

<p><input type="button" name="Submit" value="Sum >>" onclick="Sum();">&nbsp;&nbsp;
<input type="text" name="score" size="2">
</form>

</body>
</html>

bspahr
09-15-2005, 09:00 PM
That was what I was looking for - thanks. Just need to look at the function a little closer to see how it works.

Brandoe85
09-15-2005, 09:05 PM
You're welcome :)
Here's a quick breakdown...


<script type="text/javascript">
function Sum()
{
// get all <input> tags
var rads = document.getElementsByTagName("INPUT");

// set total to 0
var total = 0;

// loop through all of the <input> tags
for(var i = 0; i < rads.length; i++)
{
// check to see if the <input> tag's type is a radio button
if(rads[i].type == "radio")
{
// check to see if it's checked, and that its value is 1, meaning, the "yes" radio
if(rads[i].checked && rads[i].value == 1)
{
// increment our total
total++;
}
}
}

// set the text box's value
document.quiz.score.value = total;
}
</script>

bspahr
09-15-2005, 09:43 PM
awesome, thanks! Make much more sense now.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum