Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Location
    New Zealand
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Simple Addition Script

    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.

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    <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>
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #3
    Regular Coder
    Join Date
    Jul 2002
    Location
    New Zealand
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by Candrias77; 07-04-2002 at 05:12 AM.

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    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.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #5
    Regular Coder
    Join Date
    Jul 2002
    Location
    New Zealand
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    can you post the code so that i can easily adjust the script according your convention
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #7
    Regular Coder
    Join Date
    Jul 2002
    Location
    New Zealand
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    submit_expense_claim.tpl
    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.

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    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.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #9
    Regular Coder
    Join Date
    Jul 2002
    Location
    New Zealand
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks again, the calculations on the form seems to be working now (here) 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/....../subm...ense_claim.tpl

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

  • #10
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    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.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #11
    Regular Coder
    Join Date
    Jul 2002
    Location
    New Zealand
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #12
    Regular Coder
    Join Date
    Jul 2002
    Location
    New Zealand
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Solved the error message, we had NAN non NaN all good, the minor things remaining i can work through now.

    Thanks for all your help, the form is working great now.
    eTheory - the theory of revolution


  •  

    Posting Permissions

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