計算動態添加的表單元素的總和

Question

我在下面的表單中，當用戶單擊“添加新按鈕”時，使用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 ）的所有總和和折扣的總和，並將其顯示在#total_sum ， #total_discount和#total_net 。

我相信我需要一個可以獲取所有.form-row的東西，只要表單發生變化（或者每隔1秒？）就會觸發一次，然后遍歷它們以計算各自的總和，並計算總和和循環結束時的折扣。 如果是PHP，我可以做到這一點，但是我對jQuery或Javascript還是很陌生，所以我不知道應該從哪里着手。

[Adddd]

在上面的解釋中我沒有提到的一件事是unit []的默認值為1，並且首先使用AJAX自動附加了price []，然后用戶可以更改該值。

我的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的change函數。 因此，您可能需要在更新后手動觸發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()); }); }); });