PDA

View Full Version : multiply, tax, subtotal, total, grand total

ApniGang
05-16-2009, 11:17 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function setEvent(){
var but, i=1;
while(but=document.getElementById('calc_'+(i++))){
but.onclick=calculate
}
}
function calculate(){
var f=this.form, grandtotV=0, j=1, i=1, but;
while(but=document.getElementById('calc_'+(j++))){
var oQty=f['qty_'+i];
var oPrice=f['price_'+i];
var oTaxrate=f['taxrate_'+i];
var oSubtotal=f['subtotal_'+i];
var oTax=f['tax_'+i];
var oTotal=f['total_'+i];
i++;
var subV=Number(oQty.value)*Number(oPrice.value);
var taxV=subV*Number(oTaxrate.value);
var totV=subV+subV*Number(oTaxrate.value);
grandtotV+=totV;

oSubtotal.value=subV==0?'':subV.toFixed(2);
oTax.value=taxV==0?'':taxV.toFixed(2);
oTotal.value=totV==0?'':totV.toFixed(2);
}
f['gradtotal'].value=grandtotV.toFixed(2);
}

onload=setEvent
</script>

</head>
<body>
<form action="">
<div>
Quantity: <input type="text" name='qty_1'><br>
Price: <input type="text" name='price_1'><br>
Tax Rate: <input type="text" name="taxrate_1" value="0.00"/><br>
Subotal: <input type="text" name="subtotal_1" readonly="readonly"><br>
Tax: <input type="text" name="tax_1" readonly="readonly"><br>
Total: <input type="text" name="total_1" readonly="readonly"><br>
<input type="button" value="Calculate" id="calc_1">
</div>
<div>
Quantity: <input type="text" name='qty_2'><br>
Price: <input type="text" name='price_2'><br>
Tax Rate: <input type="text" name="taxrate_2" value="0.0825"/><br>
Subotal: <input type="text" name="subtotal_2" readonly="readonly"><br>
Tax: <input type="text" name="tax_2" readonly="readonly"><br>
Total: <input type="text" name="total_2" readonly="readonly"><br>
<input type="button" value="Calculate" id="calc_2">
</div>
<div>
Quantity: <input type="text" name='qty_3'><br>
Price: <input type="text" name='price_3'><br>
Tax Rate: <input type="text" name="taxrate_3" value="0.0825"/><br>
Subotal: <input type="text" name="subtotal_3" readonly="readonly"><br>
Tax: <input type="text" name="tax_3" readonly="readonly"><br>
Total: <input type="text" name="total_3" readonly="readonly"><br>
<input type="button" value="Calculate" id="calc_3">
</div>
Grand total:<input type="text" name="gradtotal" readonly="readonly">
</form>
</body>
</html>


i want without clicking on calculate button answer will automatic display like Grand total in this code.

thank you
TinyScript
05-18-2009, 04:59 AM
I wanted to know too, so I made it work. I had to rewrite it though because i couldn't figure out how to make it work the other way.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">

var f = function(newid){return document.getElementById(newid)}

function calculate(){


var grandtotV=0;
var subV1=Number(f('qty_1').value)*Number(f('price_1').value);
var subV2=Number(f('qty_2').value)*Number(f('price_2').value);
var subV3=Number(f('qty_3').value)*Number(f('price_3').value);

var taxV1=subV1*Number(f('taxrate_1').value);
var taxV2=subV2*Number(f('taxrate_2').value);
var taxV3=subV3*Number(f('taxrate_3').value);

var totV1=subV1+subV1*Number(f('taxrate_1').value);
var totV2=subV2+subV2*Number(f('taxrate_2').value);
var totV3=subV3+subV3*Number(f('taxrate_3').value);

grandtotV+=totV1;
grandtotV+=totV2;
grandtotV+=totV3;

f('subtotal_1').value=subV1.toFixed(2);
f('subtotal_2').value=subV2.toFixed(2);
f('subtotal_3').value=subV3.toFixed(2);

f('tax_1').value=taxV1.toFixed(2);
f('tax_2').value=taxV2.toFixed(2);
f('tax_3').value=taxV3.toFixed(2);

f('total_1').value=totV1.toFixed(2);
f('total_2').value=totV2.toFixed(2);
f('total_3').value=totV3.toFixed(2);


f('grandtotal').value=grandtotV.toFixed(2);
}


</script>
<style>

p {clear:both;float: left}

input {clear:right;float: right;height:15px;}

label {clear:left;float: left}

</style>
</head>
<body>

<div style="width:240px;font-size:18px">
<p>Calculation 1</p>

<label for"qty_1"> Quantity: </label> <input type="text" id="qty_1" onchange="calculate()" value="0"></input>
<label for"price_1"> Price: </label> <input type="text" id="price_1" onchange="calculate()" value="0"></input>
<label for"taxrate_1"> Tax Rate: </label> <input type="text" id="taxrate_1" value="0.00"></input>
<label for"subtotal_1"> Subotal: </label> <input type="text" id="subtotal_1" readonly="readonly" value="0"></input>
<label for"tax_1"> Tax: </label> <input type="text" id="tax_1" readonly="readonly" value="0"></input>

<label for"total_1"> Total: </label> <input type="text" id="total_1" readonly="readonly" value="0"></input>
</div>
<div style="width:240px;font-size:18px">
<p>Calculation 2</p>
<label for"qty_2"> Quantity: </label> <input type="text" id="qty_2" onchange="calculate()" value="0"></input>
<label for"price_2"> Price: </label> <input type="text" id="price_2" onchange="calculate()" value="0"></input>
<label for"taxrate_2"> Tax Rate: </label> <input type="text" id="taxrate_2" value="0.0825"></input>

<label for"subtotal_2"> Subotal: </label> <input type="text" id="subtotal_2" readonly="readonly" value="0"></input>
<label for"tax_2"> Tax: </label> <input type="text" id="tax_2" readonly="readonly" value="0"></input>
<label for"total_2"> Total: </label> <input type="text" id="total_2" readonly="readonly" value="0"></input>
</div>
<div style="width:240px;font-size:18px">
<p>Calculation 3</p>
<label for"qty_3"> Quantity: </label> <input type="text" id="qty_3" onchange="calculate()" value="0"></input>

<label for"price_3"> Price: </label> <input type="text" id="price_3" onchange="calculate()" value="0"></input>
<label for"taxrate_3"> Tax Rate: </label> <input type="text" id="taxrate_3" value="0.0825"></input>
<label for"subtotal_3"> Subotal: </label> <input type="text" id="subtotal_3" readonly="readonly" value="0"></input>
<label for"tax_3"> Tax: </label> <input type="text" id="tax_3" readonly="readonly" value="0"></input>
<label for"total_3"> Total: </label> <input type="text" id="total_3" readonly="readonly" value="0"></input>


<p>GRAND TOTAL</p>
<label for="grandtotal"> Grand total: </label><input type="text" id="grandtotal" readonly="readonly" value="0"></input>
</div>

</body>
</html>