Question

我有一个jquery代码来创建动态文本框。这是我的jquery代码：

    var rowNum = 0;
    function addRow(frm) {
    rowNum ++;
    var row = '<p id="rowNum'+rowNum+'">Tanggal: <input type="text" class="datepick" name="qty[]" id="date'+rowNum+'" value="'+frm.add_qty.value+'" readonly="readonly"> Harga: <input type="text" name="name[]" value="'+frm.add_name.value+'" readonly="readonly"> <input type="button" value="Remove" onclick="removeRow('+rowNum+');"></p>';
    jQuery('#itemRows').append(row);
    frm.add_qty.value = '';
    frm.add_name.value = '';
    }

    function removeRow(rnum) {
    jQuery('#rowNum'+rnum).remove();
    }

这是我的表单代码：

   <div class="form-group">
   <label>Price Given</label>
      <div id="itemRows">                                
      <label class="strong">Date: <input type="text" name="add_qty" class="datepick" id="date[]" /> 
      Price: <input type="text" name="add_name" /> 
        <input onclick="addRow(this.form);" type="button" value="Add" />
     </div>
    </div>
<div class="form-group">
    <label>Total</label>
      <input type="text" class="form-control" name="total" id="total" />
    <button type="button" name="calculate">Calculate</button>
</div>

我的问题是，如何创建我的文本框'total'可以自动或可以计算（通过按钮计算）文本框'add_name'（价格）的总和？我希望有一种最简单/最简单的方法来计算。

Answer 1

请尝试此代码

 $(document).ready(function(){
        $("input[type='text'][name='add_name']").change(function(){
            var sum = 0
            $("input[type='text'][name='add_name']").each(function(){
                sum = sum + parseInt($(this).val());
            });
            $("input[type='text'][name='total']").val(sum);
        });
    });

DEMO

Answer 2

尝试这个。

$('[name="calculate"]').on('click', function() {
    var sum = 0;
    $('[name="add_name"]').each(function() {
        sum += $(this).val();
    })
    $('#total').val(sum);
})

Javascript / Jquery计算动态文本框表单

2 个答案: