Question

我有下面的表单，当用户点击Add New按钮时，使用jQuery动态添加每个.form-row。

我的html表单（简化）

<div id="total_sum">
  <!-- here will show up total amount, which is sum of unit[] * price[] - discount[] of all below form-rows -->
</div>

<div id="total_discount">
  <!-- here will show up total discount amount, which is sum of discount[] of all below form-rows -->
</div>

<div id="total_net">
  <!-- here will show up net amount, which is total_sum - total_discount -->
</div>

<form id="form" method="POST" action="">

  <div class="form-row">
    <select name="item[]">
      <option value="item-id-1">Item 1</option>
      <option value="item-id-2">Item 2</option>
      <option value="item-id-3">Item 3</option>
    </select>
    <input type="number" class="unit" value="1" name="unit[]" />
    <input type="number" class="price" name="price[]" />
    <input type="number" class="discount" name="discount[]" />
    <input type="number" class=name="sum[]" />
  </div>

  <div class="form-row">
    <select name="item[]">
      <option value="item-id-1">Item 1</option>
      <option value="item-id-2">Item 2</option>
      <option value="item-id-3">Item 3</option>
    </select>
    <input type="number" class="unit" value="1" name="unit[]" />
    <input type="number" class="price" name="price[]" />
    <input type="number" class="discount" name="discount[]" />
    <input type="number" class="sum" name="sum[]" />
  </div>

  <!-- and users can dynamically add as many form-rows as they want -->

  <div class="form-row">
    <select name="item[]">
      <option value="item-id-1">Item 1</option>
      <option value="item-id-2">Item 2</option>
      <option value="item-id-3">Item 3</option>
    </select>
    <input type="number" class="unit" value="1" name="unit[]" />
    <input type="number" class="price" name="price[]" />
    <input type="number" class="discount" name="discount[]" />
    <input type="number" class="sum" name="sum[]" />
  </div>

</form>

我想要实现的目标是双重折叠：

计算每一行的总和（.form-row）并显示每行的总和（在sum[]字段中）
计算所有行（所有.form-row s）的所有金额和折扣的总和，并在#total_sum，#total_discount和#total_net中显示。

我相信我需要能得到所有.form-row s的东西，只要表格发生变化（或者每1秒，或许？）就会触发，并循环通过它们来计算各自的和，并计算循环结束时的总和和折扣总数。我可以这样做，如果它是PHP，但我是jQuery或Javascript的新手，所以我不知道在哪里先查看。

[Adddd]

我在上面的解释中没有提到的一点是unit []的默认值为1，price []首先使用AJAX自动附加，然后用户可以更改值。

我的AJAX可在用户选择项目时自动检索价格。

<script>
jQuery(document).ready(function($) {
    /*  Get Item Price and Item Currency */
    $('#form').on('change', '.item_id', function(){
        var this$ = $(this);
        var $item_id    =  this$.val();

        var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';

        // call ajax for item price (returns 0 if item has no price)
        $.ajax({
            url: ajaxurl,
            data:' action=get_item_price_by_id&item_id='+$item_id,
            type:'GET',
            success:function(results) {
                this$.parent().parent().find('.price').empty();
                this$.parent().parent().find('.price').val(results);
            }
        });
    });
});
</script>

感谢Manish Jangir Blogadditic的建议，我得到了以下代码：

<script>
jQuery(document).ready(function($) {
// Calculate sub-sums on any form changes
    $("#form").change(function() {
        var sum = 0;
        $('.form-row').each(function() {
          sum = Number( $(this).find('unit').val()) * Number( $(this).find('price').val() );
          alert( sum );
        });
    });
});
</script>

但是，它在手动更改表单时有效，但在ajax自动附加价格时无效。

还有其他建议吗？

Answer 1

如果你的按钮#form带有最后添加的动态元素，那么你可以试试这个，因为.change或.on不能使用动态附加的html元素。 jQuery已经给出了$（document）.on事件来做到这一点。

jQuery(document).ready(function($) {
// Calculate sub-sums on any form changes
    $(document).on('click','#form',function() {
        var sum = 0;
        $('.form-row').each(function() {
          sum += Number( $(this).find('.unit').val()) * Number( $(this).find('.price').val() );
          alert( sum );
        });
    });
});

Answer 2

您必须创建委派事件。

jQuery(document).ready(function() {
// Calculate sub-sums on any form changes
    $("#form").on('change','.price, .unit',function() {
        var sum = 0;
        $('.form-row').each(function() {
          sum = Number( $(this).find('.unit').val()) * Number( $(this).find('.price').val() );
          alert( sum );
        });
    });
});

Answer 3

Javascript更改的值不会触发onchange事件。此规则也适用于JQuery的更改功能。因此，您可能需要在更新后手动触发onchange事件。使用Jquery，您可以使用.trigger（），请点击此处：http://api.jquery.com/trigger/

Answer 4

尝试使用此代码可以解决您的问题。

jQuery(document).ready(function() {
// Calculate sub-sums on any form changes
    $("#form").on('change',function() {
        var sum = 0;
        $('.form-row').each(function() {
          sum +=  parseInt($(this).find('.unit').val()) +  parseInt($(this).find('.price').val());
        });
    });
});

计算动态添加的表单元素的总和

4 个答案: