Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.

# Thread: Calculating Multiple Totals (via a function)

1. ## Calculating Multiple Totals (via a function)

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 />

<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.

• 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):
PHP Code:
``` <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <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> </head> <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>  ```

• Hmm .. how can I turn that function into something that dynamically calculates the overall total (the 10 "amount" fields together)?

• 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?

• ## nice script, but I have a basic question...

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...

Code:
```<!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

• 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.

• 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

• Originally Posted by kraftomatic
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.
Code:
```<!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>```

• 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?

• 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.

• Code:
```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;
}```

• 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);

• Originally Posted by Kor
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.

• 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

•
Page 1 of 2 12 Last

#### Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts
•