Javascript/jQuery getting total sum from multiple inputs using on change

Question

I need to sum a total of all values from a group of inputs. Yes I have done some research on Stack and tried implementing some of them. So far to note some of the answers in this post (How get total sum from input box values using Javascript?) came the closest, but my total is miscalculating and I am not sure where my error is. I have tried multiple ways and I DO have a JSFiddle set up.

I use external elements to increment and decrement the input values. I trigger the on change. I am consoling out my total, and the total on the first increment gets the correct number "1", but any subsequent ones it updates the total by a series of 4 then more. Even then decrementing it is just incrementing the value.

The JSFiddle is here

https://jsfiddle.net/a6vnpgwL/3/

HTML

<ul class="QuantityList">
<li>
<input value="0" data-requires-login="True" />
<span class="plus IncDecButton">+</span>
<span class="minus IncDecButton">-</span>
</li>
<li>
<input value="0" data-requires-login="True" />
<span class="plus IncDecButton">+</span>
<span class="minus IncDecButton">-</span>
</li>
<li>
<input value="0" data-requires-login="True" />
 <span class="plus IncDecButton">+</span>
 <span class="minus IncDecButton">-</span>
</li>
<li>
<input value="0" data-requires-login="True" />
<span class="plus IncDecButton">+</span>
<span class="minus IncDecButton">-</span>
</li>
</ul>

JS

var totalCount = 0;

$(".IncDecButton").click(function (event)
{

    event.preventDefault();
    var $button = $(this);
    var oldValue = $button.parent().find("input").val();
    var newVal = oldValue;
    
    
    
    //Hide .decButton for oldValue
    if (newVal == 0 || oldValue == 0)
    {
        $button.parent().find(".minus").hide();
        oldValue = 0
    }
    else
    {
        $button.parent().find(".minus").show();
    }
    if ($button.text() == "+")
    {
        var newVal = parseFloat(oldValue) + 1;
        //totalCount += parseInt($(this).parent().find('input').val(), 10);
    }
    else
    {
        // Don't allow decrementing below zero
        if (oldValue >= 1)
        {
            var newVal = parseFloat(oldValue) - 1;
          //  totalCount -= parseInt($(this).parent().find('input').val(), 10);
        }
    }
    //Hide .decButton for newVal
    if (newVal == 0)
    {
        $button.parent().find(".minus").hide();
    }
    else
    {
        $button.parent().find(".minus").show();
    }
    //added to stop at a max quantity - 2-6-2020 - CM
    if(newVal == $button.parent().find("input").attr("max")){
         $button.parent().find(".plus").hide();
    }else{
        $button.parent().find(".plus").show();
    }
    
    $button.parent().find("input").val(newVal);


$button.parent().find('input').each(function() {
        $(this).on("change", function(){
            calculateSum();
        });
    });

$button.parent().find('input').change();




}); //End button click


function calculateSum($elem){
//$('.QuantityList input[data-requires-login="True"]').on("change", function () {
$('.QuantityList input[data-requires-login="True"]').each(function () {
 console.log("current input value: " + $(this).val());
 totalCount += parseInt($(this).val(), 10);
});
console.log("total count " + totalCount);
}
//});

Any help is much appreciated.

I just briefly looked at your code: why are you adding the change listener to the input elements each time the IncDecButton is clicked? Just check how many times the calculateSum is fired after each click on the button. — mrak, May 24 '21 at 21:43

score 1 · Answer 1 · answered May 24 '21 at 21:34

You need to reset totalCount each time.

As a tip, anytime your output get progressively larger over time, the first thing to look for is a failure to reset a total within whatever method is used to add inputs.

function calculateSum($elem){
totalCount=0;
//$('.QuantityList input[data-requires-login="True"]').on("change", function () {
$('.QuantityList input[data-requires-login="True"]').each(function () {
 console.log("current input value: " + $(this).val());
 totalCount += parseInt($(this).val(), 10);
});
console.log("total count " + totalCount);
}
//});

Thank you for the explanation. Probably shouldn't have made it global I guess — ClosDesign, May 24 '21 at 22:02

score 1 · Accepted Answer · answered May 24 '21 at 21:34

1

Just reset totalCount each time you run the calculate function

totalCount=0;
$('.QuantityList input[data-requires-login="True"]').each(function () {
 console.log("current input value: " + $(this).val());
 totalCount += parseInt($(this).val(), 10);
});

answered May 24 '21 at 21:34

Kinglish

23,358
3
22
43

Javascript/jQuery getting total sum from multiple inputs using on change

2 Answers2