Tomas Kruq Tomas Kruq - 3 years ago 151
jQuery Question

Change total sum when change quantity

I have such html

<td class="cart_price">
<p class="price_jq">11</p>
</td>
<td class="cart_quantity">
<input type='button' value='-' class='qtyminus' field='quantity' />
<input type='text' name='quantity' value='1' class='qty' />
<input type='button' value='+' class='qtyplus' field='quantity' />
</td>
<td class="cart_total">
<p class="cart_total_price"></p>
</td>


And such jquery scripts

$(document).ready(function(){
$('.qtyplus').click(function(e){
e.preventDefault();
fieldName = $(this).attr('field');
var currentVal = parseInt($('input[name='+fieldName+']').val());
if (!isNaN(currentVal)) {
$('input[name='+fieldName+']').val(currentVal + 1);
} else {
$('input[name='+fieldName+']').val(0);
}
});
$(".qtyminus").click(function(e) {
e.preventDefault();
fieldName = $(this).attr('field');
var currentVal = parseInt($('input[name='+fieldName+']').val());
if (!isNaN(currentVal) && currentVal > 0) {
$('input[name='+fieldName+']').val(currentVal - 1);
} else {
$('input[name='+fieldName+']').val(0);
}
});

var sum = 0;
var total = 0;
$('.price_jq').each(function () {
var price = $(this);
var count = price.closest('tr').find('.qty');
sum = (price.html() * count.val());
total = total + sum;
price.closest('tr').find('.cart_total_price').append(sum + "₴");
});
$('#total').append("<h3>£" + total + "</h3>");
});


I think i must use Jquery change, but i try and in result i have nothing. Maybe i miss something

I need when i update in td cart_quantity number, update my total price.

Answer Source

You should bind change event on quantity textbox

$(function() {
    $('.qtyplus').click(function(e){
        e.preventDefault();
        fieldName = $(this).attr('field');

        //Fetch qty in the current elements context and since you have used class selector use it.
        var qty = $(this).closest('tr').find('.qty');
        //var qty = $(this).closest('tr').find('input[name='+fieldName+']');

        var currentVal = parseInt(qty.val());
        if (!isNaN(currentVal)) {
            qty.val(currentVal + 1);
        } else {
            qty.val(0);
        }

        //Trigger change event
        qty.trigger('change');
    });

    $(".qtyminus").click(function(e) {
        e.preventDefault();
        fieldName = $(this).attr('field');

        //Fetch qty in the current elements context and since you have used class selector use it.
        var qty = $(this).closest('tr').find('.qty');
        //var qty = $(this).closest('tr').find('input[name='+fieldName+']');

        var currentVal = parseInt(qty.val());
        if (!isNaN(currentVal) && currentVal > 0) {
            qty.val(currentVal - 1);
        } else {
            qty.val(0);
        }

        //Trigger change event
        qty.trigger('change');
    });     

    //Bind the change event
    $(".qty").change(function() {
        var sum = 0;
        var total = 0;
        $('.price_jq').each(function () {
            var price = $(this);
            var count = price.closest('tr').find('.qty');
            sum = (price.html() * count.val());
            total = total + sum;
            price.closest('tr').find('.cart_total_price').html(sum + "₴"); //Also use html() instead of append()
        });
        $('#total').html("<h3>£" + total + "</h3>"); //Also use html() instead of append()

    }).change(); //trigger change event on page load
});

DEMO

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download