...

View Full Version : Simple Addition Script



Candrias77
07-04-2002, 04:10 AM
Hi there i am needing to add a simple addition script to a page but am not sure where to start, i am prety new to javascript.

Basicly i have a row of numeric boxes 00.00 and at the bottom i have a total which i want to simply be a sum of all the boxes above. This needs to be recalculated every time the boxes change.

So i am thinking i will need a script that makes the calculation and updates the total box - and have this script run every onChange for each of the initial boxes right?

Where would i start programming this? Is seems prety simple, does anyone know of an example like this i can mess with our perhaps a tutorial or something?

Thanks a lot for your help.

glenngv
07-04-2002, 04:59 AM
<html>
<head>
<script language="javascript">
function addAll(){
var frm = document.f;
var total = 0;
for (var i=0;i<frm.num.length;i++){
total+=parseInt(frm.num[i].value);
}
frm.tot.value=total;
}
</script>
</head>
<body>
<form name="f">
<input name="num" value="00.00" onblur="if (!isNAN(this.value)) this.value='00.00'" onchange="addAll()">
<input name="num" value="00.00" onblur="if (!isNAN(this.value)) this.value='00.00'" onchange="addAll()">
<input name="num" value="00.00" onblur="if (!isNAN(this.value)) this.value='00.00'" onchange="addAll()">
<input name="num" value="00.00" onblur="if (!isNAN(this.value)) this.value='00.00'" onchange="addAll()">
<input name="num" value="00.00" onblur="if (!isNAN(this.value)) this.value='00.00'" onchange="addAll()">
<input name="tot" value="00.00" onfocus="this.blur()" readonly>
</form>
</body>
</html>

Candrias77
07-04-2002, 05:05 AM
Thanks Glen, thats great but one problem... These values need to be passed with different names, ie. num1, num2, num3, etc.

What do i need to change to make it a sum of those specific values?

Also, the total box seems to be ignoring anything after the decimal point. ie, 10.20 in box one and 30.20 in box two will give a total of 40 not 40.40 if you know what i mean.

glenngv
07-04-2002, 05:14 AM
Originally posted by Candrias77
Thanks Glen, thats great but one problem... These values need to be passed with different names, ie. num1, num2, num3, etc.

What do i need to change to make it a sum of those specific values?

it's easier to have it the same name. Do you have problems accessing them on the next page? Are you using a server-side language like ASP or just plain HTML.

Candrias77
07-04-2002, 05:23 AM
I am using php to construct an email that gets sent off showing the variables when the page is submitted. It is just that next to each number box is a Category and a Desctiption column so the form looks a little like this:

Category1 Description1 Cost1
Category2 Description2 Cost2
Category3 Description3 Cost3
Total CostTotal (sum of other costs)

etc.

This then sends an email which looks a lot like this and sends it off. I am having trouble separating the Cost values when they are named the same.

glenngv
07-04-2002, 05:43 AM
can you post the code so that i can easily adjust the script according your convention

Candrias77
07-04-2002, 06:48 AM
Sorry, my methods are a little more complicated than i first explained. I am calling the generic php page that we use for most of our forms (form_handler.lib.php) but this acutually displays a .tpl page (submit_expense_claim.tpl) which i am designing. submit_expense_claim.tpl passes all the variables that were used through form_handler.lib.php to another .tpl page (submit_expense_claim_email.tpl) which is the email template and sends it off.

The files used are below (download to disc, viewing in browser will fill in the server side stuff):
form_handler.lib.php (http://www.autobuyandsell.co.nz/andrew/test/form_handler.lib.php)
submit_expense_claim.tpl (http://www.autobuyandsell.co.nz/andrew/test/submit_expense_claim.tpl)
submit_expense_claim_email.tpl (http://www.autobuyandsell.co.nz/andrew/test/submit_expense_claim_email.tpl)

The forms are not fully completed yet but they have all of the visible form data that will be needed.

I understand that this is moving beyond a javascript request and feel free to not have to solve this one for me, i am able to get hold of our programmer another day sometime to get it sorted at last resort.

Thanks for your help so far anyway.

glenngv
07-04-2002, 07:23 AM
I looked at submit_expense_claim.tpl page, and i found that you did not change the appropriate form name in the function. In my sample I name the form as f that's why I use var frm = document.f. But your form name is form. Change it like this: (You can now name the cost as num1, num2..., like the convention used in description field)

<script language="javascript">
function addAll(){
var frm = document.form;
var len = parseInt(frm.count.value);
var total = 0;
for (var i=1;i<len;i++){
objNum = eval("frm.num"+i);
total+=parseFloat(objNum.value);
}
frm.tot.value=total;
}
</script>
</head>
<body>
<form name="form">

<input name="description5" type="text" id="description5">
...
<input name="num5" type="text" id="num" onblur="if (!isNAN(this.value)) this.value='00.00'" onchange="addAll()" value="00.00" size="6" maxlength="6">
<input type="hidden" name="count" value="5">

Put a hidden variable that contains how many cost there are.

Candrias77
07-04-2002, 08:08 AM
Thanks again, the calculations on the form seems to be working now (here (http://www.autobuy.co.nz/finance_forms/finance_form_mailer.php?template=../../help/submit_expense_claim.tpl)) except for the lack of decimal places in the result calculation (ie, 10.50 becomes 10.5) but this is not a big deal. I do however get an error in the bottom left of the page in IE when i enter a value into one of the number fields. It reads something like"

Line: 68
Char: 1
Error: Object expected
Code: 0
URL: http://www.autobuy.co.nz/....../submit_expense_claim.tpl

Any thoughts on what that might be or would you need to look at the latest files?

glenngv
07-04-2002, 09:37 AM
about the 2 decimal places...

change this line:

frm.tot.value=total;

to this:

frm.tot.value=Math.floor(total*100)/100;


On the object expected error, what did you enter on the field? Did it happen right after the field lost focus?
I cannot accessed the latest page because there are restricted word(s) in the URL that our proxy prohibits.

Candrias77
07-04-2002, 01:53 PM
Ok, the error appears when any box comes off focus with any value other than the initial one. The calculation works fine but still gives an error, unfortunately this script is a bit beyond me to be trouble shooting it ;) There are several other visible and invisible fields in the form but i dont think they would be interfering. All the javascript that i am using is below.

The head code is:
<script language="javascript">
function addAll(){
var frm = document.form;
var len = parseInt(frm.count.value);
var total = 0;
for (var i=1;i<len;i++){
objNum = eval("frm.num"+i);
total+=parseFloat(objNum.value);
}
frm.tot.value=total;
}
</script>

The form input fields (the numeric fields that get added together):
<input name="num1" type="text" size="6" maxlength="6" value="00.00" onblur="if (!isNAN(this.value)) this.value='00.00'" onchange="addAll()">

The total box:
<input name="tot" type="text" size="6" maxlength="6" value="00.00" onfocus="this.blur()" readonly>

And there is that invisible field at the bottom:
<input type="hidden" name="count" value="6">


Thanks once again.

Candrias77
07-05-2002, 12:20 AM
Solved the error message, we had NAN non NaN :rolleyes: all good, the minor things remaining i can work through now.

Thanks for all your help, the form is working great now.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum