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

Question

$("#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.

Please see How to Ask, then revise your post title to ask a clear, specific question. It should not simply list your requirements. Also, your script seems to have some awkward nesting. The second click function and the ready function are inside the first click function. A good editor and proper formatting make this apparent. — isherwood
– isherwood, Commented Feb 23, 2023 at 16:24
They are not actually inside the the 1st click function but yeah the formatting is pretty messy and makes the code kind of unreadable, I fixed his format to make it work if someone can accept my edit — Chris G
– Chris G, Commented Feb 23, 2023 at 16:27
The question still lacks one thing and that is your attempt to solve the problem, where are you stuck? what error msg do you get? — Chris G
– Chris G, Commented Feb 23, 2023 at 16:34
Don't just edit your code without trying your snippet and messing everything up $('.sum_of_amount' ').val(sum).toFixed(2); this is wrong after your edit — Chris G
– Chris G, Commented Feb 23, 2023 at 16:37
@ChrisG Thank you for your comments, modifications and improvements to my code. I apologize because I am new to the platform and do not know the laws of writing code. And What is required??? I wont to get the total sum of the values inside the inputs in each of the following cases: when changing the values of the inputs, when adding a new dynamic row, when deleting a dynamic row . In all of the following cases, the total sum of the input values should be obtained — Andandydongola
– Andandydongola, Commented Feb 23, 2023 at 16:57

marc_s · Accepted Answer · 2023-05-06 08:01:44Z

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

sallyntod · Accepted Answer · 2023-02-24 08:40:49Z

0

add this to your code :

$("body").on('keyup change', '.credit, .Debit', function (){
reCalculate();
});

answered Feb 24, 2023 at 8:40

sallyntod

177 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related