previous row is not computing/updating from appended rows using jquery

Question

found this question which solve my problem before and adopt the answer base to my needs, dynamic forms multiple input fields calculate

But I noticed when I am updating the amount of previous rows, the total amount is not updating. Can you help me how to solve this? thank you in advance!

 $(document).ready(function() {
  var i = 0;
  $("#quantity-" + i).change(function() {
    upd_art(i)
  });
  $("#price-" + i).change(function() {
    upd_art(i)
  });


  $('#add').click(function() {
    i++;
    $('#articles').append('<tr id="row' + i + '"><td><input type="number" value=0 id="quantity-' + i + '" name="quantity[]" placeholder="quantity" class="form-control name_list" /></td> <td><input type="number" id="price-' + i + '" name="price[]" value=0  placeholder="price" class="form-control name_list" /></td> <td><input type="number" id="total-' + i + '" name="total[]" placeholder="total" class="form-control name_list" readonly /></td> <td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">X</button></td></tr>');

    $("#quantity-" + i).change(function() {
      upd_art(i)
    });
    $("#price-" + i).change(function() {
      upd_art(i)
    });


  });


  $(document).on('click', '.btn_remove', function() {
    var button_id = $(this).attr("id");
    $('#row' + button_id + '').remove();
  });

  $('#submit').click(function() {
    alert($('#add_name').serialize()); //alerts all values           
    $.ajax({
      url: "wwwdb.php",
      method: "POST",
      data: $('#add_name').serialize(),
      success: function(data) {
        $('#add_name')[0].reset();
      }
    });
  });

  function upd_art(i) {
    var qty = $('#quantity-' + i).val();
    var price = $('#price-' + i).val();
    var totNumber = (qty * price);
    var tot = totNumber.toFixed(2);
    $('#total-' + i).val(tot);
  }



  //  setInterval(upd_art, 1000);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <br />
    <br />
    <div class="form-group">
      <form name="add_name" id="add_name">
        <div class="table-responsive">
          <table class="table table-bordered" id="articles">
            <tr class="rrjeshta">

              <td><input value=0 type="number" id="quantity-0" name="quantity[]" placeholder="quantity" class="form-control name_list" /></td>
              <td><input value=0 type="number" id="price-0" name="price[]" placeholder="price" class="form-control name_list" /></td>

              <td><input type="number" id="total-0" name="total[]" placeholder="total" class="form-control name_list" readonly /></td>
              <td><button type="button" name="add" id="add" class="btn btn-success">Add new</button></td>
            </tr>
          </table>
          <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
        </div>
      </form>
    </div>
  </div>

Oliver Trampleasure · Accepted Answer · 2019-02-23 12:38:32Z

Your issue is that you are re-using i in your update function, which is a global variable. This means that it will only work for the latest row as each time your change event fire it updates the row which matches the current value of i (i.e. the last). You need to pass the index of the specific row to the function, rather than the current total row count.

You can do this by taking it from your existing input id (i.e. removing the common text like quantity-) but I would advise adding an attribute for to each of the inputs, which matches to the index of the row.

You can also simplify your click events by adding common classes to inputs that would trigger a re-calculation.

Demo

// Be careful when using global variables
var rowCount = 0;

// Minor changes here
// Added "for='i'" for input
// Added .quantity, .price and .total to the relevant inputs
$('#add').click(function() {

  rowCount++;

  $('#articles').append('<tr id="row' + rowCount + '"><td><input type="number" value=0 id="quantity-' + rowCount + '" name="quantity[]" placeholder="quantity" class="form-control name_list quantity" for="' + rowCount + '" /></td> <td><input type="number" id="price-' + rowCount + '" name="price[]" value=0  placeholder="price" class="form-control name_list price" for="' + rowCount + '" /></td> <td><input type="number" id="total-' + rowCount + '" name="total[]" placeholder="total" class="form-control name_list total" for="' + rowCount + '" readonly /></td> <td><button type="button" name="remove" id="' + rowCount + '" class="btn btn-danger btn_remove">X</button></td></tr>');

  // No need to add individual events here

});


// Add a generic event listener for any change on quantity or price classed inputs
$("#articles").on('change', 'input.quantity, input.price', function() {
  upd_art($(this).attr("for"));
});

// No changes
$(document).on('change', 'input', function() {
  var button_id = $(this).attr("id");
  $('#row' + button_id + '').remove();
});

// No changes
$('#submit').click(function() {
  alert($('#add_name').serialize()); //alerts all values           
  $.ajax({
    url: "wwwdb.php",
    method: "POST",
    data: $('#add_name').serialize(),
    success: function(data) {
      $('#add_name')[0].reset();
    }
  });
});


// Using a new index rather than your global variable i
function upd_art(ind) {
  
  var qty = $('#quantity-' + ind).val();
  var price = $('#price-' + ind).val();
  var totNumber = (qty * price);
  var tot = totNumber.toFixed(2);
  $('#total-' + ind).val(tot);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <br />
    <br />
    <div class="form-group">
      <form name="add_name" id="add_name">
        <div class="table-responsive">
          <table class="table table-bordered" id="articles">
            <tr class="rrjeshta">

              <td><input value=0 type="number" id="quantity-0" name="quantity[]" placeholder="quantity" class="form-control name_list quantity" for="0"/></td>
              <td><input value=0 type="number" id="price-0" name="price[]" placeholder="price" class="form-control name_list price" for="0" /></td>

              <td><input type="number" id="total-0" name="total[]" placeholder="total" class="form-control name_list total" for="0" readonly /></td>
              <td><button type="button" name="add" id="add" class="btn btn-success">Add new</button></td>
            </tr>
          </table>
          <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
        </div>
      </form>
    </div>
  </div>

Collectives™ on Stack Overflow

previous row is not computing/updating from appended rows using jquery

1 Answer 1

Demo

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Demo

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related