PDA

View Full Version : Calculating Multiple Totals (via a function)

kraftomatic
03-18-2005, 04:13 PM
Hey All,

So I've got this little function that works well enough to calculate totals. However, I want to use it in 10 different instances within a form. What's the best way to do this? Here's what I have:

// calculates total (ordered * unitCost)
function CalcAmount() {
var val4 = document.myForm.ordered1.value;
var val5 = document.myForm.unitCost1.value;
var total = val4 * val5;
document.myForm.amount1.value = total;
}

<input type="text" name="ordered1" size="15" class="textbox"><br />
<input type="text" name="ordered2" size="15" class="textbox"><br />
<input type="text" name="ordered3" size="15" class="textbox"><br />
<input type="text" name="ordered4" size="15" class="textbox"><br />
<input type="text" name="ordered5" size="15" class="textbox"><br />
<input type="text" name="ordered6" size="15" class="textbox"><br />
<input type="text" name="ordered7" size="15" class="textbox"><br />
<input type="text" name="ordered8" size="15" class="textbox"><br />
<input type="text" name="ordered9" size="15" class="textbox"><br />
<input type="text" name="ordered10" size="15" class="textbox"><br />

<input type="text" name="unitCost1" size="15" class="textbox" onblur="CalcAmount()"><br />
<input type="text" name="unitCost2" size="15" class="textbox"><br />
<input type="text" name="unitCost3" size="15" class="textbox"><br />
<input type="text" name="unitCost4" size="15" class="textbox"><br />
<input type="text" name="unitCost5" size="15" class="textbox"><br />
<input type="text" name="unitCost6" size="15" class="textbox"><br />
<input type="text" name="unitCost7" size="15" class="textbox"><br />
<input type="text" name="unitCost8" size="15" class="textbox"><br />
<input type="text" name="unitCost9" size="15" class="textbox"><br />
<input type="text" name="unitCost10" size="15" class="textbox"><br />

<!-- where the total displays -->
<input type="text" name="amount1" size="15" class="textbox"><br />
<input type="text" name="amount2" size="15" class="textbox"><br />
<input type="text" name="amount3" size="15" class="textbox"><br />
<input type="text" name="amount4" size="15" class="textbox"><br />
<input type="text" name="amount5" size="15" class="textbox"><br />
<input type="text" name="amount6" size="15" class="textbox"><br />
<input type="text" name="amount7" size="15" class="textbox"><br />
<input type="text" name="amount8" size="15" class="textbox"><br />
<input type="text" name="amount9" size="15" class="textbox"><br />
<input type="text" name="amount10" size="15" class="textbox"><br />

kraftomatic
03-18-2005, 04:22 PM

<input type="text" name="unitCost2" size="15" class="textbox" onblur="this.form.elements['amount2'].value=this.value * this.form.elements['ordered2'].value"><br />

<input type="text" name="unitCost3" size="15" class="textbox" onblur="this.form.elements['amount3'].value=this.value * this.form.elements['ordered3'].value"><br />

<input type="text" name="unitCost4" size="15" class="textbox" onblur="this.form.elements['amount4'].value=this.value * this.form.elements['ordered4'].value"><br />

<input type="text" name="unitCost5" size="15" class="textbox" onblur="this.form.elements['amount5'].value=this.value * this.form.elements['ordered5'].value"><br />

<input type="text" name="unitCost6" size="15" class="textbox" onblur="this.form.elements['amount6'].value=this.value * this.form.elements['ordered6'].value"><br />

<input type="text" name="unitCost7" size="15" class="textbox" onblur="this.form.elements['amount7'].value=this.value * this.form.elements['ordered7'].value"><br />

<input type="text" name="unitCost8" size="15" class="textbox" onblur="this.form.elements['amount8'].value=this.value * this.form.elements['ordered8'].value"><br />

<input type="text" name="unitCost9" size="15" class="textbox" onblur="this.form.elements['amount9'].value=this.value * this.form.elements['ordered9'].value"><br />

<input type="text" name="unitCost10" size="15" class="textbox" onblur="this.form.elements['amount10'].value=this.value * this.form.elements['ordered10'].value"><br />

Thanks.

Kor
03-18-2005, 04:55 PM
or this (the advantage is that is a dynamic way - you may use it nomatter the number of fields, just aware about the same number of the 3 groups):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<title>Untitled Document</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 language="JavaScript" type="text/JavaScript">
var o = 'ordered';
var u = 'unitCost';
var a = 'amount';
function calc(f){
var nr=0;
var el = f.elements;
for(var i=0;i<el.length;i++){
if(el[i].name.indexOf(u)>=0){
nr++
}
}
for(var i=1;i<nr+1;i++){
el[a+i].value = (el[o+i].value*1)*(el[u+i].value*1)
}
}
</script>
<body>
<form>
<input type="text" name="ordered1" size="15" class="textbox" onkeyup="calc(this.form)"><br />
<input type="text" name="ordered2" size="15" class="textbox" onkeyup="calc(this.form)"><br />
<input type="text" name="ordered3" size="15" class="textbox" onkeyup="calc(this.form)"><br />
<input type="text" name="ordered4" size="15" class="textbox" onkeyup="calc(this.form)"><br />
<input type="text" name="ordered5" size="15" class="textbox" onkeyup="calc(this.form)"><br />
<input type="text" name="ordered6" size="15" class="textbox" onkeyup="calc(this.form)"><br />
<input type="text" name="ordered7" size="15" class="textbox" onkeyup="calc(this.form)"><br />
<input type="text" name="ordered8" size="15" class="textbox" onkeyup="calc(this.form)"><br />
<input type="text" name="ordered9" size="15" class="textbox" onkeyup="calc(this.form)"><br />
<input type="text" name="ordered10" size="15" class="textbox" onkeyup="calc(this.form)"><br />
--------<br>
<input type="text" name="unitCost1" size="15" class="textbox" onkeyup="calc(this.form)"><br />
<input type="text" name="unitCost2" size="15" class="textbox" onkeyup="calc(this.form)"><br />
<input type="text" name="unitCost3" size="15" class="textbox" onkeyup="calc(this.form)"><br />
<input type="text" name="unitCost4" size="15" class="textbox" onkeyup="calc(this.form)"><br />
<input type="text" name="unitCost5" size="15" class="textbox" onkeyup="calc(this.form)"><br />
<input type="text" name="unitCost6" size="15" class="textbox" onkeyup="calc(this.form)"><br />
<input type="text" name="unitCost7" size="15" class="textbox" onkeyup="calc(this.form)"><br />
<input type="text" name="unitCost8" size="15" class="textbox" onkeyup="calc(this.form)"><br />
<input type="text" name="unitCost9" size="15" class="textbox" onkeyup="calc(this.form)"><br />
<input type="text" name="unitCost10" size="15" class="textbox" onkeyup="calc(this.form)"><br />
--------<br>

<!-- where the total displays -->
<input type="text" name="amount1" size="15" class="textbox"><br />
<input type="text" name="amount2" size="15" class="textbox"><br />
<input type="text" name="amount3" size="15" class="textbox"><br />
<input type="text" name="amount4" size="15" class="textbox"><br />
<input type="text" name="amount5" size="15" class="textbox"><br />
<input type="text" name="amount6" size="15" class="textbox"><br />
<input type="text" name="amount7" size="15" class="textbox"><br />
<input type="text" name="amount8" size="15" class="textbox"><br />
<input type="text" name="amount9" size="15" class="textbox"><br />
<input type="text" name="amount10" size="15" class="textbox"><br />
</form>
</body>
</html>

kraftomatic
03-18-2005, 06:02 PM
Hmm .. how can I turn that function into something that dynamically calculates the overall total (the 10 "amount" fields together)?

kraftomatic
03-18-2005, 08:44 PM
BTW, What does this loop do exactly:

for(var i=0; i<el.length; i++){
if(el[i].name.indexOf(u)>=0){
nr++
}
}

It cycles through 30 times, 10 each for ordered, unitCost and amount. But what for?

ImperialSpider
03-20-2005, 06:10 AM
Is there a way to put this form into a basic 3 by 10 table?

I tried to just add the table tags between the information bits, but the totals would not show, This is the code I used...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<title>checkout</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 language="JavaScript" type="text/JavaScript">
var o = 'ordered';
var u = 'unitCost';
var a = 'amount';
function calc(f){
var nr=0;
var el = f.elements;
for(var i=0;i<el.length;i++){
if(el[i].name.indexOf(u)>=0){
nr++
}
}
for(var i=1;i<nr+1;i++){
el[a+i].value = (el[o+i].value*1)*(el[u+i].value*1)
}
}
</script>
<body>
<form>
<CENTER>
<TABLE WIDTH="75%">
<TR>
<TH>Quantity</TH> <TH>Price</TH> <TH>Total</TH>
</TR>
<TR>
<TD><input type="text" name="ordered1" size="15" class="textbox" onkeyup="calc(this.form)"><br /></TD> <TD><input type="text" name="unitCost1" size="15" class="textbox" onkeyup="calc(this.form)"><br /></TD> <TD><input type="text" name="amount1" size="15" class="textbox"><br /></TD>
</TR>
<TR>
<TD><input type="text" name="ordered2" size="15" class="textbox" onkeyup="calc(this.form)"><br /></TD> <TD><input type="text" name="unitCost1" size="15" class="textbox" onkeyup="calc(this.form)"><br /></TD> <TD><input type="text" name="amount1" size="15" class="textbox"><br /></TD>
</TR>
<TR>
<TD><input type="text" name="ordered3" size="15" class="textbox" onkeyup="calc(this.form)"><br /></TD> <TD><input type="text" name="unitCost1" size="15" class="textbox" onkeyup="calc(this.form)"><br /></TD> <TD><input type="text" name="amount1" size="15" class="textbox"><br /></TD>
</TR>
<TR>
<TD><input type="text" name="ordered4" size="15" class="textbox" onkeyup="calc(this.form)"><br /></TD> <TD><input type="text" name="unitCost1" size="15" class="textbox" onkeyup="calc(this.form)"><br /></TD> <TD><input type="text" name="amount1" size="15" class="textbox"><br /></TD>
</TR>
<TR>
<TD><input type="text" name="ordered5" size="15" class="textbox" onkeyup="calc(this.form)"><br /></TD> <TD><input type="text" name="unitCost1" size="15" class="textbox" onkeyup="calc(this.form)"><br /></TD> <TD><input type="text" name="amount1" size="15" class="textbox"><br /></TD>
</TR>
<TR>
<TD><input type="text" name="ordered6" size="15" class="textbox" onkeyup="calc(this.form)"><br /></TD> <TD><input type="text" name="unitCost1" size="15" class="textbox" onkeyup="calc(this.form)"><br /></TD> <TD><input type="text" name="amount1" size="15" class="textbox"><br /></TD>
</TR>
<TR>
<TD><input type="text" name="ordered7" size="15" class="textbox" onkeyup="calc(this.form)"><br /></TD> <TD><input type="text" name="unitCost1" size="15" class="textbox" onkeyup="calc(this.form)"><br /></TD> <TD><input type="text" name="amount1" size="15" class="textbox"><br /></TD>
</TR>
<TR>
<TD><input type="text" name="ordered8" size="15" class="textbox" onkeyup="calc(this.form)"><br /></TD> <TD><input type="text" name="unitCost1" size="15" class="textbox" onkeyup="calc(this.form)"><br /></TD> <TD><input type="text" name="amount1" size="15" class="textbox"><br /></TD>
</TR>
<TR>
<TD><input type="text" name="ordered9" size="15" class="textbox" onkeyup="calc(this.form)"><br /></TD> <TD><input type="text" name="unitCost1" size="15" class="textbox" onkeyup="calc(this.form)"><br /></TD> <TD><input type="text" name="amount1" size="15" class="textbox"><br /></TD>
</TR>
<TR>
<TD><input type="text" name="ordered10" size="15" class="textbox" onkeyup="calc(this.form)"><br /></TD> <TD><input type="text" name="unitCost1" size="15" class="textbox" onkeyup="calc(this.form)"><br /></TD> <TD><input type="text" name="amount1" size="15" class="textbox"><br /></TD>
</TR>
<TR>
<TD><input type="text" name="ordertotal" size="15" class="textbox" onkeyup="calc(this.form)"><br /></TD> <TD> </TD> <TD><input type="text" name="amounttotal" size="15" class="textbox"><br /></TD>
</TR>
</TABLE>
</center>
</form>
</body>
</html>

and I received the following error when type inside of any textbox...

Error: 'undefined' is null or not an object.
line: 21
char: 1
Code: 0

Am I doing something wrong, or can this not be put into a table in its present format? Thanks,

ImperialSpider

Kor
03-21-2005, 08:48 AM
for(var i=0; i<el.length; i++){
if(el[i].name.indexOf(u)>=0){
nr++
}
}

It cycles through 30 times, 10 each for ordered, unitCost and amount. But what for?

u is a variable set at start. It has the value of one of your field sets
var u = 'unitCost';
It could be any anyother of the sets, it does not matter, as long as the 3 sets has each of the them the same number of fields.

The piece of code calculates the number of the fields in each set. Well yes, you can simply set var nr=10, but I tried to make the code as dynmaically as I could, presuming that maybe you might add/remove some of the fields without care to modify the javascript code.

Kor
03-21-2005, 09:23 AM
To ImperialSpider

I tried to just add the table tags between the information bits, but the totals would not show, This is the code I used...

All you fields in the 2 last sets have the same name
You should, obviousely, have incremental names as: unitCost1, unitCost2, unitCost3.... and amount1, amount2, amount3

glenngv
03-21-2005, 12:11 PM
BTW, What does this loop do exactly:

for(var i=0; i<el.length; i++){
if(el[i].name.indexOf(u)>=0){
nr++
}
}

It cycles through 30 times, 10 each for ordered, unitCost and amount. But what for?
The loop is unnecessary. Why do you need to re-calculate all the totals when you can only change one set of fields at a time? This is much more efficient as it only calculates the corresponding set of fields.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<title>Untitled Document</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 language="JavaScript" type="text/JavaScript">
function calc(oFld){
var oFrm = oFld.form;
var suffix = oFld.name.replace(/\D/g, "");
oFrm.elements['amount'+suffix].value = oFrm.elements['ordered'+suffix].value * oFrm.elements['unitCost'+suffix].value
}
</script>
<body>
<form>
<input type="text" name="ordered1" size="15" class="textbox" onkeyup="calc(this)"><br />
<input type="text" name="ordered2" size="15" class="textbox" onkeyup="calc(this)"><br />
<input type="text" name="ordered3" size="15" class="textbox" onkeyup="calc(this)"><br />
<input type="text" name="ordered4" size="15" class="textbox" onkeyup="calc(this)"><br />
<input type="text" name="ordered5" size="15" class="textbox" onkeyup="calc(this)"><br />
<input type="text" name="ordered6" size="15" class="textbox" onkeyup="calc(this)"><br />
<input type="text" name="ordered7" size="15" class="textbox" onkeyup="calc(this)"><br />
<input type="text" name="ordered8" size="15" class="textbox" onkeyup="calc(this)"><br />
<input type="text" name="ordered9" size="15" class="textbox" onkeyup="calc(this)"><br />
<input type="text" name="ordered10" size="15" class="textbox" onkeyup="calc(this)"><br />
--------<br>
<input type="text" name="unitCost1" size="15" class="textbox" onkeyup="calc(this)"><br />
<input type="text" name="unitCost2" size="15" class="textbox" onkeyup="calc(this)"><br />
<input type="text" name="unitCost3" size="15" class="textbox" onkeyup="calc(this)"><br />
<input type="text" name="unitCost4" size="15" class="textbox" onkeyup="calc(this)"><br />
<input type="text" name="unitCost5" size="15" class="textbox" onkeyup="calc(this)"><br />
<input type="text" name="unitCost6" size="15" class="textbox" onkeyup="calc(this)"><br />
<input type="text" name="unitCost7" size="15" class="textbox" onkeyup="calc(this)"><br />
<input type="text" name="unitCost8" size="15" class="textbox" onkeyup="calc(this)"><br />
<input type="text" name="unitCost9" size="15" class="textbox" onkeyup="calc(this)"><br />
<input type="text" name="unitCost10" size="15" class="textbox" onkeyup="calc(this)"><br />
--------<br>

<!-- where the total displays -->
<input type="text" name="amount1" size="15" class="textbox"><br />
<input type="text" name="amount2" size="15" class="textbox"><br />
<input type="text" name="amount3" size="15" class="textbox"><br />
<input type="text" name="amount4" size="15" class="textbox"><br />
<input type="text" name="amount5" size="15" class="textbox"><br />
<input type="text" name="amount6" size="15" class="textbox"><br />
<input type="text" name="amount7" size="15" class="textbox"><br />
<input type="text" name="amount8" size="15" class="textbox"><br />
<input type="text" name="amount9" size="15" class="textbox"><br />
<input type="text" name="amount10" size="15" class="textbox"><br />
</form>
</body>
</html>

kraftomatic
03-21-2005, 01:59 PM
What about adding something to calculate the overall total (sum of the 10 total fields) on the fly? That should be fairly straight forward shouldn't it?

kraftomatic
03-21-2005, 08:17 PM
I've got something. It's close, but not quite right ..

var amt1 = parseFloat(document.myForm.amount1.value);
var amt2 = parseFloat(document.myForm.amount2.value);

var test = amt1 + amt2;
document.myForm.overallTotal.value = test;

It reads a "NAN" for amount2 at first; until an actual value is supplied.

Any suggestions?

Thanks.

glenngv
03-22-2005, 01:57 AM
function calc(oFld){
var oFrm = oFld.form;
var suffix = oFld.name.replace(/\D/g, "");
oFrm.elements['amount'+suffix].value = oFrm.elements['ordered'+suffix].value * oFrm.elements['unitCost'+suffix].value

//compute over-all amount
var oAmt, i = 1, total = 0;
while (typeof (oAmt = oFrm.elements['amount'+(i++)]) != "undefined"){
total += Number(oAmt.value);
}
oFrm.overallTotal.value = total;
}

Kor
03-22-2005, 08:31 AM
It reads a "NAN" for amount2 at first; until an actual value is supplied.

The elements' values are always strings. When you parseFloat() the values you transform them into numbers, it is true, but if the value is an empty string '', there is no value to be parsed, so the result is NAN

To avoid that you may first multiply the values with 1. Now if empty string, the so transformed value will be 0.

var amt1 = parseFloat(document.myForm.amount1.value*1);
var amt2 = parseFloat(document.myForm.amount2.value*1);

glenngv
03-22-2005, 09:09 AM
The elements' values are always strings. When you parseFloat() the values you transform them into numbers, it is true, but if the value is an empty string '', there is no value to be parsed, so the result is NAN

To avoid that you may first multiply the values with 1. Now if empty string, the so transformed value will be 0.

var amt1 = parseFloat(document.myForm.amount1.value*1);
var amt2 = parseFloat(document.myForm.amount2.value*1);
Or you may just use the Number() function as I did in my previous post. If empty string is passed to it, the result is 0 and not NaN. And also floating and whole numbers are covered in this function.

Kor
03-22-2005, 09:33 AM
Yes glenngv, sorry for ommited that. I should have add :
"or use Number() as in glenngv code"

I only tried to point out why that value is NAN, to help kraftomatic avoid this kinda error for the future ;)

kraftomatic
03-22-2005, 01:45 PM
Thanks guys .. much appreciated ..

kraftomatic
03-22-2005, 03:28 PM
One last question .. I've searched the forum for ways to format decimals to two places. Everything listed is 1) dated from last year and 2) big and messy. :)

What's the simplest way to do the conversions with what's above?

Thanks.

glenngv
03-23-2005, 01:54 AM
See the JavaScript FAQ sticky thread. It has an entry for a script that formats numbers to a specified number of places.