jquery sum of multiple input fields if same class in one input

Question

Hello I need to sum the values of same class input in one input with class name total.

<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />

<input type="text" class="total" value="" />

Possible?

A working fiddle here

$(document).on("change", "qty1", function() {
    var sum = 0;
    $("input[class *= 'qty1']").each(function(){
        sum += +$(this).val();
    });
    $(".total").val(sum);
});

So, this means its not possible? What if i change classes to ID? — Andrei, Jun 09 '14 at 18:51
So, this existing possible code you posted is not working? or what?? — Jai, Jun 09 '14 at 18:53

score 65 · Accepted Answer · answered Jun 09 '14 at 18:53

65

You pretty much had it, just needed to adjust your JQuery a little bit for the appropriate selectors

updated fiddle : http://jsfiddle.net/5gsBV/7/

$(document).on("change", ".qty1", function() {
    var sum = 0;
    $(".qty1").each(function(){
        sum += +$(this).val();
    });
    $(".total").val(sum);
});

answered Jun 09 '14 at 18:53

Adjit

10,134
12
53
98

@Andrei not a problem! Anytime you want to access classes or id's in JQuery you have to be sure you include the `. or #` ie `.class` or `#id` – Adjit Jun 09 '14 at 19:01
thanks again, one more question http://jsfiddle.net/5gsBV/9/ how can I change "CHANGE" event on other so that it will sum the values even after page refresh? – Andrei Jun 09 '14 at 19:05
@Andrei I don't believe the value's will be saved in the text field on the page refresh. But this should take care of anytime the `qty` field is changed. – Adjit Jun 09 '14 at 19:35
Excellent Answer, the $("document").on(.....) also works to catch dynamically added HTML, which was my case. – David O'Regan Apr 08 '16 at 09:46
Thank you adjit you can also solve my problem in one my project in early morning. – Bhavin Thummar Jun 21 '17 at 04:47
@bhavinthummar absolutely! Have you posted a question? – Adjit Jun 21 '17 at 10:53
no @Adjit i have searched in google stakoverflow and i found your answer first and then my problem is solved. – Bhavin Thummar Jun 21 '17 at 11:05
@bhavinthummar ok good! If you have any questions just let me know – Adjit Jun 21 '17 at 11:06
Can someone please explain why do we use "`+`" just before `$(this).val();` in the function? – Kewal Shah Feb 03 '19 at 08:13
Ok I got it, it is a [unary](https://stackoverflow.com/a/17106702/8407719) operator – Kewal Shah Feb 03 '19 at 08:26
very useful. it worked for me on 2023 – Carlos Morales May 26 '23 at 17:34

Alex Char · Answer 2 · 2019-02-11T08:01:35.753

I suggest this solution:

html

<input type="text" class="qty1" value="" />
    <input type="text" class="qty1" value="" />
    <input type="text" class="qty1" value="" />
    <input type="text" class="qty1" value="" />
    <input type="text" class="qty1" value="" />
    <input type="text" class="qty1" value="" />

    <input type="text" class="total" value="" />

<div id="result"></div>

js

$(".qty1").on("blur", function(){
    var sum=0;
    $(".qty1").each(function(){
        if($(this).val() !== "")
          sum += parseInt($(this).val(), 10);   
    });

    $("#result").html(sum);
});

fiddle

score 2 · Answer 3 · answered Jun 09 '14 at 18:54

2

I think your issue is here:

$("#destination").val(sum);

change it to:

$(".total").val(sum);

And instead of change event i suggest you to use keyup instead.

$(document).on("keyup"

answered Jun 09 '14 at 18:54

Jai

74,255
12
74
103

vinod kumar · Answer 4 · 2018-01-13T15:04:49.653

2

$(document).on("keyup", ".qty1", function() {
    var sum = 0;
    $(".qty1").each(function(){
        sum += +$(this).val();
    });
    $(".total").val(sum);
});

edited Jan 13 '18 at 15:04

answered Jan 13 '18 at 11:07

vinod kumar

31
4

Whenever suggesting an answer, consider commenting your code for better clarity. – Hexfire Jan 13 '18 at 11:15

score 1 · Answer 5 · edited May 17 '17 at 12:34

1

We can use following own function

 (function( $ ){
   $.fn.sum=function () {
    var sum=0;
        $(this).each(function(index, element){
            sum += parseFloat($(element).val());
        });
    return sum;
    }; 
})( jQuery );
//Call $('.abcd').sum();

http://www.gleegrid.com/code-snippet/javascript/jquery-sum-input-values-by-class/?filter=bygroup&group=JQuery

edited May 17 '17 at 12:34

PEHLAJ

9,980
9
41
53

answered May 17 '17 at 12:18

Karthik Vaithiyanathan

51
3

score 1 · Answer 6 · answered Sep 28 '19 at 13:45

1

$('.qty1').each(function(){
  sum += parseFloat(this.value);
   });
console.log(sum);

answered Sep 28 '19 at 13:45

Rahman

65
1
9

1

While the code might be easy to understand for people with experience, beginners might need an explanation. Please add an explanation what your code does and how it solves OPs question. – Max Vollmer Sep 28 '19 at 14:11

score 1 · Answer 7 · edited Mar 25 '21 at 14:17

This will work with pure js

<input type="text" value=" " class="percent-input"> <br>
<input type="text" value=" " class="percent-input"> <br>
<input type="text" value=" " class="percent-input"> <br>
<p>Total Value :<span id="total">100%</span></p>
<p>Left Value :<span id="left">0.00%</span></p>

    var percenInput = document.querySelectorAll('.percent-input');
    for (let i = 0; i < percenInput.length; i++) {
        percenInput[i].addEventListener('keyup', getPercentVal)
    }

    function getPercentVal() {
        var total = 0;
        var allPercentVal = document.querySelectorAll('.percent-input');
        for (var i = 0; i < allPercentVal.length; i++) {
            if (allPercentVal[i].value > 0) {
                var ele = allPercentVal[i];
                total += parseFloat(ele.value);
            }
        }
        document.getElementById("total").innerHTML = total.toFixed(2) + '%';
        document.getElementById("left").innerHTML = (100 - total).toFixed(2) + '%';
    }

score 0 · Answer 8 · answered Jun 09 '14 at 18:54

0

You almost had it:

$(document).on("change", ".qty1", function() {
    var sum = 0;
    $(".qty1").each(function(){
        sum += +$(this).val();
    });
    $(".total").val(sum);
});

http://jsfiddle.net/DUKL6/1

answered Jun 09 '14 at 18:54

Adjit was faster :P please delete. – Jun 09 '14 at 18:57

score 0 · Answer 9 · answered Jun 09 '14 at 19:27

The problem with all of the above answers is that they fail if you enter something other than a number. If you want something that is more friendly to users, you should do some validation, perhaps even give some feedback when a value other than a number is entered.

$('body').on('change', '.qty1', function() {
    var total=0;
    $(".qty1").each(function(){
        quantity = parseInt($(this).val());
        if (!isNaN(quantity)) {
            total += quantity;
        }
    });
    $('.total').val('Total: '+total);
});

score 0 · Answer 10 · answered Dec 05 '22 at 11:41

<input type="text" class="price" placeholder="enter number one" />
<input type="text" class="price" placeholder="enter number two" />
<input type="text" class="price" placeholder="enter number three" />
<input type="text" class="price" placeholder="enter number four" />
<input type="text" id="total">
<script>
$(document).ready( function() {
    $(document).on("keyup", ".price", function() {
        var sum = 0;
        $(".price").each(function(){
            sum += +$(this).val();
        });
        $('#total').val(sum);
    });
});
</script>

Your answer could be improved by adding more information on what the code does and how it helps the OP. — Tyler2P, Dec 07 '22 at 16:23

jquery sum of multiple input fields if same class in one input

10 Answers10

Linked