Question 11089 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

sum total of values inside dynamic inputs with same class and Auto re-sum total of values when I change any input values or add / delete dynamic row – Jquery

$("#add-btn").click(function() {
  $("#dynamic").append('<tr>' +
    '<td class="td">' +
    '<input type="number" name="Debit" class="form-control Debit"/>' +
    '</td>' +
    '<td class = "td" >' +
    '<input type = "number" class = "form-control credit" />' +
    '</td>' +
    '<td class = "td2" >' +
    '<button type = "button" name = "add" class = "btn btn-danger remove-tr" > Remove </button>' +
    '</td>' +
    '</tr>');
});

$(document).on('click', '.remove-tr', function() {
  $(this).parents('tr').remove();
});

$(document).ready(function() {
  var total = 0;
  $('.Debit').each(function() {
    total += parseFloat($(this).val());
    $('.sum_of_Debit').val(total);
  });
  $(".Debit").on("change keyup", function() { 
    var sum = 0;
    sum += parseFloat($('.sum_of_ Debit').val());
    $('.sum_of_Debit').val(sum);
  });
});
$(document).ready(function() {
  var total = 0;
  $('.credit').each(function() {
    total += parseFloat($(this).val());
    $('.sum_of_credit').val(total);
  });
  $(".credit").on("change keyup", function() { 
    var sum = 0;
    sum += parseFloat($('.sum_of_credit').val());
    $('.sum_of_credit').val(sum);
  });
});
<table id="dynamic">
  <tr>
    <th class="wd-15p fontColor">credit</th>
    <th class="wd-15p fontColor">Debit</th>
  </tr>
  <tr>
    <td class="td"><input type="number" value="1000" class="form-control credit" /></td>
    <td class="td"><input type="number" value="1000"class="form-control Debit" /></td>
  </tr>
  <tr>
    <td class="td"><input type="number" value="1000" class="form-control credit" /></td>
    <td class="td"><input type="number" value="1000"  class="form-control Debit" /></td>
  </tr>
  <tr>
    <td class="td"><input type="number" value="1000" class="form-control credit" /></td>
    <td class="td"><input type="number" value="1000" class="form-control Debit" /></td>
    <td class="td2"><button type="button" name="add" id="add-btn" class="btn btn-success">Add More</button></td>
  </tr>
</table>

<input type="text" class="form-control sum_of_credit" readonly>
<input type="text" class="form-control sum_of_Debit" readonly>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

What is required ??? I want to get the total sum of the values inside the inputs in each of the following cases: When changing any value in the input, the total of values should be re-sum based on the values that were entered. And when adding a new dynamic row and writing new values in the new input this value should be added to the sum total, that is, the total should be recalculated and this new value that was entered should be included in the total sum. When deleting a dynamic row, the sum should be recalculated and the values that were in the deleted row should be excluded, i.e. the value of this row should be deleted from the grand total.

Tags:

2

Answers


  1. 0

    EDIT: Fixed the issue, event is added to all elements now

    $(document).ready(function() {
  reCalculate();

  $("#add-btn").click(function() {
    $("#dynamic").append('<tr>' +
      '<td class="td">' +
      '<input type="number" value= "1000" name="quantity" class="form-control quantity"/>' +
      '</td>' +
      '<td class = "td" >' +
      '<input type = "number" value = "1000" name = "amount" class = "form-control amount"/>' +
      '</td>' +
      '<td class = "td2" >' +
      '<button type = "button" name = "add" class = "btn btn-danger remove-tr" > Remove </button>' +
      '</td>' +
      '</tr>');
    reCalculate();
  });

  //Add on change/keyup to dinamically added elements with event delegation like this
  $('#dynamic').on('change keyup', '.quantity, .amount', function() {
    reCalculate();
  });

  $(document).on('click', '.remove-tr', function() {
    $(this).parents('tr').remove();
    reCalculate();
  });

  function reCalculate() {
    let totalQty = 0;
    let amountQty = 0;

    $('.quantity').each(function() {
      totalQty += parseFloat($(this).val() || 0);
      $('.sum_of_quantity').val(totalQty);
    });

    $('.amount').each(function() {
      amountQty += parseFloat($(this).val() || 0);
      $('.sum_of_amount').val(amountQty);
    });
  }
});
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<table id="dynamic">
  <tr>
    <th class="wd-15p fontColor">Quantity</th>
    <th class="wd-15p fontColor">Amount</th>
  </tr>
  <tr>
    <td class="td"><input type="number" value="1000" name="quantity[]" class="form-control quantity" /></td>
    <td class="td"><input type="number" value="1000" name="amount[]" class="form-control amount" /></td>
  </tr>
  <tr>
    <td class="td"><input type="number" value="1000" name="quantity[]" class="form-control quantity" /></td>
    <td class="td"><input type="number" value="1000" name="amount[]" class="form-control amount" /></td>
  </tr>
  <tr>
    <td class="td"><input type="number" value="1000" name="quantity[]" class="form-control quantity" /></td>
    <td class="td"><input type="number" value="1000" name="amount[]" class="form-control amount" /></td>
    <td class="td2"><button type="button" name="add" id="add-btn" class="btn btn-success">Add More</button></td>
  </tr>
</table>
<table>
  <tr>
    <td><input type="text" class="form-control sum_of_quantity" readonly> </td>
    <td><input type="text" class="form-control sum_of_amount" readonly></td>
  </tr>
</table>
    Login or Signup to reply.
  2. 0

    add this to your code :

    $("body").on('keyup change', '.credit, .Debit', function (){
reCalculate();
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search