CODEWITHSUNDEEP
javascriptphpjqueryhtml
Kaushal Shah
Kaushal Shah

Reputation: 33

Getting 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>

Upvotes: 0

Views: 127

Answers (3)

Vixed
Vixed

Reputation: 3509

$(function() {
  $(".quantity").change(function(){
    $(this).closest('tr').find('.subTotal').val(parseInt($(this).val()) * parseInt($(this).closest('tr').find('.price').val()));
    });
});

/*
BEFORE YOU EDITED THE QUESTION
$(function() {
  $(".quantity").change(function(){
    $(this).nextAll(".subTotal:first").val(parseInt($(this).val()) * parseInt($(this).nextAll('.price:first').val()));
    });
});
*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<table>
<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>
</table>

<!--
BEFORE YOU EDITED THE QUESTION
<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">
-->

Upvotes: 2

Pranav C Balan
Pranav C Balan

Reputation: 115212

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">

Upvotes: 2

RPaul
RPaul

Reputation: 66

If you are only allowed to use classes, you might try wrapping each pair of inputs in a span, who have classes/ids going from 1 to 3. Then, in the onchange function, you can get the parent of this and loop through all the .price elements until you have the element with the same parentnode as this. Now knowing what element you want to affect, you can now easily get/set text in said element.

Upvotes: 0

Related Questions