How to calculate sum on change? - html

Question

How to go about calculating the sum of two fields on change?
My HTML
<div class="field">
<label for="field1">F1:</label>
<input type="number" name="field1" min="0" placeholder="0" Title="Only positive numbers" required></div>
<div class="field">
<label for="field2">Field2:</label>
<input type="number" name="field2" disabled>
</div>
And i got this but unsure on how this works/how to get it to work..
<script> $(".input").on("change", function(){
var ret = Number($(".field1").val()) + Number($(".field2").val());
$("#field3").val(ret);
Is there an easier way to do this?

Answer 1

Your way is fine, But I prefer using on input event handler, as it's faster in updating the total number.
Also if you like to expand the sum process to handle many textbox(s) you can do the following
$(document).ready(function(){
$(".parameter").on("input",function() {
var total=0;
$(".parameter").each(function(){
if(!isNaN(parseInt($(this).val())))
{
total+=parseInt($(this).val());
}
});
$(".total").val(total);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="field">
<label for="field1">F1:</label>
<input type="number" class="parameter" name="field1" min="0" placeholder="0" Title="Only positive numbers" required></div>
<div class="field">
<label for="field2">F2:</label>
<input type="number" class="parameter" name="field2" min="0" placeholder="0" Title="Only positive numbers" required>
</div>
<div class="field">
<label for="field2">F3:</label>
<input type="number" class="parameter" name="field3" min="0" placeholder="0" Title="Only positive numbers" required>
</div>
<div class="field">
<label for="field2">Total:</label>
<input type="number" class="total" name="total" min="0" placeholder="0" Title="Only positive numbers" required>
</div>
By using this way you can include as many as number fields in the sum, and all what you need to do is to add class="parameter" to this new number field.

Answer 2

You can set the same class to the two inputs and then on the class change you can get the values of those inputs by their ids (which you can also set), and simply add them.
Something like:
<input id="input1" class="myclass"/>
<input id="input2" class="myclass"/>
And then on the javascript side:
$(".myclass").on("change", function(){
var value1 = document.getElementById('input1').value;
var value2 = document.getElementById('input2').value;
var sum = parseInt(value1) + parseInt(value2);
});

Answer 3

Any change in input will trigger the .on()'s callback function. Inside get the value of field1and field2 and parse it into int as they will be a string. Add them both and insert into field3
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field">
<label for="field1">F1:</label>
<input type="number" id="field1" min="0" placeholder="0" Title="Only positive numbers" required/>
</div>
<div class="field">
<label for="field2">Field2:</label>
<input type="number" id="field2"/>
</div>
<input type="number" disabled id="field3"></input>
<script>
$("input").on("change", function() {
var ret = parseInt($("#field1").val()) + parseInt($("#field2").val() || '0')
$("#field3").val(ret);
})
</script>

Answer 4

Qty1 : <input onblur="findTotal()" type="text" name="qty" id="qty2"/><br>
Qty2 : <input onblur="findTotal()" type="text" name="qty" id="qty2"/><br>
Qty3 : <input onblur="findTotal()" type="text" name="qty" id="qty3"/><br>
Qty4 : <input onblur="findTotal()" type="text" name="qty" id="qty4"/><br>
Qty5 : <input onblur="findTotal()" type="text" name="qty" id="qty5"/><br>
Qty6 : <input onblur="findTotal()" type="text" name="qty" id="qty6"/><br>
Qty7 : <input onblur="findTotal()" type="text" name="qty" id="qty7"/><br>
Qty8 : <input onblur="findTotal()" type="text" name="qty" id="qty8"/><br>
<br><br>
Total : <input type="text" name="total" id="total"/>
<script type="text/javascript">
function findTotal(){
var arr = document.getElementsByName('qty');
var tot=0;
for(var i=0;i<arr.length;i++){
if(parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('total').value = tot;
}
</script>
link:-How get total sum from input box values using Javascript?
or
link:-http://www.javascript-coder.com/javascript-form/javascript-calculator-script.phtml

Answer 5

Convert String to Number using + operator so +"0" === 0 and +"1" + +"2" === 3
$(".input").on("keyup change click", function() {
var ret = +$("[name=field1]").val() + +$("[name=field2]").val();
$("[name=field3]").val(ret);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field">
<label for="field1">Field1:</label>
<input class='input' type="number" name="field1" value='0' min="0" placeholder="0" Title="Only positive numbers" required>
</div>
<div class="field">
<label for="field2">Field2:</label>
<input class='input' type="number" name="field2" value='0' min="0" placeholder="0">
</div>
<div class="field">
<label for="field3">Result:</label>
<input type="number" name="field3" disabled>
</div>