Adding two input boxes values with multiple input fields not working in jQuery

Question

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

mplungjan · Accepted Answer · 2022-01-13 10:12:02Z

1

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>

edited Jan 13, 2022 at 10:12

answered Jan 13, 2022 at 9:51

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

love lio Over a year ago

i tried this, i am not getting any value in final box

mplungjan Over a year ago

As you can see it works here. You have likely not copied the complete solution (ID on the container, each set in separate containers)

love lio Over a year ago

can we make that closest div as a class?

mplungjan Over a year ago

Sure. Give it a class and do closest(".classNameOfContainer")

love lio Over a year ago

its not working

|

Rory McCrossan · Accepted Answer · 2022-01-13 09:49:43Z

1

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.

answered Jan 13, 2022 at 9:49

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

5 Comments

love lio Over a year ago

i tried this but i am not getting any value in final input box

Rory McCrossan Over a year ago

In this case I would assume that either you've not included jQuery.js in the page (as I had to add it to the example) or the HTML you provided in the question is not the same as in your local environment, as the example work fine. Could you please edit the question with the correct HTML.

love lio Over a year ago

sandbox.onlinephpfunctions.com/code/… this is the complete code

Rory McCrossan Over a year ago

Are you sure that's the right code? That has no inputs with the names provided in the question, and none of them are in columns...?

love lio Over a year ago

yes, it has actually an add more button, when u click on add more button it will keep on adding fields

Collectives™ on Stack Overflow

Adding two input boxes values with multiple input fields not working in jQuery

2 Answers 2

7 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related