Change total sum when change quantity

Question

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 1

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

Answer 2

You need to have a change event handler like

$(document).ready(function() {
  $('.qtyplus').click(function(e) {
    e.preventDefault();
    $(this).siblings(':text').val(function(i, val) {
      return +val + 1 || 0;
    }).change();
  });
  $(".qtyminus").click(function(e) {
    e.preventDefault();
    $(this).siblings(':text').val(function(i, val) {
      return +val - 1 || 0;
    }).change();
  });

  var sum = 0;
  $('.qty').change(function() {
    var $tr = $(this).closest('tr'),
      $total = $tr.find('.cart_total_price'),
      total = +$tr.find('.price_jq').text() * +this.value || 0;
    sum = sum - (parseInt($total.text()) || 0) + total;
    $total.text(total + '₴');
    $('#total').html("<h3>£" + sum + "</h3>");
  }).change();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <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>
  </tr>
  <tr>
    <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>
  </tr>
</table>
<div id="total"></div>