如何对动态创建的输入字段中的值求和

Question

I have created Dynamic Add / Remove fields. Everything is working perfectly. I want sum of values from Amount field to be displayed on real time basis using JavaScript. I have tried but am unable to do. I am not much familiar with JavaScript.

Following is code:

 var i = 0; jQuery(document).ready(function($) { //fadeout selected item and remove $(document).on('click', '#remove-allocation-fields', function(event) { event.preventDefault(); $(this).parent().fadeOut(300, function() { $(this).parent().empty(); return false; }); }); var rows = '<div class="all-allocation-fields"><div class="row"><div class="col-5"><div class="form-group"><input type="text" class="form-control" name="allocate_items[]"></div></div><div class="col-5"><div class="form-group"><input type="text" class="form-control code" id="code" name="allocate_amount[]"></div></div><div class="col-2"><button type="button" class="btn btn-danger" id="remove-allocation-fields">Remove</button></div></div></div>'; //add input $('#add-allocation-fields').click(function() { $(rows).fadeIn("slow").appendTo('#fund-allocation-fields'); i++; return false; }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="card"> <div class="card-header text-center"> <b>Allocation of Funds</b> </div> <div class="card-body"> <div class="row"> <div class="col-5"><label><b>Allocation Items</b> <b style="color:#FF0000;">*</b></label></div> <div class="col-5"><label><b>Amount</b> <b style="color:#FF0000;">*</b></label></div> <div class="col-2"></div> </div> <div class="row"> <div class="col-5"> <div class="form-group"> <input type="text" class="form-control" name="allocate_items[]"> </div> </div> <div class="col-5"> <div class="form-group"> <input type="text" class="form-control code" id="code" name="allocate_amount[]"> </div> </div> <div class="col-2"> <button type="button" class="btn btn-success" id="add-allocation-fields">Add</button> </div> </div> <div id="fund-allocation-fields"> </div> <small class="form-text text-muted"><i>Total amount must be equal to the goal amount.</i></small> <div id="sum"></div> </div> </div> 

Answer 1

You can use add keyup event listener and calculate sum as:

function calculateSum() {     //Add a calculateSum function
  var sum = 0;
  $("input[name='allocate_amount[]']").each(function() {
    sum += +this.value || 0;
  });
  $("#sum").text(sum);
}


//fadeout selected item and remove
$(document).on('click', '#remove-allocation-fields', function(event) {
  event.preventDefault();
  $(this).parent().fadeOut(300, function() {
    $(this).parent().empty();
    calculateSum();          //Call calculateSum to update the sum valaue
    return false;
  });
});


$("body").on("keyup", "input[name='allocate_amount[]']", calculateSum); //update when keyup

Demo:

 var i = 0; jQuery(document).ready(function($) { function calculateSum() { var sum = 0; $("input[name='allocate_amount[]']").each(function() { sum += +this.value || 0; }); $("#sum").text(sum); } //fadeout selected item and remove $(document).on('click', '#remove-allocation-fields', function(event) { event.preventDefault(); $(this).parent().fadeOut(300, function() { $(this).parent().empty(); calculateSum(); return false; }); }); var rows = '<div class="all-allocation-fields"><div class="row"><div class="col-5"><div class="form-group"><input type="text" class="form-control" name="allocate_items[]"></div></div><div class="col-5"><div class="form-group"><input type="text" class="form-control code" id="code" name="allocate_amount[]"></div></div><div class="col-2"><button type="button" class="btn btn-danger" id="remove-allocation-fields">Remove</button></div></div></div>'; //add input $('#add-allocation-fields').click(function() { $(rows).fadeIn("slow").appendTo('#fund-allocation-fields'); i++; return false; }); $("body").on("keyup", "input[name='allocate_amount[]']", calculateSum); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="card"> <div class="card-header text-center"> <b>Allocation of Funds</b> </div> <div class="card-body"> <div class="row"> <div class="col-5"><label><b>Allocation Items</b> <b style="color:#FF0000;">*</b></label></div> <div class="col-5"><label><b>Amount</b> <b style="color:#FF0000;">*</b></label></div> <div class="col-2"></div> </div> <div class="row"> <div class="col-5"> <div class="form-group"> <input type="text" class="form-control" name="allocate_items[]"> </div> </div> <div class="col-5"> <div class="form-group"> <input type="text" class="form-control code" id="code" name="allocate_amount[]"> </div> </div> <div class="col-2"> <button type="button" class="btn btn-success" id="add-allocation-fields">Add</button> </div> </div> <div id="fund-allocation-fields"> </div> <small class="form-text text-muted"><i>Total amount must be equal to the goal amount.</i></small> <div id="sum"></div> </div> </div> 

Answer 2

I think you can do it with this code:

function calcAmount(){
   var amount = 0;
   $('input[name="allocate_amount[]"]').each(function(){
        amount = amount +  $(this).val();
    });
    return amount;
}

jQuery(document).ready(function($) {
    $("input[name="allocate_amount[]]").blur(function(){
        $("#sum").html(calcAmount());
    });
});

Answer 3

Okay, I try to update your code: and it works fine:

main changes: - assign ids to input fields - make changes in function

have a look to jsfiddle

https://jsfiddle.net/dupinderdhiman/ygvphmxq/31/

Main changes:

  var sum = eval($('#value1').val()) + eval($('#value2').val());
          $('#sum').text(sum);

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
      $("p").click(function(){
        $(this).hide();
      });
    });
    </script>
    </head>
    <body>

    <div class="card">
      <div class="card-header text-center">
        <b>Allocation of Funds</b>
      </div>
      <div class="card-body">

      <div class="row">

        <div class="col-5"><label><b>Allocation Items</b> <b style="color:#FF0000;">*</b></label></div>

        <div class="col-5"><label><b>Amount</b> <b style="color:#FF0000;">*</b></label></div>

        <div class="col-2"></div>

      </div>

      <div class="row">

        <div class="col-5">

      <div class="form-group">
        <input type="text" class="form-control" id='value1' name="allocate_items[]">
      </div>

        </div>

        <div class="col-5">

      <div class="form-group">
        <input type="text" class="form-control code" id='value2' name="allocate_amount[]">
      </div>

        </div>

        <div class="col-2">

        <button type="button" class="btn btn-success" id="add-allocation-fields">Add</button>

        </div>

      </div>

        <div id="fund-allocation-fields">

        </div>

            <small class="form-text text-muted"><i>Total amount must be equal to the goal amount. <span id="sum"></span></i></small>


      </div>
    </div>

    <script type="text/javascript">

      var i = 0;

      jQuery(document).ready(function($) {

        //fadeout selected item and remove
        $(document).on('click', '#remove-allocation-fields', function(event) {

          event.preventDefault();
          $(this).parent().fadeOut(300, function() {
            $(this).parent().empty();
            return false;

          });

        });

        var rows = '<div class="all-allocation-fields"><div class="row"><div class="col-5"><div class="form-group"><input type="text" class="form-control" name="allocate_items[]"></div></div><div class="col-5"><div class="form-group"><input type="text" class="form-control code" id="code" name="allocate_amount[]"></div></div><div class="col-2"><button type="button" class="btn btn-danger" id="remove-allocation-fields">Remove</button></div></div></div>';

        //add input
        $('#add-allocation-fields').click(function() {
    debugger;
          $(rows).fadeIn("slow").appendTo('#fund-allocation-fields');
          i++;
          var sum = eval($('#value1').val()) + eval($('#value2').val());
          $('#sum').text(sum);
          return false;

        });

      });

    </script>


    </body>
    </html>