从javascript中的按键获取多个文本框的值

我的表单中有8个不同的文本字段，它是客户账单的一部分。这从javascript中的按键获取多个文本框的值

<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事件完美地完成它？

UPDATE

我已附加一个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'); 
    } 
}

但它不是运作良好

来源

2016-05-17 Blessan Kurien

好问题，但你到目前为止尝试过什么？ – Dacaspex

你可以得到的有form-control类上keyup事件这样所有输入SUM：

$('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" >

来源

2016-05-17 09:47:19

它没有被解雇 –

部分工作，但得到了'NAn' –

@BlessanKurien很奇怪，它适用于我，你是否填充了所有有效值的输入？ –

您可以使用传递到关键监听事件的target.value财产 - 这会给你输入字段的值：

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

就在这个添加到运行总量和更新侦听器函数中的文本。

来源

2016-05-17 09:37:41 whostolemyhat

我在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>

来源

2016-05-17 10:12:02

从javascript中的按键获取多个文本框的值

回答

相关问题