Applying the same calculation to different inputs using JQuery

Question

I am trying to write some simple HTML/jquery that will apply the same calculation to different fields.

I have simplified the problem down to the following HTML:

    <h1>Multiplication by line</h1>
<table>
  <tr>
    <td>Number 1</td>
    <td>Number 2</td>
    <td>Result</td>
  </tr>
  <!-- LINE ITEM START -->
  <div class="lineitem">
    <tr>
      <td>
        <input type="number" name="a" class="a" value="" />
      </td>
      <td>
        <input type="number" name="b" class="b" value="" />
      </td>
      <td>
        <div class="total">0 </div>
      </td>
    </tr>
  </div>
  <!-- LINE ITEM END -->
  <div class="lineitem">
    <tr>
      <td>
        <input type="number" name="a" class="a" value="" />
      </td>
      <td>
        <input type="number" name="b" class="b" value="" />
      </td>
      <td>
        <div class="total">0</div>
      </td>
    </tr>
  </div>

And Jquery:

$(document).ready(function() {

  $(".lineitem").each(function() {

    function compute() {

      var a = $('.a').val();
      var b = $('.b').val();
      var total = (a * b);

      $('.total').text(total);

    }

    $('.b, .a').change(compute);

  })
});

But this returns the same Result for each line based on the first line's data entry. I obviously want the user to put in different values in each line and get a different result per line. I tried using "each" and "$(this).children" as follows, but it didn't work:

$(document).ready(function() {


$(".lineitem").each(function () {

    function compute () {

        var a = $(this).children('.a').val();
        var b = $(this).children('.b').val();
        var total = (a*b);

        $(this).children('.total').text(total);

    }

        $('.b, .a').change(compute);

      })}); */

Here's a JSFiddle with everything.

Really hope someone can help! I've done a fair bit of searching but no joy on the basic question here...apologies if it's a repeat

each of tr is enclosed in a div?

techie_28
– techie_28

2016-04-05 07:23:39 +00:00
Commented Apr 5, 2016 at 7:23 — techie_28
– techie_28, Commented Apr 5, 2016 at 7:23

Rajshekar Reddy · Accepted Answer · 2016-04-05 07:19:39Z

1

Here is a working Fiddle

The mistake in your code was you were using class to play with the elements but you didn't restrict the calculations to happen only on the required line. So the fix is when ever there is a change in the input elements, find the closest tr in which it is wrapped , and now find the items within this tr and do the calculations.

changes to your function to restrict the calculations to specific line.

 function compute() {    
  var $parentTr = $(this).closest('tr'); // find the tr which wraps this element.
  var a = $parentTr.find('.a').val();// find .a within this tr
  var b = $parentTr.find('.b').val();// find .b within this tr
  var total = (a * b);

  $parentTr.find('.total').text(total);// change .total within this tr
}

edited Apr 5, 2016 at 7:19

answered Apr 5, 2016 at 7:13

Rajshekar Reddy

19.1k4 gold badges45 silver badges64 bronze badges

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

Comments

Pugazh · Accepted Answer · 2016-04-05 07:27:18Z

0

This might help.

$(document).ready(function() {
  $('.a, .b').change(function() {
    var tr = $(this).closest('tr');
    var a = parseInt(tr.find('.a').val()) || 0;
    var b = parseInt(tr.find('.b').val()) || 0;
    tr.find('.total').html(a + b);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Multiplication by line</h1>
<table>
  <tr>
    <td>Number 1</td>
    <td>Number 2</td>
    <td>Result</td>
  </tr>
  <!-- LINE ITEM START -->
  <div class="lineitem">
    <tr>
      <td>
        <input type="number" name="a" class="a" value="" />
      </td>
      <td>
        <input type="number" name="b" class="b" value="" />
      </td>
      <td>
        <div class="total">0</div>
      </td>
    </tr>
  </div>
  <!-- LINE ITEM END -->
  <div class="lineitem">
    <tr>
      <td>
        <input type="number" name="a" class="a" value="" />
      </td>
      <td>
        <input type="number" name="b" class="b" value="" />
      </td>
      <td>
        <div class="total">0</div>
      </td>
    </tr>
  </div>

answered Apr 5, 2016 at 7:27

Pugazh

9,5715 gold badges36 silver badges57 bronze badges

2 Comments

fungiblecommodity Over a year ago

Thanks very much, this has helped me quite a bit. The problem now is that my actual code is a bit more complicated, and I was hoping you could help me with one more issue. Basically I'm trying to create an energy usage calculator, so along with the basic line by line calculations there is a universal field which is used in the calculation (ie. your energy price). Your code has helped me enough that each line auto-updates when you enter new information, but I would also like it to auto-update everything (every total) when you change the "kwh" field Example: jsfiddle.net/n5pq14d1/1

fungiblecommodity Over a year ago

THANKS so much. All I had to do was change the kwh var to this and it worked perfectly: $('tr:not(:first)').each(function() { var a = parseInt($(this).find('#a').val()) || 0; var b = parseInt($(this).find('#b').val()) || 0; var c = parseInt($(this).find('#c').val()) || 0; var kwh = $('#kwh').val(); Really appreciate your help.

Collectives™ on Stack Overflow

Applying the same calculation to different inputs using JQuery

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related