calculate sub total and total of price...

[NinjaTurtle]

dear,

i have more than 3 categories, every categories have few products, every products has a unit price and discount percentage.

what i want to do is figure out the
- original amount= (unit price X quantity)
- after discount amount= (original price X discount %)

every categories i need to hav a subtotal(addup all the products price in the particular category) next is add up all the products as TOTAL amount.

This my example:
=========================
<table width="64%" border="1" cellpadding="1" cellspacing="0" bordercolor="#666666">
<tr bgcolor="#0099FF">
<td colspan="7"><b>A. Fruits:</b></td>
</tr>
<tr bgcolor="#00CCFF">
<td width="11%">
<div align="center">Item Code</div>
</td>
<td width="18%">
<div align="center">Desc</div>
</td>
<td width="10%">
<div align="center">Dsicount</div>
</td>
<td width="12%">
<div align="center">Unit Price</div>
</td>
<td width="12%">
<div align="center">Quantity</div>
</td>
<td width="16%">
<div align="center">Normal Amount</div>
</td>
<td width="21%">
<div align="center">Discounted Amount</div>
</td>
</tr>
<tr>
<td width="11%">
<div align="center">0012</div>
</td>
<td width="18%">
<div align="center">apple</div>
</td>
<td width="10%">
<div align="center">10%</div>
</td>
<td width="12%">
<div align="center">0.5</div>
</td>
<td width="12%">
<div align="center">
<input type="text" name="textfield" size="5">
</div>
</td>
<td width="16%">
<div align="center">
<input type="text" name="textfield2" size="15">
</div>
</td>
<td width="21%">
<div align="center">
<input type="text" name="textfield3" size="15">
</div>
</td>
</tr>
<tr>
<td width="11%">
<div align="center">0023</div>
</td>
<td width="18%">
<div align="center">orange</div>
</td>
<td width="10%">
<div align="center">-</div>
</td>
<td width="12%">
<div align="center">0.8</div>
</td>
<td width="12%">
<div align="center">
<input type="text" name="textfield4" size="5">
</div>
</td>
<td width="16%">
<div align="center">
<input type="text" name="textfield22" size="15">
</div>
</td>
<td width="21%">
<div align="center">
<input type="text" name="textfield32" size="15">
</div>
</td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
<td colspan="2" bgcolor="#FF6600">
<div align="center"><b>Sub Total:</b></div>
</td>
<td width="16%" bgcolor="#FFCC99">
<div align="center">
<input type="text" name="textfield222" size="15">
</div>
</td>
<td width="21%" bgcolor="#FFCC99">
<div align="center">
<input type="text" name="textfield223" size="15">
</div>
</td>
</tr>
<tr>
<td colspan="7">&nbsp;</td>
</tr>
<tr>
<td colspan="7" bgcolor="#0099FF"><b>B. Food:</b></td>
</tr>
<tr>
<td width="11%">
<div align="center">0303</div>
</td>
<td width="18%">
<div align="center">Burger</div>
</td>
<td width="10%">
<div align="center">20%</div>
</td>
<td width="12%">
<div align="center">1.5</div>
</td>
<td width="12%">
<div align="center">
<input type="text" name="textfield42" size="5">
</div>
</td>
<td width="16%">
<div align="center">
<input type="text" name="textfield224" size="15">
</div>
</td>
<td width="21%">
<div align="center">
<input type="text" name="textfield225" size="15">
</div>
</td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
<td colspan="2" bgcolor="#FF6600">
<div align="center"><b>Sub Total:</b></div>
</td>
<td width="16%" bgcolor="#FFCC99">
<div align="center">
<input type="text" name="textfield222" size="15">
</div>
</td>
<td width="21%" bgcolor="#FFCC99">
<div align="center">
<input type="text" name="textfield223" size="15">
</div>
</td>
</tr>
<tr>
<td colspan="7">&nbsp;</td>
</tr>
<tr>
<td colspan="5" bgcolor="#333333">
<div align="right"><b><font size="4" color="#FFFFFF">TOTAL : </font></b></div>
</td>
<td width="16%" bgcolor="#CCCCCC">
<div align="center">
<input type="text" name="textfield2222" size="15">
</div>
</td>
<td width="21%" bgcolor="#CCCCCC">
<div align="center">
<input type="text" name="textfield2232" size="15">
</div>
</td>
</tr>
</table>

[Mr J]

There are a couple of scripts on my site.
This is one of them that could be adapted for you (I think)

<SCRIPT LANGUAGE="JavaScript">
<!--
function roundoff(amount) {
return (amount == Math.floor(amount)) ? amount + '.00' : ( (amount*10 == Math.floor(amount*10)) ? amount + '0' : amount);
}

function total(what,number) {
var grandTotal = 0;
for (var i=0;i<number;i++) {
if (what.elements['price' + i].value == '')
what.elements['price' + i].value = '0.00'; // fix for Opera.

what.elements['subtotal' + i].value=(what.elements['quantity' + i].value - 0) * (what.elements['price' + i].value - 0);
if (what.elements['quantity' + i].value == "0")
what.elements['subtotal' + i].value = "0.00";

subtotal=what.elements['subtotal' + i].value
grandTotal += (what.elements['price' + i].value - 0) * (what.elements['quantity' + i].value - 0);
}

subtotal=roundoff(Math.round(subtotal*Math.pow(10,2))/Math.pow(10,2));
what.grandTotal.value = roundoff(Math.round(grandTotal*Math.pow(10,2))/Math.pow(10,2));
}
//-->
</SCRIPT>

<FORM NAME="addit">
<table border=1><tr><td>Quantity: </td><td>Price:</td><td>SubTotal</td></tr>
<tr><td>
<INPUT TYPE="text" NAME="quantity0" SIZE="3" value="0" onclick="select()" onkeyup="total(this.form,10)"><BR>
<INPUT TYPE="text" NAME="quantity1" SIZE="3" value="0" onclick="select()" onkeyup="total(this.form,10)"><BR>
<INPUT TYPE="text" NAME="quantity2" SIZE="3" value="0" onclick="select()" onkeyup="total(this.form,10)"><BR>
<INPUT TYPE="text" NAME="quantity3" SIZE="3" value="0" onclick="select()" onkeyup="total(this.form,10)"><BR>
<INPUT TYPE="text" NAME="quantity4" SIZE="3" value="0" onclick="select()" onkeyup="total(this.form,10)"><BR>
<INPUT TYPE="text" NAME="quantity5" SIZE="3" value="0" onclick="select()" onkeyup="total(this.form,10)"><BR>
<INPUT TYPE="text" NAME="quantity6" SIZE="3" value="0" onclick="select()" onkeyup="total(this.form,10)"><BR>
<INPUT TYPE="text" NAME="quantity7" SIZE="3" value="0" onclick="select()" onkeyup="total(this.form,10)"><BR>
<INPUT TYPE="text" NAME="quantity8" SIZE="3" value="0" onclick="select()" onkeyup="total(this.form,10)"><BR>
<INPUT TYPE="text" NAME="quantity9" SIZE="3" value="0" onclick="select()" onkeyup="total(this.form,10)"><BR>
</td>
<td>
<input TYPE="text" NAME="price0" VALUE="0.99" SIZE="4"><BR>
<input TYPE="text" NAME="price1" VALUE="1.99" SIZE="4"><BR>
<input TYPE="text" NAME="price2" VALUE="2.99" SIZE="4"><BR>
<input TYPE="text" NAME="price3" VALUE="3.99" SIZE="4"><BR>
<input TYPE="text" NAME="price4" VALUE="4.99" SIZE="4"><BR>
<input TYPE="text" NAME="price5" VALUE="5.99" SIZE="4"><BR>
<input TYPE="text" NAME="price6" VALUE="6.99" SIZE="4"><BR>
<input TYPE="text" NAME="price7" VALUE="7.99" SIZE="4"><BR>
<input TYPE="text" NAME="price8" VALUE="8.99" SIZE="4"><BR>
<input TYPE="text" NAME="price9" VALUE="9.99" SIZE="4"><BR>
</td>
<td>
<input TYPE="text" NAME="subtotal0" SIZE="6" value="0.00"><BR>
<input TYPE="text" NAME="subtotal1" SIZE="6" value="0.00"><BR>
<input TYPE="text" NAME="subtotal2" SIZE="6" value="0.00"><BR>
<input TYPE="text" NAME="subtotal3" SIZE="6" value="0.00"><BR>
<input TYPE="text" NAME="subtotal4" SIZE="6" value="0.00"><BR>
<input TYPE="text" NAME="subtotal5" SIZE="6" value="0.00"><BR>
<input TYPE="text" NAME="subtotal6" SIZE="6" value="0.00"><BR>
<input TYPE="text" NAME="subtotal7" SIZE="6" value="0.00"><BR>
<input TYPE="text" NAME="subtotal8" SIZE="6" value="0.00"><BR>
<input TYPE="text" NAME="subtotal9" SIZE="6" value="0.00"><BR>
</tr></tr>
<tr><td colspan=3 align=right>
Grand Total<INPUT TYPE="TEXT" NAME="grandTotal" SIZE="6">
</td></tr></table>
</FORM>


see also

www.huntingground.freeserve.co.uk/scripts/sales.htm

[Mr J]

Here's a basic script for what you are after.


If you are going to have lots of different values then this script could get lengthy

See if this is the type of thing you are after.


<script>
price1=0.5
price2=0.8
price3=1.5

function add(){

document.f1.norm1.value=(document.f1.quant1.value*price1)
document.f1.disc1.value=(document.f1.quant1.value*price1)/100*10

document.f1.norm2.value=(document.f1.quant2.value*price2)
document.f1.disc2.value=0

document.f1.subtotal1.value=(document.f1.norm1.value*1)+(document.f1.norm2.value*1)

document.f1.subtotal2.value=(document.f1.disc1.value*1)+(document.f1.disc2.value*1)

document.f1.norm3.value=(document.f1.quant3.value*price3)
document.f1.disc3.value=(document.f1.quant3.value*price3)/100*20

document.f1.subtotal3.value=(document.f1.norm3.value*1)
document.f1.subtotal4.value=(document.f1.disc3.value*1)


document.f1.grandtotal1.value=(document.f1.subtotal1.value*1)+(document.f1.subtotal3.value*1)
document.f1.grandtotal2.value=(document.f1.subtotal2.value*1)+(document.f1.subtotal4.value*1)
}

</script>

<P><a href="javascript:add()">Total</a>


<form name=f1>
<P><table><tr>
<td>Quantity</td><td> Normal</td><td>Discount</td></tr>
<tr>
<td><input type=text name=quant1></td><td><input type=text name=norm1></td><td> <input type=text name=disc1></td></tr>
<tr>
<td><input type=text name=quant2></td><td><input type=text name=norm2></td><td><input type=text name=disc2></td></tr>
<tr>
<td></td><td><input type=text name=subtotal1></td><td><input type=text name=subtotal2></td></tr>

<tr>
<td><input type=text name=quant3></td><td><input type=text name=norm3></td><td> <input type=text name=disc3></td></tr>
<tr>
<td></td><td><input type=text name=subtotal3></td><td><input type=text name=subtotal4></td></tr>

<td></td><td><input type=text name=grandtotal1></td><td><input type=text name=grandtotal2></td></tr>
</table>

[NinjaTurtle]

Dear Mr J,

i think the latest sample that u provide 2 me not that "object oriented" than the previous 1, any way tq.

but now i face a new problem.... that is:
User can choose 2 type of quantity types, example: 1 carton(dozen) is 12 boxes, user allow to choose box or dozen or both, that's mean there are 1 unit price, 2 type of quantity types(carton and box), and 2 amount(1 for carton, 1 for box), then 1 sub total for every categories, lastly there is a Total that cover all amount that user chose!! p/s : some items may only have one measure, this is the problem that make me do calculation!!!

example coding:

<table width="90%" border="1">
<tr bgcolor="#CCCCCC">
<td colspan="5" >A : Fruits</td>
</tr>
<tr>
<td >item code</td>
<td >item</td>
<td >unit price</td>
<td >quantity</td>
<td >amount</td>
</tr>
<tr>
<td width="11%" height="2">155</td>
<td width="53%" height="2">Apple</td>
<td width="10%" height="2">0.5</td>
<td width="11%" height="2">
<input type="text" name="textfield" size="3">
(carton)<br>
<input type="text" name="textfield22" size="3">
( box )</td>
<td width="15%" height="2"> $
<input type="text" name="textfield2" size="8">
<br>
$
<input type="text" name="textfield23" size="8">
</td>
</tr>
<tr>
<td width="11%" height="2">455</td>
<td width="53%" height="2">Orange</td>
<td width="10%" height="2">0.7</td>
<td width="11%" height="2">
<input type="text" name="textfield222" size="3">
( box )</td>
<td width="15%" height="2">$
<input type="text" name="textfield232" size="8">
</td>
</tr>
<tr>
<td colspan="4">
<div align="right">Subtotal:</div>
</td>
<td width="15%"> $
<input type="text" name="textfield2322" size="8">
</td>
</tr>
<tr bgcolor="#CCCCCC">
<td colspan="5">B. Computer</td>
</tr>
<tr>
<td width="11%">233</td>
<td width="53%">Mouse( 1 box @ 12 units)</td>
<td width="10%">1.54</td>
<td width="11%">
<input type="text" name="textfield3" size="3">
( box )<br>
<input type="text" name="textfield223" size="3">
( unit ) </td>
<td width="15%">$
<input type="text" name="textfield24" size="8">
<br>
$
<input type="text" name="textfield233" size="8">
</td>
</tr>
<tr>
<td width="11%">555</td>
<td width="53%">Monitor</td>
<td width="10%">100</td>
<td width="11%">
<input type="text" name="textfield2232" size="3">
( unit ) </td>
<td width="15%">$
<input type="text" name="textfield2332" size="8">
</td>
</tr>
<tr>
<td colspan="4">
<div align="right">Sub total :</div>
</td>
<td width="15%"> $
<input type="text" name="textfield2322" size="8">
</td>
</tr>
<tr>
<td colspan="4">
<div align="right">Total :</div>
</td>
<td width="15%"> $
<input type="text" name="textfield2322" size="8">
</td>
</tr>
</table>