Cole Lewis Cole Lewis - 13 days ago 7
jQuery Question

JQuery total quantity of input

I am trying to add the total quantity as well as price, cannot seem to get the quantity part to work. I am calculating the total cubic yards as well as the price for each cubic yard. Thank You in advance.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
</head>

<body>


<div class="page">
<ul>
<li>Cubic Yards<span><input type="text" name="Quantity" value="" class="quantity"></span></li>
<li>Price <span><input type="text" name="Price" value="25.50" class="price"></span></li>
<li> Total <span><input type="text" name="Total" value="0.00" class="total"></span></li>
</ul>

<div id="foo"></div>
<input type="submit" value="ADD MORE" class="button" id="click">
<ul>
<li>Total Cubic Yards:<input id="cubicYards" type="text" name="cubicYards" value="0"></li>
<li>Total Price:<input id="amount" type="text" name="totalPrice" value="0.00"></li>
</ul>
</div>

<script>
$(".page").on("change keyup keydown paste propertychange bind mouseover", function(){
calculateSum();
calculateQuantity();
});

// add fields
$( "#click" ).click(function() {
$( "#foo" ).append(
'<ul>' + '\n\r' +
'<li>Cubic Yards <span><input type="text" name="Quantity" value="" class="quantity"></span></li>' + '\n\r' +
'<li>Price <span><input type="text" name="Price" value="" class="price"></span></li>' + '\n\r' +
'<li>Total <span><input type="text" name="Total" value="0.00" class="total"></span></li>' + '\n\r' +
'</ul>'
);

$(".total").each(function() {
$(this).keyup(function(){
calculateSum();

});
});

$(".quantity").each(function() {
$(this).keyup(function(){
calculateSum();

});
});

});

// function
function calculateSum() {
var sum = 0;
$(".total").each(function() {
if(!isNaN(this.value) && this.value.length!=0) {

var quantity = $(this).closest("ul").find("input.quantity:text").val();
var price = $(this).closest("ul").find("input.price:text").val();

var subTot = (quantity * price);

$(this).val(subTot.toFixed(2));

sum += parseFloat(subTot.toFixed(2));
}
});

$('#amount').val(sum.toFixed(2));
}




// function
function calculateQuantity() {
var sum = 0;
$(".quantity").each(function() {
if(!isNaN(this.value) && this.value.length!=0) {

var quantity = $(this).closest("ul").find("input.quantity:text").val();


var subTot = (quantity);

$(this).val(subTot.toFixed(2));

sum += parseFloat(subTot.toFixed(2));
}
});

$('#cubicYards').val(sum.toFixed(2));
}
</script>


</body>
</html>

Answer

Your var quantity selector seems redundant. Am I right to assume you want to sum up all your .quantity fields? If so, I don't understand why you'd have to traverse to the nearest ul first.

I did a simplified version of what I think you're trying to achieve: JS Bin

Basically I just simplified your calculateQuantity function to this:

function calculateQuantity() {
    var sum = 0;

    $(".quantity").each(function() {
        var q = parseFloat($(this).val());

        if(!isNaN(q)) {
            $(this).val(q.toFixed(2));
            sum += q;
        }
    });

    $('#cubicYards').val(sum.toFixed(2));
};

See if that works for you.