HTML form:input calculate 2 fields

Question

I'm using spring mvc for my form which has the tag

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

I read some questions in regards to calculations and even found a js fiddle:

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

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

but it doesn't work when the input tag is form:input. Is it possible to do auto calculation of the 2 form:input fields upon keyin and update the 3rd input?

What is the JS you're using? Also the output will be an <input> element, just like the jsFiddle you linked to, so the logic should be identical — Rory McCrossan
– Rory McCrossan, Commented May 3, 2017 at 7:53

Rtra · Accepted Answer · 2017-05-03 08:05:52Z

1

Here you go

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

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

answered May 3, 2017 at 8:05

Rtra

52212 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ankit verma · Accepted Answer · 2017-05-03 07:59:55Z

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

Please check the code this might help you understand why your code is not working. You are using document ready function which is not able to get the value as no default value for input box. I have added a new blur function which will calculate the value on change of input box

prasanth · Accepted Answer · 2017-05-03 08:01:49Z

0

Try this your form tag syntax was wrong

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

answered May 3, 2017 at 8:01

prasanth

22.6k4 gold badges33 silver badges57 bronze badges

Collectives™ on Stack Overflow

HTML form:input calculate 2 fields

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related