javascript how to calculate values in dynamically added fields with multiple rows

Question

I had one row with three fields: received, issue, balance

<input type="text" name="rcv" class="rcv"/>
<input type="text" name="issue" class="issue"/>
<input type="text" name="blnc" class="balance"/>

I calculated the balance for each row easily, but how do I calculate more than one row?

Each row has receive , issue and balance fields.

How do I calculate each row's balance field?

I tried like this for multiple row but it's not working:

    $('.t_rtn, .t_rcv').each(function(){
    $(this).on('blur',function(){
      var totalRcv = $('.t_rcv').val();
      var totalRtn = $('.t_rtn').val();
      // console.log( $('t_rtn').next('.consume').val() );
      $('t_rtn').next('.consume').val(totalRcv-totalRtn);
    });

Answer 1

you need to parse The value of textbox as it returns string not int

 $('.t_rtn, .t_rcv').each(function(){
    $(this).on('blur',function(){
      var totalRcv = parseInt($('.t_rcv').val()) || 0;
      var totalRtn = parseInt($('.t_rtn').val()) || 0;
      // console.log( $('t_rtn').next('.consume').val() );
      $('t_rtn').next('.consume').val(totalRcv-totalRtn);
    });

Answer 2

If your code is being run on document.ready it will only be applied to elements which exist at that point.

You'd be better with :

$(document).on('blur','.t_rtn, .t_rcv',function(){
  var val = $(this).val();

  ...
      });

Answer 3

try this..

 $(document).on('blur','.receive, .return', function()
 {
    var $row = $(this).closest(".row");
    var totalRcv = parseInt($row.find('.receive').val()) || 0;
    var totalRtn = parseInt($row.find('.return').val()) || 0;
    $row.find('.balance').val(totalRcv - totalRtn);
 });

Answer 4

I think problem is because you are subtracting 2 Strings. .val returns an String.

Convert them in number before subtracting like bellow

$('t_rtn').next('.consume').val((+totalRcv)-(+totalRtn));

Answer 5

In addition to parsing the string values into integers you also need to use the correct selectors for those input elements. t_rtn is not the right class name, for example. And if doing this in rows you will want to grab the correct element from the current row (you already did this correctly for the consume field)

Fixed html (Example.. I chose to use div with class name = row ):

<div class='row'>
<input type="text" name="rcv" class="receive"/>
<input type="text" name="issue" class="return"/>
<input type="text" name="blnc" class="balance"/>
</div>
<div class='row'>
<input type="text" name="rcv" class="receive"/>
<input type="text" name="issue" class="return"/>
<input type="text" name="blnc" class="balance"/>
</div>
<div class='row'>
<input type="text" name="rcv" class="receive"/>
<input type="text" name="issue" class="return"/>
<input type="text" name="blnc" class="balance"/>
</div>

Fixed code:

 $(document).on('blur','.receive, .return', function()
 {
    var $row = $(this).closest(".row");
    var totalRcv = parseInt($row.find('.receive').val()) || 0;
    var totalRtn = parseInt($row.find('.return').val()) || 0;
    $row.find('.balance').val(totalRcv - totalRtn);
 });

I took the liberty of fixing some inconsistencies with the class names used. I tried to match them up to the variables for totalRcv and totalRtn so that now the balance shows as receipt minus return. If the user enters non-numeric data, it defaults the value to 0 before calculating.

Example fiddle here: http://jsfiddle.net/cp81g4nf/1/