CODEWITHSUNDEEP
javascriptjqueryhtml
shubham shah
shubham shah

Reputation: 164

Total not getting in 2nd row

I have a one dropdown and 2 textbox. I have a more then 1 row of same fields. When i do total it is done in 1st row but not getting total in 2nd row.

var counter = 1;
counter++;
$(document).on('change, focusout', '.price,.qty', function() {
  var oproductname = $(this).val();
  var productQty = parseInt($('#productqty' + counter).val());
  var productPrice = parseFloat($('#orderedproduct' + counter).find(':selected').data('price'));
  var totalAmount = productQty * productPrice;

  $('#orderammount' + counter).val(totalAmount);


});
<select name="orderedproduct" id="orderedproduct2" class="price">
              <option>Select Ordered Product</option>
              <option value="1" data-price="45.23">incarprot</option>
              <option value="2" data-price="50.00">incalcy</option>
 </select>

<input type="text" name="productqty" id="productqty2" class="gui-input" placeholder="Quantity">

<input type="text" name="orderammount" id="orderammount2" class="gui-input qty" disable placeholder="Total Amount">

<select name="orderedproduct" id="orderedproduct3" class="price">
              <option>Select Ordered Product</option>
              <option value="1" data-price="45.23">incarprot</option>
              <option value="2" data-price="50.00">incalcy</option>
 </select>

<input type="text" name="productqty" id="productqty3" class="gui-input" placeholder="Quantity">

<input type="text" name="orderammount" id="orderammount3" class="gui-input qty" disable placeholder="Total Amount">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Upvotes: 0

Views: 42

Answers (1)

Ankit Agarwal
Ankit Agarwal

Reputation: 30729

You have error in your counter variable, the way it is used, counter is never changed to 3 and the Total Amount is not shown for second row. So, for making it to work correctly, you can add a new attribute property in the <select> dropdown called row and then get this row value in counter which can be then used in the id selector.

$(document).on('change, blur', '.price,.txtQuantity', function(){ 
debugger
    var oproductname = $(this).val();
    var counter = $(this).attr('row');
    var productQty = parseInt($('#productqty'+counter).val());
    var productPrice = parseFloat($('#orderedproduct'+counter).find(':selected').data('price'));
    var totalAmount = productQty * productPrice ; 
    
     $('#orderammount'+counter).val(totalAmount );
     

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <select name="orderedproduct" id="orderedproduct2" class="price" row='2'>
              <option>Select Ordered Product</option>
              <option value="1" data-price="45.23">incarprot</option>
              <option value="2" data-price="50.00">incalcy</option>
 </select>  
 
 <input type="text" name="productqty" id="productqty2" class="gui-input txtQuantity" placeholder="Quantity" row='2'>
 
 <input type="text" name="orderammount" id="orderammount2" class="gui-input qty" disable placeholder="Total Amount">
 
 <select name="orderedproduct" id="orderedproduct3" class="price" row='3'>
              <option>Select Ordered Product</option>
              <option value="1" data-price="45.23">incarprot</option>
              <option value="2" data-price="50.00">incalcy</option>
 </select>  
 
 <input type="text" name="productqty" id="productqty3" class="gui-input txtQuantity" placeholder="Quantity" row='3'>
 
 <input type="text" name="orderammount" id="orderammount3" class="gui-input qty" disable placeholder="Total Amount">

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Upvotes: 1

Related Questions