Zee Heng
Apr 16, 2012, 11:18 PM
May i know how can i add another two checkbox for each category below? And make it able to calculate..Please help..
this is the code..
<html>
<head>
<title>Registration Main Page</title>
<SCRIPT LANGUAGE="JavaScript">
function UpdateCost() {
var sum = 0;
var menu, total;
for (i=0; i<9; i++) {
menu = 'menu'+i;
total = document.getElementById(menu);
if (total.checked == true)
{
sum += Number(total.value);
}
}
document.getElementById('totalcost').value = sum.toFixed(2);
}
</SCRIPT>
</head>
<body bgcolor="#B0C4DE">
<form method="POST" action="" name="food">
<table border="0" width="100%">
<tr>
<td rowspan="9" align="left" valign="top" width="80">
<img border="0" src="images/side_banner.gif" width="80" height="1000">
</td><h1></h1>
<td colspan="3" align="center" valign="top" bgcolor="#B0C4DE>
<img border="0" src="images/Logo_UUM.gif" width="70" height="95"><br/></td>
<td rowspan="9" align="right" valign="top" width="80">
<img border="0" src="images/side_banner.gif" width="80" height="1000">
</td>
</tr>
<tr>
<td colspan="3" align="center" valign="top">
<img border="0" src="images/dinebanner.jpg" width="700" height="163">
</td>
</tr>
<tr>
<td colspan="3" bgcolor="#B0C4DE" align="center" valign="top" height="21">
<b>Beverage</b>
</td>
</tr>
<tr>
<td align="center" valign="top"><dd></dd>
<img border="0" src="images/beverage.jpg" width="100" height="100"><br/>
<input name="C1" type="checkbox" id="menu0" value="1.00 " onClick="UpdateCost()">RM 1.00
</td>
<td align="center" valign="top">
<img border="0" src="images/beverage2.jpg" width="100" height="100"><br/>
<input type="checkbox" name="C2" id="menu1" value="1.50 " onClick="UpdateCost()"> RM 1.50
</td>
<td align="center" valign="top">
<img border="0" src="images/beverage3.jpg" width="100" height="100"><br/>
<input type="checkbox" name="C3" id="menu2" value="2.50 " onClick="UpdateCost()"> RM 2.50
</td>
</tr>
<tr>
<td colspan="4" bgcolor="#B0C4DE" align="center" valign="top" height="21">
<b>Cake</b>
</td>
</tr>
<tr>
<td align="center" valign="top">
<p><img border="0" src="images/cake1.jpg" width="100" height="100"><br/>
<input type="checkbox" name="C4"id="menu3" value="2.50" onClick="UpdateCost()">
RM 2.50
</p></td>
<td align="center" valign="top">
<img border="0" src="images/cake2.jpg" width="100" height="100"><br/>
<input type="checkbox" name="C5" id="menu4" value="2.00" onClick="UpdateCost()"> RM 2.00
</td>
<td align="center" valign="top">
<img border="0" src="images/cake3.jpg" width="100" height="100"><br/>
<input type="checkbox" name="C6" id="menu5" value="3.00" onClick="UpdateCost()"> RM 3.00
</td>
<td align
</tr>
<tr>
<td colspan="3" bgcolor="#B0C4DE" align="center" valign="top" height="21">
<p align="center"><b>Food</b>
</td>
</tr>
<tr>
<td align="center" valign="top">
<img border="0" src="images/food1.jpg" width="100" height="100"><br/>
<input type="checkbox" name="C7" id="menu6" value="4.50" onClick="UpdateCost()"> RM 4.50
</td>
<td align="center" valign="top">
<img border="0" src="images/food2.jpg" width="100" height="100"><br/>
<input type="checkbox" name="C8" id="menu7" value="3.00" onClick="UpdateCost()"> RM 3.00
</td>
<td align="center" valign="top">
<img border="0" src="images/food3.jpg" width="100" height="100"><br/>
<input type="checkbox" name="C9" id="menu8" value="3.50" onClick="UpdateCost()">RM 3.50
</td>
</tr>
<tr>
<td colspan="4" bgcolor="#B0C4DE" align="center" valign="top" height="21">
<b>Total Cost : RM </b>
<input type="text" name="txttotalcost" id="totalcost"size="6" value="0.00">
</td>
</tr>
</table>
</form>
</body>
</html>
this is the code..
<html>
<head>
<title>Registration Main Page</title>
<SCRIPT LANGUAGE="JavaScript">
function UpdateCost() {
var sum = 0;
var menu, total;
for (i=0; i<9; i++) {
menu = 'menu'+i;
total = document.getElementById(menu);
if (total.checked == true)
{
sum += Number(total.value);
}
}
document.getElementById('totalcost').value = sum.toFixed(2);
}
</SCRIPT>
</head>
<body bgcolor="#B0C4DE">
<form method="POST" action="" name="food">
<table border="0" width="100%">
<tr>
<td rowspan="9" align="left" valign="top" width="80">
<img border="0" src="images/side_banner.gif" width="80" height="1000">
</td><h1></h1>
<td colspan="3" align="center" valign="top" bgcolor="#B0C4DE>
<img border="0" src="images/Logo_UUM.gif" width="70" height="95"><br/></td>
<td rowspan="9" align="right" valign="top" width="80">
<img border="0" src="images/side_banner.gif" width="80" height="1000">
</td>
</tr>
<tr>
<td colspan="3" align="center" valign="top">
<img border="0" src="images/dinebanner.jpg" width="700" height="163">
</td>
</tr>
<tr>
<td colspan="3" bgcolor="#B0C4DE" align="center" valign="top" height="21">
<b>Beverage</b>
</td>
</tr>
<tr>
<td align="center" valign="top"><dd></dd>
<img border="0" src="images/beverage.jpg" width="100" height="100"><br/>
<input name="C1" type="checkbox" id="menu0" value="1.00 " onClick="UpdateCost()">RM 1.00
</td>
<td align="center" valign="top">
<img border="0" src="images/beverage2.jpg" width="100" height="100"><br/>
<input type="checkbox" name="C2" id="menu1" value="1.50 " onClick="UpdateCost()"> RM 1.50
</td>
<td align="center" valign="top">
<img border="0" src="images/beverage3.jpg" width="100" height="100"><br/>
<input type="checkbox" name="C3" id="menu2" value="2.50 " onClick="UpdateCost()"> RM 2.50
</td>
</tr>
<tr>
<td colspan="4" bgcolor="#B0C4DE" align="center" valign="top" height="21">
<b>Cake</b>
</td>
</tr>
<tr>
<td align="center" valign="top">
<p><img border="0" src="images/cake1.jpg" width="100" height="100"><br/>
<input type="checkbox" name="C4"id="menu3" value="2.50" onClick="UpdateCost()">
RM 2.50
</p></td>
<td align="center" valign="top">
<img border="0" src="images/cake2.jpg" width="100" height="100"><br/>
<input type="checkbox" name="C5" id="menu4" value="2.00" onClick="UpdateCost()"> RM 2.00
</td>
<td align="center" valign="top">
<img border="0" src="images/cake3.jpg" width="100" height="100"><br/>
<input type="checkbox" name="C6" id="menu5" value="3.00" onClick="UpdateCost()"> RM 3.00
</td>
<td align
</tr>
<tr>
<td colspan="3" bgcolor="#B0C4DE" align="center" valign="top" height="21">
<p align="center"><b>Food</b>
</td>
</tr>
<tr>
<td align="center" valign="top">
<img border="0" src="images/food1.jpg" width="100" height="100"><br/>
<input type="checkbox" name="C7" id="menu6" value="4.50" onClick="UpdateCost()"> RM 4.50
</td>
<td align="center" valign="top">
<img border="0" src="images/food2.jpg" width="100" height="100"><br/>
<input type="checkbox" name="C8" id="menu7" value="3.00" onClick="UpdateCost()"> RM 3.00
</td>
<td align="center" valign="top">
<img border="0" src="images/food3.jpg" width="100" height="100"><br/>
<input type="checkbox" name="C9" id="menu8" value="3.50" onClick="UpdateCost()">RM 3.50
</td>
</tr>
<tr>
<td colspan="4" bgcolor="#B0C4DE" align="center" valign="top" height="21">
<b>Total Cost : RM </b>
<input type="text" name="txttotalcost" id="totalcost"size="6" value="0.00">
</td>
</tr>
</table>
</form>
</body>
</html>