我有一个包含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转换为文本框。
答案 0 :(得分: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()" />