www.webdeveloper.com
Page 1 of 3 123 LastLast
Results 1 to 15 of 33

Thread: dynamically calculate the sum of fields

  1. #1
    Join Date
    Feb 2007
    Posts
    3

    dynamically calculate the sum of fields

    Hi,
    I've created the code below which automatically adds two fields together (drop-down boxes) , without the need for a submit or input button.

    Now, I am trying to do the same again, but this time instead of having drop-down boxes, i need to have text input boxes. (eventually i will be adding monetary values together).

    So far, i've not had any luck, but would really appreciate some help or advice.

    -----------

    <script type="text/javascript"><!--
    function updatesum() {
    document.form.sum.value =
    (document.form.sum1.options[document.form.sum1.selectedIndex].text-0) +
    (document.form.sum2.options[document.form.sum2.selectedIndex].text-0); }
    //--></script>

    <body>
    <form name="form" >
    Select a number:
    <select name="sum1" onChange="updatesum()">
    <option selected>0<option>1<option>2<option>3<option>4
    <option>5<option>6<option>7<option>8<option>9
    </select>
    and another number:
    <select name="sum2" onChange="updatesum()">
    <option selected>0<option>1<option>2<option>3<option>4
    <option>5<option>6<option>7<option>8<option>9
    </select>
    Their sum is:</th> <td><input name="sum" readonly style="border:none"
    value="0">
    </form>
    </body>

    ----------------

    Thanks!

    Ian

  2. #2
    Join Date
    Nov 2002
    Location
    Flint, Michigan, USA
    Posts
    594
    How about:
    Code:
    <input type="text" onblur="updatesum();">
    plus appropriate changes to the function.
    Please give me a hand at http://www.gofundme.com/bkzr98.

  3. #3
    Join Date
    Feb 2007
    Posts
    3
    Hi Jalarie,

    Thanks for your reply.

    Fortunately i've managed to sort it out and get it working how i need it to.

    Code:
    <script type="text/javascript"><!--
    function updatesum() {
    document.form.sum.value = (document.form.sum1.value -0) + (document.form.sum2.value -0);
    }
    //--></script>
    
    <body>
    
    <form name="form" >
    Enter a number:
    <input name="sum1" onChange="updatesum()" />
    and another number:
    <input name="sum2" onChange="updatesum()" />
    Their sum is:
    <input name="sum" readonly style="border:0px;">
    </form>
    
    </body>

  4. #4
    Join Date
    Mar 2007
    Posts
    2

    make the function more global

    good script ian.. i found this post because i need this such of script.
    and jalarie's idea is good too..

    but can you do me a favor, please demonstrate how to make the function more global, so we can use it in other forms and/or many form fields. i think the function should have parameters for that purpose.

    sorry, i cant make the codes, always fails (im programming in php btw) i count on you ian thx

  5. #5
    Join Date
    Mar 2007
    Posts
    2

    found what i want

    dear friends coders...
    after some 'trials and errors' plz check this 'add' function. the keyword is 'getElementById', so dont forget to name your field in the 'id' attribute. plz critize, maybe you can add some comments on it..

    sorry ian, i use your code as template

    Code:
    <script type="text/javascript">
    <!--
    function calc(A,B,SUM) {
      var one = document.getElementById(A).value;
      var two = document.getElementById(B).value; 
      document.getElementById(SUM).value = one + two;
    }
    //-->
    </script>
    
    <body>
    <form name="form" >
    Enter a number:
    <input name="sum1" id="op1" onChange="calc('op1','op2','result')" />
    and another number:
    <input name="sum2" id="op2" onChange="calc('op1','op2','result')" />
    Their sum is:
    <input name="sum" id="result" readonly style="border:0px;">
    </form>
    
    </body>
    thx for the isnpirations... lets chat

  6. #6
    Join Date
    Aug 2008
    Posts
    1
    This is great, really great. You should put up a tutorial if you have a website, because it took me a long time to find this even though its a pretty simple concept.

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,389

    Exclamation Consider this ...

    Your original script is prone to errors if the user enters a non-number.
    See the problem if you enter 'one' instead of '1'.

    Here's a slight modification to avoid this problem with a slight change to the function called to avoid one id entry.
    PHP Code:
    <html>
    <
    head>
    <
    title>Text Summation</title>

    <
    script type="text/javascript">
    function 
    calc(A,B,SUM) {
      var 
    one Number(A);
      if (
    isNaN(one)) { alert('Invalid entry: '+A); one=0; }
      var 
    two Number(document.getElementById(B).value); 
      if (
    isNaN(two)) { alert('Invalid entry: '+B); two=0; }
      
    document.getElementById(SUM).value one two;
    }
    </script>

    <body>
    <form name="form" >
    Enter a number:
    <input name="sum1" id="op1" value="" onChange="calc(this.value,'op2','result')" />
    and another number:
    <input name="sum2" value="" id="op2" onChange="calc(this.value,'op1','result')" />
    Their sum is:
    <input name="sum" value="" id="result" readonly style="border:0px;">
    </form>

    </body>
    </html> 

  8. #8
    Join Date
    Dec 2011
    Posts
    1

    working


    found simple and working good..!

  9. #9
    Join Date
    Sep 2012
    Posts
    3
    I don't often use Javascript, so I was wondering the best way to format the output of this function to add .00 when the result is a whole number?

  10. #10
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,389

    Lightbulb

    Consider using .toFixed(#)
    as in:
    Code:
    <!DOC HTML>
    <html>
    <head>
    <title> Untitled </title>
    <script type="text/javascript">
    var n=12;
    alert(n.toFixed(2));
    </script>
    
    </head>
    <body>
    
    </body>
    </html>

  11. #11
    Join Date
    Sep 2012
    Posts
    3
    Quote Originally Posted by JMRKER View Post
    Thanks, that did the trick.

  12. #12
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,389
    Responding to a PM that does not allow me to add the code.

    I'm not sure which script you wanted to add the fixed $.00 amount to after the summation, so here are both...
    Code:
            <html>
            <head>
            <title>Text Summation</title>
    
            <script type="text/javascript">
            function calc(A,B,SUM) {
              var one = Number(A);
              if (isNaN(one)) { alert('Invalid entry: '+A); one=0; }
              var two = Number(document.getElementById(B).value); 
              if (isNaN(two)) { alert('Invalid entry: '+B); two=0; }
              document.getElementById(SUM).value = (one + two).toFixed(2);
            }
            </script>
    
            <body>
            <form name="form" >
            Enter a number:
            <input name="sum1" id="op1" value="1.23456" onChange="calc(this.value,'op2','result')" />
            and another number:
            <input name="sum2" id="op2" value="2.34567" onChange="calc(this.value,'op1','result')" />
            Their sum is:
            <input name="sum" value="" id="result" readonly style="border:0px;">
            </form>
    
            </body>
            </html>
    And here is the other
    Code:
    <script type="text/javascript">
    function updatesum() {
    document.form.sum.value =
    ((document.form.sum1.options[document.form.sum1.selectedIndex].text-0) +
     (document.form.sum2.options[document.form.sum2.selectedIndex].text-0)).toFixed(2);
    }
    </script>
    
    <body>
    <form name="form" >
    Select a number:
    <select name="sum1" onChange="updatesum()">
    <option selected>0<option>1<option>2<option>3<option>4
    <option>5<option>6<option>7<option>8<option>9
    </select>
    and another number:
    <select name="sum2" onChange="updatesum()">
    <option selected>0<option>1<option>2<option>3<option>4
    <option>5<option>6<option>7<option>8<option>9
    </select>
    Their sum is:</th> <td><input name="sum" readonly style="border:none"
    value="0">
    </form>
    </body>

  13. #13
    Join Date
    Sep 2012
    Posts
    3
    Quote Originally Posted by JMRKER View Post
    Responding to a PM that does not allow me to add the code.

    I'm not sure which script you wanted to add the fixed $.00 amount to after the summation, so here are both...
    Code:
       <snip>
    And here is the other
    Code:
    <snip>
    Ahh, thanks, the second solution was the one I was looking for... my script started with a base number (like below) and I was applying the formatting in the wrong area:
    Code:
    <script type="text/javascript">
    function updatesum() {
    document.form.sum.value = (
    (120.00) +
    (document.form.sum1.options[document.form.sum1.selectedIndex].value-0) +
    (document.form.sum2.options[document.form.sum2.selectedIndex].value-0)).toFixed(2);
    }
    </script>
    Also, you get a problem with concatenating the numbers if you don't pay attention to your parens.

    Thanks again

  14. #14
    Join Date
    Oct 2012
    Posts
    24
    Hi guys,
    Thank you SO much for providing code like this, i'm successfully using it in a form i'm creating.
    When i'm going through the form and inserting values into text boxes, the total dynamically calculates as it should.

    However, i can't seem to get that value to insert into a mysql database.
    PHP Notice: Undefined variable: SumMiles
    It's almost like the insert request perceives this field as being empty and doesn't try to insert the data, so it falls over.
    I'm just calling the field in my insert statement by name, and not having declaring anything special about it.

    On the form itself before submission, I can see it is calculating a value successfully but maybe it's not storing that value when i click submit?

  15. #15
    Join Date
    Nov 2010
    Posts
    1,085
    we would have to see your form at least to have any idea what the problem might be

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles