如何使用jquery获取输入字段的总和

Question

这是我动态添加输入字段的脚本，在这部分，字段的最大值为 10。

$(document).ready(function() {
  var max_fields = 10;
  var wrapper = $(".container1");
  var add_button = $(".add_form_field");

  var x = 1;
  $(add_button).click(function(e) {
    e.preventDefault();
    if (x < max_fields) {
      x++;
      var form_colis = '<div><input type="text" placeholder="Poids" name="poids[]"/> <input type="text" placeholder="Longueur" name="longueurs[]"/> <input type="text" placeholder="Largeur" name="largeurs[]"/> <input type="text" placeholder="Hauteur" name="hauteurs[]"/><a href="#" class="delete">Delete</a></div>';
      //$(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="delete">Delete</a></div>'); //add input box
      $(wrapper).append(form_colis); //add input box
    } else {
      alert('You Reached the limits')
    }
  });

  $(wrapper).on("click", ".delete", function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container1">
  <button class="add_form_field">Add New Field &nbsp; 
              <span style="font-size:16px; font-weight:bold;">+ </span>
            </button>


  <div>
    <input type="text" placeholder="Poids" name="poids[]">
    <input type="text" placeholder="Longueur" name="longueurs[]">
    <input type="text" placeholder="Largeur" name="largeurs[]">
    <input type="text" placeholder="Hauteur" name="hauteurs[]">
  </div>
</div>

现在，我想根据先前字段名称的总和添加字段。例如。对于名为 poids[] 的字段，如果总和大于 100，则用户不能添加字段集，否则，他可以。

希望你明白我的意思。

提前谢谢你

Answer 1

这是一个可以计算的版本。我也缩短了代码 - 请注意 CSS 更改和添加到项目 div 的类

我假设您只想测试 poid > 100 ？

$(function() {
  var max_fields = 10;
  var $wrapper = $(".container1");
  var add_button = $(".add_form_field");

  $(add_button).click(function(e) {
    e.preventDefault();
    const vals = $("> .item input[name^=poids]",$wrapper).map(function() { return +this.value }).get()
    const val = vals.length === 0 ? 0 : vals.reduce((a, b) => a + b);
    if ($("> .item",$wrapper).length < max_fields && val < 100) {
      const $form_colis = $(".item").first().clone();
      $form_colis.find("input").val("");
      $wrapper.append($form_colis); //add input box
    } else {
      alert('You Reached the limits')
    }
  });

  $wrapper.on("click", ".delete", function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
  })
});

.container1 .item:first-of-type .delete {
  display: none;
}

.delete { text-decoration: none; color: red; }

.add_form_field { white-space: nowrap; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="add_form_field">Add New Field ✚</button>
<div class="container1">
  <div class="item">
    <input type="text" placeholder="Poids" name="poids[]">
    <input type="text" placeholder="Longueur" name="longueurs[]">
    <input type="text" placeholder="Largeur" name="largeurs[]">
    <input type="text" placeholder="Hauteur" name="hauteurs[]">
    <a href="#" class="delete">Delete</a>
  </div>
</div>

Answer 2

如果我正确理解了您的问题，请检查此解决方案，由我修改。如果所有字段的总和正好小于 100，则添加新字段，否则不添加。有必要吗？

$(document).ready(function() {  
  
  var max_fields = 10;
  var wrapper = $(".container1");
  var add_button = $(".add_form_field");

  var x = 1;
  $(add_button).click(function(e) {
    e.preventDefault();
    
  $('.inputs:last-of-type').each(function(){
    var sum_inputs = 0;
    $(this).find('input').each(function(){
      sum_inputs += parseInt($(this).val());
    });
          
    if (x < max_fields && sum_inputs < '100') {
      x++;
      var form_colis = '<div class="inputs"><input type="text" placeholder="Poids" name="poids[]"/> <input type="text" placeholder="Longueur" name="longueurs[]"/> <input type="text" placeholder="Largeur" name="largeurs[]"/> <input type="text" placeholder="Hauteur" name="hauteurs[]"/><a href="#" class="delete">Delete</a></div>';
      //$(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="delete">Delete</a></div>'); //add input box
      $(wrapper).append(form_colis); //add input box
    } else {
      alert('You Reached the limits')
    }

    });
  });

  $(wrapper).on("click", ".delete", function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  }) 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container1">
  <button class="add_form_field">Add New Field &nbsp; 
              <span style="font-size:16px; font-weight:bold;">+ </span>
            </button>


  <div class="inputs">
    <input type="text" placeholder="Poids" name="poids[]">
    <input type="text" placeholder="Longueur" name="longueurs[]">
    <input type="text" placeholder="Largeur" name="largeurs[]">
    <input type="text" placeholder="Hauteur" name="hauteurs[]">
  </div>
</div>