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

Question

我有一个包含div的表单，其中包含两个文本框，一个用于服务类型，另一个用于金额和一个添加更多按钮。当我点击添加更多按钮。每个onclick都会重复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

你应该做的是给输入公共类名，然后在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/