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

Adding the values in multiple textboxes to a single textbox in php

本文关键字:文本 php 单个 添加      更新时间:2023-09-26

我有一个表单,其中包含一个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到文本框。

您应该做的是给输入提供通用类名,然后在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/