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

Question

我创建了“动态添加/删除”字段。一切工作正常。我希望使用JavaScript实时显示金额字段中的值的总和。我已经尝试过，但是做不到。我对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() {

    $(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

您可以使用添加keyup事件侦听器并将总和计算为：

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

演示：

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

我认为您可以使用以下代码来做到这一点：

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

好的，我尝试更新您的代码：并且效果很好：

主要变化： -为输入字段分配ID -更改功能

看看jsfiddle

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

主要更改：

  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>