[英]Auto Sum Input Values and Display Using Javascript
Basically I want to update an Input field with the sum of all above Input Fields.基本上我想用上述所有输入字段的总和更新一个输入字段。
This is a part of HTML within tag:这是标签内 HTML 的一部分:
<tr>
<td width="20%">Admission Fee:</td>
<td width="80%"><input onchange="findTotal()" type="text" class="input_box" name="admission_fee" id="fee" size="5" value="" maxlength="6" oninput="this.value = this.value.replace(/[^0-9]/, \'\');"></td>
</tr>
<tr>
<td width="20%">Annual Fee:</td>
<td width="80%"><input onchange="findTotal()" type="text" class="input_box" name="annual_fee" id="fee" size="5" value="" maxlength="6" oninput="this.value = this.value.replace(/[^0-9]/, \'\');"></td>
</tr>
<tr>
<td width="20%">Paper Money Fee:</td>
<td width="80%"><input onchange="findTotal()" type="text" class="input_box" name="paper_money_fee" id="fee" size="5" value="" maxlength="6" oninput="this.value = this.value.replace(/[^0-9]/, \'\');"></td>
</tr>
<tr>
<td width="20%">Monthly Fee:</td>
<td width="80%"><input onchange="findTotal()" type="text" class="input_box" name="monthly_fee" id="fee" size="5" value="" maxlength="6" oninput="this.value = this.value.replace(/[^0-9]/, \'\');"></td>
</tr>
<tr>
<td width="20%">Remaining Balance:</td>
<td width="80%"><input onchange="findTotal()" type="text" class="input_box" name="remaining_balance" id="fee" size="5" value="" maxlength="6" oninput="this.value = this.value.replace(/[^0-9]/, \'\');"></td>
</tr>
<tr>
<td class="school_trow2" width="20%">Total Fee:</td>
<td class="school_trow2" style="padding: 3px 0;" width="80%"><input type="text" class="input_box" style="background: #8CDFFF; border: 1px solid #006991; color: #000;" name="total_fee" id="total_fee" size="5" value="" disabled></td>
</tr>
And this is the Javascript I am Using:这是我正在使用的 Javascript:
<script type="text/javascript">
function findTotal()
{
var arr = document.getElementById(\'fee\');
var tot=0;
for(var i=0;i<arr.length;i++)
{
if(parseInt(arr[i].value))
{
tot += parseInt(arr[i].value);
}
}
document.getElementById(\'total_fee\').value = tot;
}
</script>
Any help would be appreciated.任何帮助,将不胜感激。
This is what I've come up with.这就是我想出的。
<input type='text'
then checking for numbers using regex.<input type='text'
然后使用正则表达式检查数字。 A better approach would be to just use <input type='number'
<input type='number'
maxlength
does not work on type='number'
, I have used max
to handle 6 digit limit.maxlength
不适用于type='number'
,我使用max
来处理 6 位数限制。 function findTotal() { const fees = document.querySelectorAll(".fee"); const total = document.querySelector("#total_fee"); let sum = 0; fees.forEach(fee => { if(fee.valueAsNumber){ sum += fee.valueAsNumber; } }); total.value = sum; }
<tr> <td width="20%">Admission Fee:</td> <td width="80%"><input onchange="findTotal()" type="number" class="input_box fee" name="admission_fee" value="" min='0' max='999999'></td> </tr> <tr> <td width="20%">Annual Fee:</td> <td width="80%"><input onchange="findTotal()" type="number" class="input_box fee" name="annual_fee" value="" min='0' max='999999'></td> </tr> <tr> <td width="20%">Paper Money Fee:</td> <td width="80%"><input onchange="findTotal()" type="number" class="input_box fee" name="paper_money_fee" value="" min='0' max='999999'></td> </tr> <tr> <td width="20%">Monthly Fee:</td> <td width="80%"><input onchange="findTotal()" type="number" class="input_box fee" name="monthly_fee" value="" min='0' max='999999'></td> </tr> <tr> <td width="20%">Remaining Balance:</td> <td width="80%"><input onchange="findTotal()" type="number" class="input_box fee" name="remaining_balance" value="" min='0' max='999999'></td> </tr> <tr> <td class="school_trow2" width="20%">Total Fee:</td> <td class="school_trow2" style="padding: 3px 0;" width="80%"><input type="text" class="input_box" style="background: #8CDFFF; border: 1px solid #006991; color: #000;" name="total_fee" id="total_fee" size="5" value="" disabled></td> </tr>
Never use the same id
for more than one element.永远不要对多个元素使用相同的
id
。 This defeats the whole purpose.这违背了整个目的。 :)
:)
Change the class
name on the total input field to something other than input_box
.将总输入字段上的
class
名称更改为input_box
以外的名称。 That way you can select all other <input>
s by using document.querySelectorAll('.input_box')
.这样您就可以使用
document.querySelectorAll('.input_box')
select 所有其他<input>
。 Than traverse them as you did with arr
and sum the values, etc.不如像使用
arr
那样遍历它们并对值求和等。
function findTotal()
{
var arr = document.querySelectorAll('.input_box');
var tot=0;
for(var i=0;i<arr.length;i++)
{
if(parseInt(arr[i].value))
{
tot += parseInt(arr[i].value);
}
}
document.getElementById(\'total_fee\').value = tot;
}
Documentation on document.querySelectorAll()
有关
document.querySelectorAll()
的文档
Do what Philip and Ahsan Khan said about the HTML and using classes instead of ids for that.按照 Philip 和 Ahsan Khan 所说的 HTML 做,并为此使用类而不是 id。
Then use map
to parse each value into a integer (or use parseFloat
if you want float).然后使用
map
将每个值解析为 integer(如果需要浮点数,则使用parseFloat
)。 Finally, use reduce
to sum everything.最后,使用
reduce
对所有内容求和。
const findTotal = () => {
const fees = [...document.querySelectorAll('.fee')].map(x => parseInt(x.value));
const total = fees.reduce((a, b) => a + b);
document.getElementById('total_fee').value = total;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.