HTML表單：輸入計算2場

Question

我使用Spring MVC的我形成具有

<form:input type="number" class="value1" id="value1" path="commandName.object.field1" /> 
<form:input type="number" class="value1" id="value1" path="commandName.object.field2" /> 

<input type="text" disabled="disabled" id="result" /> 

我讀了關於一些問題來計算，即使發現了js fiddle標籤：

http://jsfiddle.net/g7zz6/1125/

how do i calculate 2 input fields and put results in 3rd input field

但是當輸入標籤是form：input時它不起作用。是否可以自動計算keyin上的2個form：輸入域並更新第3個輸入？

Answer 1

$(document).ready(function(){ 
 
    var val1 = +$(".value1").val(); 
 
    var val2 = +$(".value2").val(); 
 
    $("#result").val(val1+val2); 
 
}); 
 
$('.input').blur(function(){ 
 
    var val1 = +$(".value1").val(); 
 
    var val2 = +$(".value2").val(); 
 
    $("#result").val(val1+val2); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" class="input value1" value="20"> 
 
<input type="text" class="input value2" value="30"> 
 
<input type="text" disabled="disabled" id="result">

請檢查代碼，這可能幫助你理解爲什麼你的代碼不能正常工作。 您正在使用文檔就緒功能，該功能無法將輸入框的值設置爲默認值。 我添加了一個新的模糊函數將計算在輸入框的變化

Answer 2

值試試這個你form標記語法錯了

$('form').on('keyup' ,'.value1', function(){ 
 
var k=0; 
 
$('.value1').each(function(){ 
 
k +=parseFloat($(this).val()|0); 
 
}) 
 
$('input:text').val(k) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
<input type="number" class="value1" id="value1" path="commandName.object.field1" /> 
 
</form> 
 
<form> 
 
<input type="number" class="value1" id="value1" path="commandName.object.field2" /> 
 
</form> 
 

 
<input type="text" disabled="disabled" id="result" />

Answer 3

在這裏你去

HTML

<input type="text" class="input value1"> 
<input type="text" class="input value2 "> 
<input type="text" disabled="disabled" id="result"> 

JS

$(document).ready(function(){ 
$('input[type="text"]').keyup(function() { 
    var val1 = parseInt($('.value1').val()); 
    var val2 = parseInt($('.value2').val()); 
      var sum = val1+val2; 
      $("input#result").val(sum); 
}); 
}); 

小提琴https://jsfiddle.net/1sbvfzcc/