js calculate multiple textboxes

**kenhatch** · 05-14-2009 08:10 AM

Hi all,
I have a javascript that takes values of textboxes and calculates them out. What I need to do is tweak my script so I can use multiple "products". I was thinking of appending a unique string in the beginning of the name/id of each textbox then using match expression or preg (??? not sure if they are correct terms) to have the script find the unique sets and calculate them accordingly.
ie.
set1= QTY11_somename * PRICE11_somename
set2= QTY5999_somename * PRICE5999_somename
set3=QTYd_somename * PRICEd_somename
then have the script take the sum of all of the sets to calculate the totals...
In my script so far, the names are hard coded (only 1 set). I need multiple sets with 1 set of totals... see my example:

<script type="text/javascript">
onload = function(){
document.getElementById("calc").onclick = function(){
var form = this.form;
form.subtotal.value = (form.qty.value * form.price.value).toFixed(2);
form.tax.value = (form.subtotal.value * form.taxrate.value).toFixed(2);
form.total.value = ((form.qty.value * form.price.value) + (form.subtotal.value * form.taxrate.value)).toFixed(2);
}
}
</script>

<form>
Quantity: <input name='qty' /><br>
Price: <input name='price' /><br>
Tax Rate: <input name="taxrate" value="0.0825"/><br>
Subotal: <input name="subtotal" readonly="readonly" /><br>
Tax: <input name="tax" readonly="readonly" /><br>
Total: <input name="total" readonly="readonly" /><br>
<input type="button" value="Calculate" id="calc" />
</form>

**Kor** · 05-14-2009 10:07 AM

Could be something like this:

Code:

<!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.0825"/><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>

**newbe101** · 05-15-2009 12:00 PM

Thank you for your reply. That is really close. I can't have a total and tax for each set. I need to have a tax_total, a sub_total (total without tax) then a grand_total (with tax) once at the end. If you have any more suggestions, I would be happy to see them. I am going to play with your code and see what I can come up with myself also... Thank you!

**newbe101** · 05-15-2009 01:07 PM

something more like this (even though "gtotal" is not working for some reason and I cannot have the <div> set forced to be sequential):

<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);
var totV=subV;
grandtotV+=totV;

oSubtotal.value=subV==0?'':subV.toFixed(2);
// oTax.value=taxV==0?'':taxV.toFixed(2);
oTotal.value=totV==0?'':totV.toFixed(2);
}
f['partstotal'].value=grandtotV.toFixed(2);
f['tax'].value = (f['partstotal'].value * f['taxrate'].value).toFixed(2);
f['gtotal'].value = ((f['partstotal'].value * f['taxrate'].value) + f['partstotal'].value).toFixed(2);
}

onload=setEvent
</script>

<form action="">
<div>
Quantity: <input type="text" name='qty_1'><br>
Price: <input type="text" name='price_1'><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_99'><br>
Price: <input type="text" name='price_99'><br>
Subotal: <input type="text" name="subtotal_99" readonly="readonly"><br>
Tax: <input type="text" name="tax_99" readonly="readonly"><br>
Total: <input type="text" name="total_99" readonly="readonly"><br>
<input type="button" value="Calculate" id="calc_99">
</div>
<div>
Quantity: <input type="text" name='qty_3'><br>
Price: <input type="text" name='price_3'><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>
Tax Rate: <input type="text" name="taxrate" value="0.0825">
<br>Tax: <input type="text" name="tax" readonly="readonly">
<br>Parts Total: <input type="text" name="partstotal" readonly="readonly">
<br>Grand Total:<input type="text" name="gtotal" readonly="readonly">
</form>

**newbe101** · 05-15-2009 01:43 PM

Kor, thank you for your help!!! I am getting there with your code. THis is more of what I wanted (see code). Is there any way to remove the "calculate" button for each div and just use onblur (not sure if using correct termonology) instead...:

<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);
var totV=subV;
grandtotV+=totV;

// oSubtotal.value=subV==0?'':subV.toFixed(2);
// oTax.value=taxV==0?'':taxV.toFixed(2);
// oTotal.value=totV==0?'':totV.toFixed(2);

}
f['partstotal'].value=grandtotV.toFixed(2);
f['tax'].value = (f['partstotal'].value * f['taxrate'].value).toFixed(2);
f['gtotal'].value = ((f['partstotal'].value * f['taxrate'].value) + grandtotV).toFixed(2);
}

onload=setEvent
</script>

<form action="">
<div>
Quantity: <input type="text" name='qty_1'><br>
Price: <input type="text" name='price_1'><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>
<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>
<input type="button" value="Calculate" id="calc_3">
</div>
Tax Rate: <input type="text" name="taxrate" value="0.0825">
<br>Tax: <input type="text" name="tax" readonly="readonly">
<br>Parts Total: <input type="text" name="partstotal" readonly="readonly">
<br>Grand Total:<input type="text" name="gtotal" readonly="readonly">
</form>

Thread: js calculate multiple textboxes

Thread Tools

Display

js calculate multiple textboxes

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions