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
– Sam M, Commented Aug 29, 2013 at 5:37

Marko Dumic · Accepted Answer · 2010-03-10 14:27:04Z

233

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

    // here, you have your sum
});

answered Mar 10, 2010 at 14:27

Marko Dumic

9,8784 gold badges32 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mercury Over a year ago

Thx @MarkoDumic but what if i want kinda like subtotals ( qty * price ) then calaculate the grand rotal !

mark.monteiro Over a year ago

For a slightly more elegant solution you can use Array.prototype.reduce: stackoverflow.com/a/37466639/1988326

ubershmekel · Accepted Answer · 2013-05-09 05:11:57Z

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 9, 2013 at 5:11

ubershmekel

13k10 gold badges81 silver badges98 bronze badges

2 Comments

Peter Meth Over a year ago

I think you mean .val() and not .text()

ubershmekel Over a year ago

@PeterMeth it seems it depends stackoverflow.com/questions/807867/…

Tschallacka · Accepted Answer · 2019-05-16 10:08:43Z

15

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

edited May 16, 2019 at 10:08

Tschallacka

28.9k15 gold badges99 silver badges140 bronze badges

answered May 26, 2016 at 16:40

mark.monteiro

2,9882 gold badges39 silver badges41 bronze badges

Comments

Bron Davies · Accepted Answer · 2013-07-11 22:27:23Z

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, 2013 at 22:27

Bron Davies

6,0343 gold badges32 silver badges41 bronze badges

Comments

Somnath Muluk · Accepted Answer · 2012-03-29 18:44:45Z

4

Use this function:

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

edited Mar 29, 2012 at 18:44

Somnath Muluk

58.3k39 gold badges225 silver badges230 bronze badges

answered Mar 10, 2010 at 14:27

Deniss Kozlovs

4,8392 gold badges30 silver badges36 bronze badges

2 Comments

Marko Dumic Over a year ago

The price is not always integer.

alex Over a year ago

I think you'll want parseFloat()

BryanH · Accepted Answer · 2012-11-14 23:01:51Z

2

This should fix it:

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

edited Nov 14, 2012 at 23:01

BryanH

6,1133 gold badges37 silver badges47 bronze badges

answered Mar 10, 2010 at 14:28

Bvandorp

311 bronze badge

2 Comments

Marko Dumic Over a year ago

This will concatenate strings returned from .val().

Fluffeh Over a year ago

A suggestion from an Anon User is to use the following: var total = 0; $(".price").each( function(){ total += $(this).val() * 1; });

Sadikhasan · Accepted Answer · 2014-12-25 04:56:03Z

0

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

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

    });
        alert(sum);
});

JS Fiddle

answered Dec 25, 2014 at 4:56

Sadikhasan

18.6k23 gold badges84 silver badges126 bronze badges

Comments

smonff · Accepted Answer · 2021-02-18 10:07:00Z

0

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>

edited Feb 18, 2021 at 10:07

smonff

3,5084 gold badges40 silver badges49 bronze badges

answered Jan 26, 2019 at 20:07

bajcepsme

1

1 Comment

chb Over a year ago

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.

CMMaung · Accepted Answer · 2012-03-14 09:00:51Z

-1

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

please try like this...

answered Mar 14, 2012 at 9:00

CMMaung

1655 gold badges11 silver badges27 bronze badges

3 Comments

Marko Dumic Over a year ago

I'm not sure you want this: "2 apples" + "3 oranges" => 5

JSobell Over a year ago

I have an order form with about 30 text fields that contain numerical values.

user2611793 Over a year ago

I'm not sure why you, Marko, would think his method is for anything other than adding values.

Collectives™ on Stack Overflow

jQuery calculate sum of values in all text fields

9 Answers 9

2 Comments

2 Comments

Comments

Comments

2 Comments

2 Comments

Comments

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

2 Comments

2 Comments

Comments

Comments

2 Comments

2 Comments

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related