從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中的按鍵獲取多個文本框的值

回答

相關問題