Question

我的表单中有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');
    }
}

但它效果不佳

Answer 1

您可以使用传递给键侦听器的事件的target.value属性 - 这将为您提供输入字段的值：

document.addEventListener('input', 'keyup', function(e) {
    // use e.target.value here
}

只需将其添加到正在运行的总计中并更新侦听器函数内的文本。

Answer 2

您可以获得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); });类的所有输入的总和，如下所示：

＆＃13;

input {
   display: block;   
}

＆＃13;

<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" >

＆＃13;

{{1}}

＆＃13;

Answer 3

我用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中的keypress上的多个文本框中获取值

3 个答案: