如何计算输入字段值并在删除字段时将其分配给另一个字段

时间:2017-03-15 06:55:04

标签: javascript jquery html repeat calculated-field

我正在尝试计算一组重复字段的总量。

这是我的标记

<label for="name" class="p-label-required">Amount <span style="color: red"> (Numbers only)</span></label>
<input type="text" id="amount" name="amount[]" placeholder="Amount" required="required" class="form-control inputChangeVal reqF" data-js-input-type="number" /><br/>

<div class="add_another_st"></div>
<button class="btn add_another_st_btn" style="margin-bottom: 25px;">+</button>
<hr style="margin-top: 0;">
Total Amount:
<input type="text" class="totalAmount" id="updatedTotalAmount" style="font-size: 20px; font-weight: bold; margin-bottom: 25px; border: 0;" readonly />

这是我的jQuery来计算amount字段上发生事件时的总数。 它会正确计算总数并将其分配给total amount字段。

/* calculating and updating the total amount */
    function updateTotal() {
        var price = 0;

        jQuery(".inputChangeVal").each(function() {
            var t = parseFloat(jQuery(this).val(), 10);
            price = price + t;
        });

        var total = price.toFixed(2);
        jQuery(".totalAmount").val(total);
        console.log('updateTotal Runs');
    }
    jQuery(document).on("change, keyup", ".inputChangeVal", updateTotal);

但是我希望在删除金额字段时再次计算金额,并且无论何时移除金额字段都不起作用/更新总金额。

我为此创建的代码位于js fiddle

如何在删除字段时再次更新总数?

2 个答案:

答案 0 :(得分:1)

在向上滑动updateTotal()元素时,您需要调用wrapper函数。

jQuery(this).parent('div').slideUp(1000, function() {
    jQuery(this).remove();
    x--;
    updateTotal(); // updating total
});

<强> Working fiddle

答案 1 :(得分:0)

jQuery(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
        debugger;
        e.preventDefault();
        jQuery(this).parent('div').slideUp(1000, function() {
                jQuery(this).remove();

                x--;
        /*running again calculation 0f the total amount and while removing an amount */
        var price = 0;
        jQuery(".inputChangeVal").each(function() {
                var t = parseFloat(jQuery(this).val(), 10);
                price = price + t;
        });
        var total = price.toFixed(2);
        jQuery(".totalAmount").val(total);
        console.log('updateTotal Runs while removing');
         });
});