My one do calculations on-fly from onchange/onclick events
it recalculate subtotal for one row only (obvious optimisation on case large table) when changes happens
then it recalcutate gross total as summ of subtotal for whole table and alert it
(you can change to fill total in gross total field )
So actually you do not need calc button.
Also fields for subtotal need to be done noneditable :)
P.S DO Not insert extra spaces like name = "some", this should be
name="value"
P.P.S Many other minor errors corrected...
Example tested with MIE5+
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="Content-Langua
<meta name="VI60_defaultClientSc
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.
<title>E-commerce Site</title>
<script>
var price = new Array();
price[1] = 1094;
price[2] = 269;
price[3] = 260;
function formatNum(n) {
var n = n*100
var s = n+"";
while(s.length<3) s="0"+s;
var l = s.length;
return s.substring(0,l-2)+"."+s.s
}
function doCalc(num) {
inx = document.myform.elements["
qty = inx >= 0 ? document.myform.elements["
subtotal = qty*price[num]
if(document.myform.element
document.myform.elements["
calculateTotal();
}
function calculateTotal() {
f = document.myform;
var total = 0;
for(var i=0; i<f.elements.length;i++ ) {
if(f.elements[i].name.inde
var v = parseFloat(f.elements[i].v
if( !isNaN(v) ) {
total += v;
}
}
}
alert("total="+formatNum(t
}
</script>
</head>
<body bgcolor="#00CCFF">
<h2 align="center"><u><font size="4"><b>Welcome to E-Commerce Website!</b></font></u></h
<p> </p>
<a href ="products.htm"><font size="1">Home</font></a>
<br><br><br><br>
<p><font face="Arial Narrow">Below are the prices of our products we currently
have in stock.</font></p>
<br><br><br>
<!--"Start of Table" -->
<form method="post" name="myform">
<table width="893" border="1" BORDERCOLOR="#999999" cellspacing="0" cellpadding="2">
<tr>
<td bgcolor="#999999" height="25" align="center" width="173"><font color="#FFFFFF">Product</f
<td bgcolor="#999999" align="center" width="50"><font color="#FFFFFF">Image</fon
<td bgcolor="#999999" align="center" width="86"><font color="#FFFFFF">Price</fon
<td bgcolor="#999999" align="center" width="197"><font color="#FFFFFF">Qty </font></td>
<td bgcolor="#999999" align="center" width="122"><font color="#FFFFFF">Insurance<
<td bgcolor="#999999" align="center" width="227"><font color="#FFFFFF">SubTotal</
</tr>
<tr>
<td align = "center" width="173" bgcolor="#eeeeee"><font face="MS Sans Serif">Sony Camcorder</font></td> <!--"shows name of product" -->
<td align = "center" width="50"><img border="0" src="cam.jpg" width="50" height="50"></td><!--"Show
<td align = "center" width="86" bgcolor="#eeeeee"><font face="MS Sans Serif">?1094</font></td><!
<td align = "center" width="197" bgcolor="#eeeeee">
<p><font face="MS Sans Serif">Select quantity</font><!--"Displa
<select name="pick1" onChange="doCalc(this.name
<option selected>0
<option>1
<option>2
<option>3
<option>4
<option>5
</select></p>
</td>
<td align = "center" width="122" bgcolor="#eeeeee"><font face="MS Sans Serif">Insurance?</font>
<input name="item1" type="checkbox" onClick="doCalc(this.name.
<td align = "center" width="227" bgcolor="#eeeeee">?<input type = "text" name="subtotal1"></td><!--
</tr>
<tr>
<td align = "center" width="173" bgcolor="#eeeeee"><font face="MS Sans Serif">Sony HiFi</font></td>
<td align = "center" width="50"><img border="0" src="HiFi.jpg" width="50" height="50"></td>
<td align = "center" width="86" bgcolor="#eeeeee"><font face="MS Sans Serif">?269</font></td>
<td align = "center" width="197" bgcolor="#eeeeee">
<p><font face="MS Sans Serif">Select quantity </font>
<select name="pick2" onChange="doCalc(this.name
<option selected>0
<option>1
<option>2
<option>3
<option>4
<option>5
</select></p>
</td>
<td align = "center" width="122" bgcolor="#eeeeee"><font face="MS Sans Serif">Insurance?</font>
<input name="item2" type="checkbox" onClick="doCalc(this.name.
<td align = "center" width="227" bgcolor="#eeeeee">?<input type = "text" name="subtotal2"></td>
</tr>
<tr>
<td align = "center" width="173" bgcolor="#eeeeee"><font face="MS Sans Serif">MP3 Player</font></td>
<td align = "center" width="50"><img border="0" src="MP3.jpg" width="50" height="50"></td>
<td align = "center" width="86" bgcolor="#eeeeee"><font face="MS Sans Serif">?260</font></td>
<td align = "center" width="197" bgcolor="#eeeeee">
<p><font face="MS Sans Serif">Select quantity</font>
<select name = "pick3" onChange="doCalc(this.name
<option selected>0
<option>1
<option>2
<option>3
<option>4
<option>5
</select></p>
</td>
<td align = "center" width="122" bgcolor="#eeeeee"><font face="MS Sans Serif">Insurance?</font>
<input name="item3" type="checkbox" onClick="doCalc(this.name.
<td align = "center" width="227" bgcolor="#eeeeee">?<input type = "text" name="subtotal3"</td>
</tr>
<tr>
<td colspan ="5" bgcolor = "999999">
<td bgcolor="#999999" align="center"><input type="button" value="Calculate" style="background-color:#f
#000000; font-family:tahoma; font-size:8pt; letter-spacing=1px">
<input type="reset" value="Reset" style="background-color:#f
letter-spacing=1px"></td>
</tr>
</table>
</form>
</body>
</html>
Main Topics
Browse All Topics





by: ZvonkoPosted on 2003-04-15 at 16:04:43ID: 8337396
Try please this:
ge" content="en-gb"> ript" content="JavaScript"> Document">
){ form['pick '+i].selec tedIndex; i].checked == true){ ').substr( 0,2); +i].value = total;
2>
ont></td> t></td> t></td> /font></td > font></td>
s picture of product" --> --"shows price of product" -->
ys listbox" -->
nput name = "item1" type = "checkbox" onClick = "calculate()"></td><!--"Di splays checkbox" -->
lays totalcost" -->
nput name = "item2" type = "checkbox" onClick = "calculate()"></td>
nput name = "item3" type = "checkbox" onClick = "calculate()"></td>
fffff; color:#000000; border:1px solid #000000; font-family:tahoma; font-size:8pt; letter-spacing=1px"> fffff; color:#000000; border:1px solid #000000; font-family:tahoma; font-size:8pt; letter-spacing=1px"></td>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="Content-Langua
<meta name="VI60_defaultClientSc
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.
<title>E-commerce Site</title>
<SCRIPT LANGUAGE = JAVASCRIPT>
var prize = new Array();
prize[1] = 1094;
prize[2] = 269;
prize[3] = 260;
function calculate(){
for(i=1;i<prize.length;i++
total=prize[i]*document.my
if(document.myform['item'+
total += (total * 0.20);
}
total = (total+'.0').split('.');
total = total[0]+'.'+(total[1]+'00
document.myform['subtotal'
}
}
</script>
</head>
<body bgcolor="#00CCFF">
<h2 align="center"><u><font size="4"><b>Welcome to E-Commerce Website!</b></font></u></h
<p> </p>
<a href ="products.htm"><font size="1">Home</font></a>
<br><br><br><br>
<p><font face="Arial Narrow">Below are the prices of our products we currently
have in stock.</font></p>
<br><br><br>
<form method="post" name="myform">
<!--"Start of Table" -->
<table width="893" border="1" BORDERCOLOR="#999999" cellspacing="0" cellpadding="2">
<tr>
<td bgcolor="#999999" height="25" align="center" width="173"><font color="#FFFFFF">Product</f
<td bgcolor="#999999" align="center" width="50"><font color="#FFFFFF">Image</fon
<td bgcolor="#999999" align="center" width="86"><font color="#FFFFFF">Price</fon
<td bgcolor="#999999" align="center" width="197"><font color="#FFFFFF">Qty </font></td>
<td bgcolor="#999999" align="center" width="122"><font color="#FFFFFF">Insurance<
<td bgcolor="#999999" align="center" width="227"><font color="#FFFFFF">SubTotal</
</tr>
<tr>
<td align = "center" width="173" bgcolor="#eeeeee"><font face="MS Sans Serif">Sony Camcorder</font></td> <!--"shows name of product" -->
<td align = "center" width="50"><img border="0" src="cam.jpg" width="50" height="50"></td><!--"Show
<td align = "center" width="86" bgcolor="#eeeeee"><font face="MS Sans Serif">#1094</font></td><!
<td align = "center" width="197" bgcolor="#eeeeee">
<p><font face="MS Sans Serif">Select quantity</font><!--"Displa
<select name = "pick1" onClick = "calculate()">
<option selected>0
<option>1
<option>2
<option>3
<option>4
<option>5
</select></p>
</td>
<td align = "center" width="122" bgcolor="#eeeeee"><font face="MS Sans Serif">Insurance?</font><i
<td align = "center" width="227" bgcolor="#eeeeee">#<input type = "text" name = "subtotal1"></td><!--"Disp
</tr>
<tr>
<td align = "center" width="173" bgcolor="#eeeeee"><font face="MS Sans Serif">Sony HiFi</font></td>
<td align = "center" width="50"><img border="0" src="HiFi.jpg" width="50" height="50"></td>
<td align = "center" width="86" bgcolor="#eeeeee"><font face="MS Sans Serif">#269</font></td>
<td align = "center" width="197" bgcolor="#eeeeee">
<p><font face="MS Sans Serif">Select quantity </font>
<select name = "pick2" onClick = "calculate()">
<option selected>0
<option>1
<option>2
<option>3
<option>4
<option>5
</select></p>
</td>
<td align = "center" width="122" bgcolor="#eeeeee"><font face="MS Sans Serif">Insurance?</font><i
<td align = "center" width="227" bgcolor="#eeeeee">#<input type = "text" name = "subtotal2"></td>
</tr>
<tr>
<td align = "center" width="173" bgcolor="#eeeeee"><font face="MS Sans Serif">MP3 Player</font></td>
<td align = "center" width="50"><img border="0" src="MP3.jpg" width="50" height="50"></td>
<td align = "center" width="86" bgcolor="#eeeeee"><font face="MS Sans Serif">#260</font></td>
<td align = "center" width="197" bgcolor="#eeeeee">
<p><font face="MS Sans Serif">Select quantity</font>
<select name = "pick3" onClick = "calculate()">
<option selected>0
<option>1
<option>2
<option>3
<option>4
<option>5
</select></p>
</td>
<td align = "center" width="122" bgcolor="#eeeeee"><font face="MS Sans Serif">Insurance?</font><i
<td align = "center" width="227" bgcolor="#eeeeee">#<input type = "text" name="subtotal3"</td>
</tr>
<tr>
<td colspan ="5" bgcolor = "999999">
<td bgcolor="#999999" align="center"><input type="button" value="Calculate" onClick = "calculate()" style="background-color:#f
<input type="reset" value="Reset" style="background-color:#f
</tr>
</table>
</form>
</body>
</html>