CODEWITHSUNDEEP
javascriptphpjquery
Ali Raza
Ali Raza

Reputation: 489

calculate each row total price as the quantity increase or decrese in shoping cart. (quantity * price)

I want to calculate each item total price as the quantity increases or decreases but, when I increase the quantity the price of first row is placed in all other rows.

Here is Html code

<form method="post" action="n/GetPostData.php">
  <?php 
    $total=0; $all_cart_products=$shoping_cart->allShopingcartValue($id); 
    while ($row=mysqli_fetch_assoc($all_cart_products)) { ?>
  <!-- Shopin Cart -->
  <tr class="cart_item">
    <td class="product-remove">
      <a id="" class="remove"  href="<?php echo $row['shoping_cart_id']; ?>">×</a>
    </td>
    <input id="p_id" type="hidden" name="shoping_cart_id" value="<?php echo $row['shoping_cart_id'] ?>">
    <td class="product-thumbnail">
      <a href="single-product.html"><img width="180" height="180" src="assets/images/products/2.jpg" alt=""></a>
      <!-- <input type="hidden" name="image" value=""> -->
    </td>
    <td data-title="Product" class="product-name">
      <a href="single-product.html"><?php echo $row['name']; ?></a>
      <input type="hidden" name="product_id[]" value="<?php echo $row['product_id']; ?>">
    </td>
    <td data-title="Price" class="product-price">
      <span class="amount">$<?php echo $row['price']; ?></span>
      <input type="hidden" name="product_price[]" value="<?php echo $row['price']; ?>" class="p_price">
    </td>
    <td data-title="Quantity" class="product-quantity">
      <input type="number" name="product_quantity[]" class="input-text qty text p_quantity" title="Qty" value="<?php echo $row['quantity']; ?>" max="29" min="0" step="1">
    </td>
    <td data-title="Total" class="product-subtotal">
      <span class="amount p_total_s">$<?php echo $row['total']; ?></span>
      <input type="hidden" name="product_total[]" value="<?php echo $row['total']; ?>" class="p_total">
    </td>
  </tr>
  <tr>
    <td class="actions" colspan="6">
      <input type="submit" value="Update Cart" name="update_cart" class="button">
      <span></span>
    </td>
  </tr>
  </tbody>

  </table>
</form>

Here is javascript jquery code

$('.p_quantity').change(function() {
    var price = $('.p_price').val();
    var quantity = $('.p_quantity').val();
    $('.p_total').text(price * quantity);
});

Upvotes: 0

Views: 1140

Answers (2)

fdomn-m
fdomn-m

Reputation: 28611

You need to find the other elements relative to your input

When you use $(".p_price") it finds all of the elements with class=p_price.

When you use .val() on the collection it gives you the value of the first.
When you use .text() on the collection, it sets the text in each of the elements.

So $(".p_total").text($(".p_price").val()) will set all of the p_totals to the value of the first p_price. (and extrapolate to quantity)

By using $(this).closest(".cart_item") you find the "closest parent" that is a .cart_item.

Then using cartitem.find(".p_price") (etc) you get the p_price that's within the same cart_item as the p_quantity that triggers the event.

Giving:

$('.p_quantity').change(function() {
    var cartitem = $(this).closest(".cart_item");
    var price = cartitem.find('.p_price').val();
    //var quantity = cartitem.find('.p_quantity').val();
    var quantity = $(this).val();  // same as above, no need to re-find this
    cartitem.find('.p_total').text(price * quantity);
});

The last row should probably be:

    cartitem.find('.p_total_s').text(price * quantity);
    cartitem.find('.p_total').val(price * quantity);

as p_total is a hidden input, so should use .val()

Upvotes: 1

Adams Hales
Adams Hales

Reputation: 119

Just replace the line $('.p_total').text(price * quantity); with:

$('.p_total').val(price * quantity);

Use val instead of text.

Upvotes: 0

Related Questions