Adding two input boxes values with multiple input fields not working in jQuery
I have website in which I have a form, where there is a input fields like below. As you can see I'm trying to add two input boxes to get the values of the third, however this is working only with first set of input box, for the rest its coming faulty or the values of first set. How can I fix this?
$(document).ready(function() {
$(".value2").keyup(function() {
var val1 = +$(".value1").val();
var val2 = +$(".value2").val();
$(".result").val(val1 * val2);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<input name="quantity[]" type="text" class="form-control value1">
<input name="rate[]" type="text" class="form-control value2">
<input name="amount[]" type="text" class="form-control result">
<input name="quantity[]" type="text" class="form-control value1">
<input name="rate[]" type="text" class="form-control value2">
<input name="amount[]" type="text" class="form-control result">
<input name="quantity[]" type="text" class="form-control value1">
<input name="rate[]" type="text" class="form-control value2">
<input name="amount[]" type="text" class="form-control result">Wrap in containers and delegate from the parent div of the element you update
The data here is relative to the field you update
NOTE: Add a main container with an ID and wrap each set in divs too
$(document).ready(function() {
$("#container").on("input",".form-control", function() {
const $parent = $(this).closest("div.item")
var val1 = +$(".value1", $parent).val();
var val2 = +$(".value2", $parent).val();
$(".result", $parent).val(val1 * val2);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="container">
<div class="item">
<input name="quantity[]" type="text" class="form-control value1">
<input name="rate[]" type="text" class="form-control value2">
<input name="amount[]" type="text" class="form-control result">
</div>
<div class="item">
<input name="quantity[]" type="text" class="form-control value1">
<input name="rate[]" type="text" class="form-control value2">
<input name="amount[]" type="text" class="form-control result">
</div>
<div class="item">
<input name="quantity[]" type="text" class="form-control value1">
<input name="rate[]" type="text" class="form-control value2">
<input name="amount[]" type="text" class="form-control result">
</div>
</div>The issue is because when you call val(), amongst other jQuery methods, on a jQuery object holding a collection of elements, it only evaluates against the first element in that collection.
To fix your issue you can use jQuery's DOM traversal methods to retrieve the related elements in the DOM to the one which raised the event. In this case, prev() and next():
jQuery($ => {
$(".value2").on('input', e => {
let $val2 = $(e.target);
let val1 = +$val2.prev(".value1").val() || 0;
let val2 = +$val2.val() || 0;
$val2.next(".result").val(val1 * val2);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<input name="quantity[]" type="text" class="form-control value1">
<input name="rate[]" type="text" class="form-control value2">
<input name="amount[]" type="text" class="form-control result">
<input name="quantity[]" type="text" class="form-control value1">
<input name="rate[]" type="text" class="form-control value2">
<input name="amount[]" type="text" class="form-control result">
<input name="quantity[]" type="text" class="form-control value1">
<input name="rate[]" type="text" class="form-control value2">
<input name="amount[]" type="text" class="form-control result">Note in the above example the use of input over keypress so that the logic also works when the user adds content to the input using the mouse. Also note the use of || 0 to coerce a NaN value to a 0.