Getting javascript to add amounts into a total box on onkeyup

Question

<% total = 0 %>
<% line = 1 %>
<% FOREACH r IN records %>
<% total = total + r.AmountOwed %>

        <div class="w-row lineitems">
          <div class="w-col w-col-4">
            <div><% r.ServiceDate %></div>
          </div>
          <div class="w-col w-col-4">
            <div>$<% r.AmountOwed %></div>
          </div>
        
          <div class="w-col w-col-4 column-left">
            <input id='Line Item <% line %>' type="text" onkeyup="updateTotal()" placeholder="Amount" name="AmountPaying" class="field m w-input" value="<% r.AmountOwed %>" >
            
          </div>

        </div>
<% line = line + 1 %>
<% END %>
    <input id="numberoflines" type="hidden" name="numberoflines" value='<% line %>'>
       <div class="lineitems w-row">
          <div class="w-col w-col-4">
            <div>
              <div class="footerblock">Total</div>
            </div>
          </div>
          <div class="w-col w-col-4">
            <div>
              <div class="footerblock"> $<% total %></div>
            </div>
          </div>

I have a form that uses a loop to populate line items with their amount owed. There can be any amount of lines items based on whats in the database. Beside each line item is an input box that you enter the amount you want to pay in. At the end of the line items there is an input box that should be updated using onkeyup that adds all the amount paying to display the total amount that has been entered. Here is the javascript I'm using to do this but it only updates the total box with whats in the last line item. numberoflines has the total number of line items there are.

function updateTotal() {
    for (i = 1; i < document.getElementById("numberoflines").value; i++ ) {
      document.getElementById("totalpaying").value = (+document.getElementById(("Line Item " + i)).value);
    }

score 3 · Accepted Answer · edited May 23 '17 at 11:51

3

Because you keep replacing the value instead of adding to it. You need to use += instead of just =

Also, per Emile Bergeron I have included the Number() Javascript function as it will return NaN if there is not a number in the input. Bearing in mind you should check for that on your own as well. For more information on numerical parsing with Javascript see this Q&A: parseInt vs unary plus - when to use which

Try changing it to:

function updateTotal() {
    var total = 0;
    for (i = 1; i < document.getElementById("numberoflines").value; i++ ) {
      total += Number(document.getElementById(("Line Item " + i)).value);
    }
    document.getElementById("totalpaying").value = total;
}

edited May 23 '17 at 11:51

Community

1
1

answered Aug 03 '16 at 19:09

Adjit

10,134
12
53
98

text inputs always have a `string` value, you need to either convert the `totalpaying` value back to a number before addition, or use a separate variable to do the addition. The way you have it will concatenate the values as strings, meaning it basically is `"1"+"2"` becoming "12" instead of `3` – Patrick Evans Aug 03 '16 at 19:10
1

`+document...` changes string to Numbers, AFAIK – cipher Aug 03 '16 at 19:11
@PatrickEvans thanks for pointing that out. Edited the answer. – Adjit Aug 03 '16 at 19:15
1

Since this is SO and OP (and other readers) might need the most clear answer, I would avoid parsing the string with `+` and instead be explicit with `Number(...)`. – Emile Bergeron Aug 03 '16 at 19:19
1

Thanks @EmileBergeron! updated the answer again to include the suggestion. – Adjit Aug 03 '16 at 19:22
1

Note that the `+` and `Number` are equivalent, one is just clearer. See [this table](http://stackoverflow.com/a/17106702/1218980) for more details. – Emile Bergeron Aug 03 '16 at 19:29

jonju · Answer 2 · 2016-08-03T19:56:08.350

1

Assuming all values are integer and correct IDs of element you are using in the function. I've modified the code

function updateTotal() {
var totalline=document.getElementById("numberoflines").value;
var total=0;
    for (var i = 1; i < parseInt(totalline) ; i++ ) {
         var lineitem = document.getElementById("Line Item " + i); //avoid using space in the element's id remove spaces or user a hyphen (-) instead
         total+=parseFloat(lineitem);      
    }
    document.getElementById("totalpaying").value = total;
 }

edited Aug 03 '16 at 19:56

answered Aug 03 '16 at 19:18

jonju

2,711
1
13
19

1

just a small comment. I think `parseFloat()` would be better than `parseInt()` – cipher Aug 03 '16 at 19:42
That's why I included assuming all values are in `integer` – jonju Aug 03 '16 at 19:43
1

The OP commented on my deleted answer that his values were float. :) – cipher Aug 03 '16 at 19:44
And you can guess it's not integers since it's some amounts of money. – Emile Bergeron Aug 03 '16 at 19:46
but `Line item` didn't sound money to me @Emile. And I am sorry I did not see the OP's comment on your deleted post @cipher. My bad – jonju Aug 03 '16 at 19:55
But `AmountOwed` and `totalpaying` sounds a lot like money to me. – Emile Bergeron Aug 03 '16 at 19:58
Probably that's why you are way better than me. I admit it. Can we stop now? – jonju Aug 03 '16 at 20:01

Getting javascript to add amounts into a total box on onkeyup

2 Answers2