Kaushal Shah Kaushal Shah - 3 months ago 9
HTML Question

Geeting issue on calculating amount on input type number

I have write jquery code with use of classes,
the problem is each product gets incremented even i changed for just one product.
I want to do if user increment one field than the amount will calculat in his parent text-box, but actually when i increment for one product the amount increment for both product.



<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function() {
$(".quantity").change(function(){
$(".subTotal").val(parseInt($(this).val()) * parseInt($(".price").val()));
});

});

</script>
</head>

<body>
<tr>
<td><input type="text" class="price" value="1000" readonly></td>
<td><input type="number" min="0" class="quantity" value="1"></td>
<td><input type="text" class="subTotal" value="1000"></td>
</tr>
<tr>
<td><input type="text" class="price" value="1000" readonly></td>
<td><input type="number" min="0" class="quantity" value="1"></td>
<td><input type="text" class="subTotal" value="1000"></td>
</tr>

</body>

</html>




Answer

Get input elements based on event fired element. Use nextAll() and first() method to get the inputs.

$(document).ready(function() {
  $(".quantity").change(function() {
    // cache the `$(this)` jQuery object
    var $this = $(this);
    $this
      // get all siblings next to it with class `subTotal`
      .nextAll(".subTotal")
      // get the adjucent one
      // .nextAll(".subTotal").first() ==> .nextAll(".subTotal:first")
      .first()
      // updates its value
      .val(
        // multiply with adjucent pric input 
        ($this.val() * $this.nextAll(".price").first().val()) || 0
      );
  });
});

$(document).ready(function() {
  $(".quantity").change(function() {
    var $this = $(this);
    $this.nextAll(".subTotal").first()
      .val(($this.val() * $this.nextAll(".price").first().val()) || 0);
  });
});
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

<input type="number" min="0" class="quantity" value="1">

<input type="text" class="price" value="1000" readonly>
<input type="text" class="subTotal" value="1000">

<input type="number" min="0" class="quantity" value="1">

<input type="text" class="price" value="1000" readonly>
<input type="text" class="subTotal" value="1000">


Or use nextUntil() method to get all elements up to the next quantity input and filter element using filter() method.

$(document).ready(function() {
  $(".quantity").change(function() {
    // get all elements before the next quantity field
    var $ele = $(this).nextUntil('.quantity');
    $ele
    // filter out `.subTotal` from it
      .filter(".subTotal")
      // updates its value
      .val(
        // multiply with adjucent pricr input 
        (this.value * $ele.filter(".price").val()) || 0
      );
  });
});

$(document).ready(function() {
  $(".quantity").change(function() {
    var $ele = $(this).nextUntil('.quantity');
    $ele.filter(".subTotal")
      .val((this.value * $ele.filter(".price").val()) || 0);
  });
});
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

<input type="number" min="0" class="quantity" value="1">

<input type="text" class="price" value="1000" readonly>
<input type="text" class="subTotal" value="1000">

<input type="number" min="0" class="quantity" value="1">

<input type="text" class="price" value="1000" readonly>
<input type="text" class="subTotal" value="1000">

Comments