CODEWITHSUNDEEP
javascriptjquery
Pooja
Pooja

Reputation: 21

how to increase the price by increasing the quantity?

javascript page for quantity price, in this how can I increment the price as the quantity increases?

var CartPlusMinus = $('.cart-plus-minus');
CartPlusMinus.prepend('<div class="dec qtybutton">-</div>');
CartPlusMinus.append('<div class="inc qtybutton">+</div>');
$(".qtybutton").on("click", function() {
    var $button = $(this);
    var oldValue = $button.parent().find("input").val();
   
    if ($button.text() === "+") {
        var newVal = parseFloat(oldValue) + 1;
    } else {
        // Don't allow decrementing below zero
        if (oldValue > 1) {
            var newVal = parseFloat(oldValue) - 1;
        } else {
            newVal = 1;
        }
    }
    $button.parent().find("input").val(newVal);
});

html page , in this page I created the table and wanted to the price incremented with the quantity

<td class="product-name"><a href="#">Product Name</a></td>
<td class="product-price-cart"><span class="amount">$60.00</span></td>
<td class="product-quantity">
    <div class="cart-plus-minus">
        <input class="cart-plus-minus-box" type="text" name="qtybutton" value="1" />
    </div>
</td>
<td class="product-subtotal">$70.00</td>
<td class="product-wishlist-cart">
    <a href="#">add to cart</a>
</td>

This is how it looks in the image

Upvotes: 2

Views: 960

Answers (1)

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

You can add this to the end of your click event.

var unitPrice = +$button.closest("tr").find(".product-price-cart span").text().replace("$", "");
$button.closest('tr').find(".product-subtotal").text("$" + (unitPrice * newVal))

Demo

var CartPlusMinus = $('.cart-plus-minus');
CartPlusMinus.prepend('<div class="dec qtybutton">-</div>');
CartPlusMinus.append('<div class="inc qtybutton">+</div>');
$(".qtybutton").on("click", function() {
  var $button = $(this);
  var oldValue = $button.parent().find("input").val();

  if ($button.text() === "+") {
    var newVal = parseFloat(oldValue) + 1;
  } else {
    // Don't allow decrementing below zero
    if (oldValue > 1) {
      var newVal = parseFloat(oldValue) - 1;
    } else {
      newVal = 1;
    }
  }
  $button.parent().find("input").val(newVal);

  var unitPrice = +$button.closest("tr").find(".product-price-cart span").text().replace("$", "");
  $button.closest('tr').find(".product-subtotal").text("$" + (unitPrice * newVal))
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="product-name"><a href="#">Product Name</a></td>
    <td class="product-price-cart"><span class="amount">$60.00</span></td>
    <td class="product-quantity">
      <div class="cart-plus-minus">
        <input class="cart-plus-minus-box" type="text" name="qtybutton" value="1" />
      </div>
    </td>
    <td class="product-subtotal">$70.00</td>
    <td class="product-wishlist-cart">
      <a href="#">add to cart</a>
    </td>
  </tr>
  <tr>
    <td class="product-name"><a href="#">Product Name</a></td>
    <td class="product-price-cart"><span class="amount">$60.00</span></td>
    <td class="product-quantity">
      <div class="cart-plus-minus">
        <input class="cart-plus-minus-box" type="text" name="qtybutton" value="1" />
      </div>
    </td>
    <td class="product-subtotal">$70.00</td>
    <td class="product-wishlist-cart">
      <a href="#">add to cart</a>
    </td>
  </tr>
  <tr>
    <td class="product-name"><a href="#">Product Name</a></td>
    <td class="product-price-cart"><span class="amount">$60.00</span></td>
    <td class="product-quantity">
      <div class="cart-plus-minus">
        <input class="cart-plus-minus-box" type="text" name="qtybutton" value="1" />
      </div>
    </td>
    <td class="product-subtotal">$70.00</td>
    <td class="product-wishlist-cart">
      <a href="#">add to cart</a>
    </td>
  </tr>
</table>

Upvotes: 1

Related Questions