jQuery calculate sum of values in all text fields

Question

I have an order form with about 30 text fields that contain numerical values. I'd like to calculate the sum of all those values on blur.

I know how to select all text fields but not how to loop through them and add up all their values?

$(document).ready(function(){
   $(".price").blur(function() {
    //loop and add up every value from $(".price").val()
   })
});

just want to know one thing.Why the above posted questioned person is not asked about the research work he has done. As the posted question doesn't show any research work or what he tried at least, especially when the question is not a very tricky and complex one. The solution for the above question can be Google easily still it has received 22 up votes. No issues on up votes but what about the research work? Is it that members with lesser points on Stack are asked about research work? — Sam M, Aug 29 '13 at 05:37
Possible duplicate of [Sum using jQuery each function](http://stackoverflow.com/questions/4377410/sum-using-jquery-each-function) — KyleMit, Oct 12 '16 at 13:04

score 230 · Accepted Answer · answered Mar 10 '10 at 14:27

230

$('.price').blur(function () {
    var sum = 0;
    $('.price').each(function() {
        sum += Number($(this).val());
    });

    // here, you have your sum
});

answered Mar 10 '10 at 14:27

Marko Dumic

9,848
4
29
33

Thx @MarkoDumic but what if i want kinda like subtotals ( qty * price ) then calaculate the grand rotal ! – mercury Mar 09 '16 at 19:44
For a slightly more elegant solution you can use Array.prototype.reduce: http://stackoverflow.com/a/37466639/1988326 – mark.monteiro May 27 '16 at 20:20

score 30 · Answer 2 · answered May 09 '13 at 05:11

30

A tad more generic copy/paste function for your project.

sumjq = function(selector) {
    var sum = 0;
    $(selector).each(function() {
        sum += Number($(this).text());
    });
    return sum;
}

console.log(sumjq('.price'));

answered May 09 '13 at 05:11

ubershmekel

11,864
10
72
89

I think you mean `.val()` and not `.text()` – Peter Meth Oct 28 '15 at 18:51
@PeterMeth it seems it depends http://stackoverflow.com/questions/807867/difference-between-val-and-text – ubershmekel Oct 28 '15 at 20:15

score 14 · Answer 3 · edited May 16 '19 at 10:08

If you don't need to support IE8 then you can use the native Javascript Array.prototype.reduce() method. You will need to convert your JQuery object into an array first:

 var sum = $('.price').toArray().reduce(function(sum,element) {
     if(isNaN(sum)) sum = 0;
     return sum + Number(element.value);
 }, 0);

Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

score 6 · Answer 4 · answered Jul 11 '13 at 22:27

6

Similarly along the lines of these answers written as a plugin:

$.fn.sum = function () {
    var sum = 0;
    this.each(function () {
        sum += 1*($(this).val());
    });
    return sum;
};

For the record 1 * x is faster than Number(x) in Chrome

answered Jul 11 '13 at 22:27

Bron Davies

5,930
3
30
41

score 4 · Answer 5 · edited Mar 29 '12 at 18:44

4

Use this function:

$(".price").each(function(){
total_price += parseInt($(this).val());
});

edited Mar 29 '12 at 18:44

Somnath Muluk

55,015
38
216
226

answered Mar 10 '10 at 14:27

Deniss Kozlovs

4,761
2
28
35

1

The price is not always integer. – Marko Dumic Mar 10 '10 at 14:28
3

I think you'll want `parseFloat()` – alex Mar 10 '10 at 14:34

score 2 · Answer 6 · edited Nov 14 '12 at 23:01

2

This should fix it:

var total = 0;   
$(".price").each( function(){
          total += $(this).val() * 1;
});

edited Nov 14 '12 at 23:01

BryanH

5,826
3
34
47

answered Mar 10 '10 at 14:28

Bvandorp

31
1

5

This will concatenate strings returned from .val(). – Marko Dumic Mar 10 '10 at 15:00
A suggestion from an Anon User is to use the following: `var total = 0; $(".price").each( function(){ total += $(this).val() * 1; });` – Fluffeh Sep 18 '12 at 13:31

score 0 · Answer 7 · answered Dec 25 '14 at 04:56

0

$('.price').blur(function () {
    var sum = 0;
    $('.price').each(function() {

        if($(this).val()!="")
         {
            sum += parseFloat($(this).val());
         }

    });
        alert(sum);
});

JS Fiddle

answered Dec 25 '14 at 04:56

Sadikhasan

18,365
21
80
122

score 0 · Answer 8 · edited Feb 18 '21 at 10:07

This will work 100%:

<script type="text/javascript">  
  function calculate() {
    var result = document.getElementById('result');
    var el, i = 0, total = 0; 
    while(el = document.getElementById('v'+(i++)) ) {
      el.value = el.value.replace(/\\D/,"");
      total = total + Number(el.value);
    }
    result.value = total;
    if(document.getElementById('v0').value =="" &&
      document.getElementById('v1').value =="" &&
      document.getElementById('v2').value =="" ) {
        result.value ="";
      }
    }
  }
</script>

Some number:<input type="text" id ="v0" onkeyup="calculate()">
Some number:<input type="text" id ="v1" onkeyup="calculate()">
Some number:<input type="text" id ="v2" onkeyup="calculate()">
Result: <input type="text" id="result" onkeyup="calculate()"  readonly>

Hi, welcome to Stack Overflow. When answering a question that already has many answers, please be sure to add some additional insight into why the response you're providing is somehow substantive and not simply echoing what's already been vetted by the original poster. — chb, Jan 26 '19 at 20:26

score -1 · Answer 9 · answered Mar 14 '12 at 09:00

-1

$(".price").each(function(){ 
total_price += parseFloat($(this).val()); 
});

please try like this...

answered Mar 14 '12 at 09:00

CMMaung

165
5
11
27

1

I'm not sure you want this: `"2 apples" + "3 oranges" => 5` – Marko Dumic Jun 29 '12 at 13:03
I have an order form with about 30 text fields **that contain numerical values.** – JSobell Jul 24 '14 at 06:00
I'm not sure why you, Marko, would think his method is for anything other than adding values. – Nov 13 '14 at 08:18

jQuery calculate sum of values in all text fields

9 Answers9

Linked