[英]Getting values from multiple text boxes on keypress in javascript
我的表单中有8个不同的文本字段，这是客户账单的一部分。 这里是
<input type="text" name="txtcustomduty" class="form-control" placeholder="Customs Duty">
<input type="text" name="txtlcltranspotation" class="form-control" placeholder="Local Transportation">
......
up to 8
由此，我想显示所有值的总和作为总值
<span>Total extra cost:1678</span>
更改任何文本字段的值时都应该更改它，那么如何使用keyup事件完美地做到这一点？
更新
我已将onkeyup事件附加到每个文本字段
`onkeyup="findSum(this.value)"'
我正在使用一个全局数组来存储输入值var extras=[]
function findSum(value)
{
if(value!=''){
console.log(value);
extras.push(parseInt(value));
if(extras!='')
$('#extratotal').text(extras.reduce(getSum));
else $('#extratotal').text('0');
}
}
但是效果不好
您可以使用传递给键侦听器的事件的target.value属性-这将为您提供输入字段的值：
document.addEventListener('input', 'keyup', function(e) {
// use e.target.value here
}
只需将其添加到正在运行的总计中，然后更新侦听器功能内的文本即可。
您可以在keyup事件中获得所有具有form-control类的输入的keyup如下所示：
$('input.form-control').on('keyup',function() { var total = 0; $('input.form-control').each(function(){ if (this.value == ''){ total += parseInt(0); }else{ total += parseInt(this.value); } }); $('#total').val(total); });
input { display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" name="txtcustomduty" class="form-control" placeholder="Customs Duty" > <input type="text" name="txtlcltranspotation" class="form-control" placeholder="Local Transportation" > <input type="text" name="other" class="form-control" placeholder="other" > Total extra cost: <input id="total" >
我已经用JavaScript而不是jQuery进行了定义。 试试吧..
<script>
function sum()
{
var sum = 0;
var array_field = document.getElementsByClassName('sum_field');
for(var i=0; i<array_field.length; i++)
{
var value = Number(array_field[i].value);
if (!isNaN(value)) sum += value;
}
document.getElementById("total").innerHTML = sum;
}
</script>
<body>
<input type="text" name="txtcustomduty" class="form-control sum_field" placeholder="Customs Duty" onkeyup="sum()">
<input type="text" name="txtlcltranspotation" class="form-control sum_field" placeholder="Local Transportation" onkeyup="sum()">
<p>Total:<span id="total">0</span></p>
</body>
Javascript - 从多个 select 框中获取文本而不是值
[英]Javascript - get text instead of values from multiple select boxes
获取表单复选框的多个值并将其放在JavaScript中的单独变量中。
[英]Getting multiple values of form check boxes and placing them in separate variables in JavaScript.
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.