javascript - 将多个文本框中的值添加到php中的单个文本框中

Question

我有一个表单，其中包含一个 div，其中包含两个文本框，一个用于服务类型，另一个用于金额和一个添加更多按钮。当我点击添加更多按钮时。每次点击时 div 都会被复制。现在我希望将每个金额文本框中的值相加，并应显示在另一个文本框总计中。我创建了一个 JS 函数来显示 onkeyup 上金额文本框中输入的值。但我没有得到任何答复。

这是我迄今为止尝试过的代码..

HTML

<table>
    <tr id="service">
        <td>
            <span>Service Type:</span>
        </td>
        <td>
            <input type="text" name="servicetype" id="servicetype" />
        </td>
        <td>
            <span>Amount:</span>
        </td>
        <td>
            <input type="text" name="amount" id="amount" onkeyup="onkeyupsum()"/>
        </td>
    </tr>
    <tr>
        <td>
            <input type="button" id="addmore" onclick="duplicate()" value="Add More"/>
        </td>
    </tr>
    <tr>
        <td><h4 style="text-align:left; padding:0,300px,300px,0;">Total Amount</h4></td>
        <td><input type="text" name="tamt" id="tamt"></td>
    </tr>
</table> 

Javascript:

<script>
    var i = 0;
    function duplicate() 
    {                    // function to clone a div    
        var original = document.getElementById('service');
        var rows = original.parentNode.rows;
        var i = rows.length - 1;
        var clone = original.cloneNode(true); // "deep" clone
        clone.id = "duplic" + (i); // there can only be one element with an ID
        original.parentNode.insertBefore(clone, rows[i]);
    }
    function onkeyupsum()
    { // calculate sum and show in textbox
        var sum = 0;
        var amount1= document.getElementById('amount').value;
        sum += parseFloat(amount1);
        document.submitform.tamt.setAttribute("value",sum );
    }
</script>

谁能告诉我如何从重复的 div 到文本框获取文本框值。

Answer 1

您应该做的是为输入提供公共(public)类名称，然后在 onkeyupsum 中选择所有输入并在循环中计算总和:

function onkeyupsum() { // calculate sum and show in textbox
    var sum = 0,
        amount = document.querySelectorAll('.amount'), i;
    for (i = 0; i < amount.length; i++) {
        sum += parseFloat(amount[i].value || 0);
    }
    document.submitform.tamt.value = sum;
}

输入将如下所示:

<input type="text" name="amount" class="amount" onkeyup="onkeyupsum()" />

演示:http://jsfiddle.net/mf7wqkq2/