Candrias77 07-04-2002, 03: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, 03: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, 04: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, 04: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, 04: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, 04:43 AM can you post the code so that i can easily adjust the script according your convention
Candrias77 07-04-2002, 05: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, 06: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, 07: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, 08: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, 12: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-04-2002, 11:20 PM 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.
| 
