HTML-Formular: Eingabe berechnet 2 Felder

Question

Ich verwende Spring MVC für meine Form, die den Tag hat

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

ich einige Fragen in Bezug auf Berechnungen lesen und fand sogar ein js fiddle:

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

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

aber es funktioniert nicht, wenn der Input-Tag Form ist: Eingang. Ist es möglich, automatische Berechnung der 2 Form zu machen: Eingabefelder nach Eingabe und Aktualisierung der 3. Eingabe?

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

Sie den Code überprüfen dies könnten Sie, warum Ihr Code helfen zu verstehen, nicht funktioniert. Sie verwenden die Dokument bereit-Funktion, die den Wert nicht als Standardwert für das Eingabefeld erhalten kann. Ich habe eine neue Blur-Funktion hinzugefügt, die

Answer 2

den Wert über den Wechsel des Eingabefeldes berechnen werden prüfen Ihre form Tag-Syntax

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

Hier gehen Sie

HTML falsch war

<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); 
}); 
}); 

Fiddle https://jsfiddle.net/1sbvfzcc/