Log in

View Full Version : simple bill calculation


sunny
08-12-2009, 06:24 PM
Hi there,
i have tried to make a bill type form with the following code



<form name='form'>
<table border=1>
<tr>
<th>particulars</th>
<th>rate </th>
<th>quantity</th>
<th>Total</th>
</tr>

<tr>
<td>Product 1</td>
<td><input type="text" name="rate1" size=3></td>
<td><input type="text" name="quantity1" size=3></td>
<td><input type="text" name="total1" size=3></td>
</tr>

<tr>
<td>Product 2</td>
<td><input type="text" name="rate2" size=3></td>
<td><input type="text" name="quantity2" size=3></td>
<td><input type="text" name="total2" size=3></td>
</tr>


<tr>
<td colspan=3 align="right">Tax : </td>
<td><input type="text" name="tax" size=3></td>
</tr>

<tr>
<td colspan=3 align="right">Grand Total : </td>
<td><input type="text" name="gtotal" size=6></td>
</tr>
</table>
</form>


What i want is the amount in rate and quantity be multiplied and should come up in total coloumn and later, after tax amount is entered ,tax should be taken to calculate grand total.

I used a function like this :


<script>
function tot1()
{
var tot1;
var r1=document.form.rate1.value;
var qty1=document.form.quantity1.value;
tot1=r1*qty1;
// can we multiply two var like this or we need to use something else?
document.form.tot1.value =total1;
}
</script>


the product wise total will be called after quantity coloumn calls for Onblur event or something of that sort.
What's going wrong ???
and Can this be achieved by one function ????

Thanks.
rainarts
08-13-2009, 08:43 AM
Hi,

here's a simple document sample that you can use:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Live Demo</title>
<style type="text/css">
<!--
input[type="text"] { text-align : center; font-weight : bold; color : #365d95; }
// -->
</style>
<script type="text/javascript">
<!--
var counter = 0;
var getTotal = function() {
if ( isNaN( this.value )) {
this.value = this.value.replace( /[a-zA-Z\s]+/i, "" );
alert( "Please enter a valid amount!" );
this.focus();
return false;
} var index = this.id.substr( this.id.length - 1 );
var vat = (( vat = document.all.tax ) ? vat : document.getElementById( "tax" ));
var totA = (( totA = document.all.gtotal ) ? totA : document.getElementById( "gtotal"));
var qty = (( qty = document.all[ "quantity_" + index ] ) ? qty : document.getElementById( "quantity_" + index ));
var rte = (( rte = document.all[ "rate_" + index ] ) ? rte : document.getElementById( "rate_" + index ));
var tot = (( tot = document.all[ "total_" + index ] ) ? tot : document.getElementById( "total_" + index ));
if (( qty.value ) && ( rte.value )) {
tot.value = parseFloat(( this.value * 1 ) * qty.value * 1 );
var tot1 = parseFloat((( tot1 = document.all.total_0 ) ? tot1 : document.getElementById( "total_0")).value );
var tot2 = parseFloat((( tot2 = document.all.total_1 ) ? tot2 : document.getElementById( "total_1")).value );
vat.value = (((( tot1 ) ? tot1 : 0 ) + (( tot2 ) ? tot2 : 0 )) * parseFloat( vat.defaultValue ) / 100 );
totA.value = ((( tot1 ) ? tot1 : 0 ) + (( tot2 ) ? tot2 : 0 ) + parseFloat( vat.value ))
}
};
var calculate = function() {
var fields = [ "rate", "quantity" ];
var forms;
var element;
var eLen = fields.length;
if ( document.all ) {
forms = document.form;
} else {
forms = document.getElementById("form");
} do {
for ( var i = 0; i < eLen; i++ ) {
element = forms[ fields[ i ] + "_" + counter ].onchange = getTotal;
} counter++;
} while( element );
calculate();
}

window.onload = calculate;
// -->
</script>
</head>
<body>
<form id="form" name="form" action="#" onsubmit="return false;">
<table id="table_0" frame="box" rules="rows" border="1" style="width : auto;" cellpadding="6" cellspacing="3">
<tr>
<th><em>particulars</em></th>
<th><em>rate&nbsp;</em></th>
<th><em>quantity</em></th>
<th><em>total</em></th>
</tr>
<tr>
<td>Product 1</td>
<td><input type="text" name="rate_0" id="rate_0" size="3" value="" maxlength="3"></td>
<td><input type="text" name="quantity_0" id="quantity_0" size="3" value="" maxlength="3"></td>
<td><input type="text" name="total_0" id="total_0" size="3" value="" maxlength="3"></td>
</tr>
<tr>
<td>Product 2</td>
<td><input type="text" name="rate_1" id="rate_1" size="3" value="" maxlength="3"></td>
<td><input type="text" name="quantity_1" id="quantity_1" size="3" value="" maxlength="3"></td>
<td><input type="text" name="total_1" id="total_1" size="3" value="" maxlength="3"></td>
</tr>
<tr>
<td colspan="4" align="right">Tax:&nbsp;<input type="text" name="tax" id="tax" size="4" value="10%" maxlength="4"> Based on a 10% rate</td></tr>
<tr>
<td colspan="4" align="right">Grand Total:&nbsp;<input type="text" name="gtotal" id="gtotal" size="6" value="" maxlength="6"> VAT included</td></tr>
</table>
</form>
</div>
</body>
</html>

hope it helps...