PDA

Click to See Complete Forum and Search --> : form calculation with combo boxes

LuigiX
11-26-2003, 11:36 PM
Hi

I have form with a series of combo boxes. A total for each combo box must be calculated based on the selection made for that item. Each selection will have a value that will be hard coded eg small computer will be $1,000, large computer will be $3,000 and this value must be displayed in the item total field depending on the selection made. For example if a small computer is chosen the value displayed in the totComputer field will be $1,000

A grand total must be calculated by summing all the totals.

I've attached a sample form

Many thanks for your help

Cheers

Luigi


<html>
<head>
<title>New Page 1</title>
</head>
<body>
<form method="POST" action="--WEBBOT-SELF--">
<div align="left">
<table border="0" cellpadding="0" cellspacing="0" width="307">
<tr>
<td width="71">computer</td>
<td width="161"><select size="1" name="computer">
<option>small</option>
<option>medium</option>
<option>large</option>
</select></td>
<td width="196"><input type="text" name="totComputer" size="20"></td>
</tr>
<tr>
<td width="71">desk</td>
<td width="161"><select size="1" name="Desk">
<option>wood</option>
<option>glass top</option>
<option>4 drawer</option>
</select></td>
<td width="196"><input type="text" name="totDesk" size="20"></td>
</tr>
<tr>
<td width="71">chair</td>
<td width="161"><select size="1" name="Chair">
<option>highback</option>
<option>lowrise</option>
</select></td>
<td width="196"><input type="text" name="totChair" size="20"></td>
</tr>
<tr>
<td width="71"></td>
<td width="161">
<p align="right">total</td>
<td width="196"><input type="text" name="grandTotal" size="20"></td>
</tr>
</table>
</div>
<p><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
</form>
</body>
</html>
Gollum
11-27-2003, 02:32 AM
Have a look at this for starters...

<html>
<head>
<title>New Page 1</title>
<script type="text/javascript">
function calcTotal()
{
document.f.grandTotal.value =
parseInt(document.f.totComputer.value) +
parseInt(document.f.totDesk.value) +
parseInt(document.f.totChair.value);
}

function setValue(name,src)
{
document.f[name].value = src.value;
calcTotal();
}

</script>

</head>
<body onload="setValue('totComputer',document.f.computer); setValue('totDesk',document.f.Desk); setValue('totChair',document.f.Chair);">
<form name=f method="POST" action="--WEBBOT-SELF--">
<div align="left">
<table border="0" cellpadding="0" cellspacing="0" width="307">
<tr>
<td width="71">computer</td>
<td width="161"><select size="1" name="computer" onchange="setValue('totComputer',this);">
<option value=1000>small</option>
<option value=2000>medium</option>
<option value=3000>large</option>
</select></td>
<td width="196"><input type="text" name="totComputer" size="20"></td>
</tr>
<tr>
<td width="71">desk</td>
<td width="161"><select size="1" name="Desk" onchange="setValue('totDesk',this);">
<option value=100>wood</option>
<option value=200>glass top</option>
<option value=300>4 drawer</option>
</select></td>
<td width="196"><input type="text" name="totDesk" size="20"></td>
</tr>
<tr>
<td width="71">chair</td>
<td width="161"><select size="1" name="Chair" onchange="setValue('totChair',this);">
<option value=80>highback</option>
<option value=40>lowrise</option>
</select></td>
<td width="196"><input type="text" name="totChair" size="20"></td>
</tr>
<tr>
<td width="71"></td>
<td width="161">
<p align="right">total</td>
<td width="196"><input type="text" name="grandTotal" size="20"></td>
</tr>
</table>
</div>
<p><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
</form>
</body>
</html>
LuigiX
11-27-2003, 11:51 AM
Hey thanks Gollum...

That is almost exactly what I was after

Cheers

Luigi