HTML 表单：输入计算 2 个字段答案

【问题标题】：HTML form:input calculate 2 fieldsHTML 表单：输入计算 2 个字段
【发布时间】：2017-09-30 22:36:51
【问题描述】：

我正在为我的表单使用 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时它不起作用。是否可以在键入时自动计算 2 个表单：输入字段并更新第 3 个输入？

【问题讨论】：

你用的是什么JS？此外，输出将是一个 <input> 元素，就像您链接到的 jsFiddle 一样，所以逻辑应该是相同的

标签： javascript jquery html forms spring-mvc

【解决方案1】：

给你

HTML

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

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

【讨论】：

【解决方案2】：

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

请检查代码，这可能有助于您了解代码无法正常工作的原因。您正在使用文档准备功能，该功能无法将值作为输入框的默认值获取。我添加了一个新的模糊函数，它将计算输入框变化的值

【讨论】：

【解决方案3】：

试试这个你的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" />

【讨论】：