Reputation: 164
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
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