How to calculate sum on change?

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?

What you have seems fine, other than the missing third input and the second input being disabled, and no elements having the class `.input` = — adeneo, Oct 23 '16 at 14:27

Catalin Florea · Answer 1 · 2016-10-23T15:39:52.567

1

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

edited Oct 23 '16 at 15:39

answered Oct 23 '16 at 14:32

Catalin Florea

227
3
12

1

The values will concatenate `"1"+"2" = "12";` so you should convert input values to be integers using `parseInt` for example and you forget to add `)` at the last – Mamdouh Saeed Oct 23 '16 at 15:31
`$(".myclass").on("change", function(){........}` ==> you forget ==> `)` – Mamdouh Saeed Oct 23 '16 at 15:39

score 1 · Answer 2 · answered Oct 23 '16 at 15:08

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.

score 0 · Answer 3 · edited May 23 '17 at 12:00

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

Mamdouh Saeed · Answer 4 · 2016-10-23T14:51:35.883

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>

Pranesh Ravi · Accepted Answer · 2016-10-23T15:41:59.260

0

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>

edited Oct 23 '16 at 15:41

answered Oct 23 '16 at 14:46

Pranesh Ravi

18,642
9
46
70

@zzz Updated the answer. Check! – Pranesh Ravi Oct 23 '16 at 15:11
Thank you, but i have a disabled field and cant get it to show the value.. What am i doing wrong? – Oct 23 '16 at 15:35
@zzz see my snippet for reference – Pranesh Ravi Oct 23 '16 at 15:36
if i have , and use $("#total").text(ret); on it it do not work, neither $("#total").value=ret; sorry for such stupid question but how do i solve this? – Oct 23 '16 at 15:39
Updated the answer. You need to use `.val()` on `input` – Pranesh Ravi Oct 23 '16 at 15:42

How to calculate sum on change?

5 Answers5