I was trying to make a simple form that allows the user to add two numbers and I want it to show the total number once both of them are added without clicking any button or without page refresh

function add_number() {
                   
  var first_number = parseInt(document.getElementById("Text1").value);
  var second_number = parseInt(document.getElementById("Text2").value);
  var result = first_number + second_number;

  document.getElementById("txtresult").value = result;
  
}

<p>Enter First Number :</p>
<br>
<input type="text" id="Text1" name="TextBox1">
<br> <p>Enter Second Number :</p>
<br>
<input type="text" id="Text2" name="TextBox2">
<br>Result :
<br>
<input type="text" id="txtresult" name="TextBox3">

I was trying to make a simple form that allows the user to add two numbers and I want it to show the total number once both of them are added without clicking any button or without page refresh

function add_number() {
                   
  var first_number = parseInt(document.getElementById("Text1").value);
  var second_number = parseInt(document.getElementById("Text2").value);
  var result = first_number + second_number;

  document.getElementById("txtresult").value = result;
  
}

<p>Enter First Number :</p>
<br>
<input type="text" id="Text1" name="TextBox1">
<br> <p>Enter Second Number :</p>
<br>
<input type="text" id="Text2" name="TextBox2">
<br>Result :
<br>
<input type="text" id="txtresult" name="TextBox3">

I tried the above code but it is not working.

• javascript
• jquery
• html

• 3 You need to add an event handler. Right now you've written a function that is never called. You likely want to call it on keyup or keydown of your inputs. – Tyler Roper Commented Aug 25, 2019 at 2:55
• 2 Actually, rather than using keyup or keydown event, I'd remend the input event each input element will emit whenever its value changes. Secondly, why not use parseFloat rather than parseInt, because then you can add non-integer numbers too. Thirdly, do something like var text1 = document.getElementById("Text1") outside of the add_number function ONCE, rather than searching your HTML every single time you call add_number to find the same elements over and over again. – kshetline Commented Aug 25, 2019 at 3:02
• @kshetline "I'd remend the input event" - it's too late for me to edit my ment but I agree with you here. Thanks for the correction. – Tyler Roper Commented Aug 25, 2019 at 3:04

4 Answers 4

I was writing this as @TylerRoper and @kshetline made their useful ments, so I've incorporated them. Fundamentally what was needed was to add the event handler. I've also included a check for the parse failing so that you get a result even if one field is empty or non-numeric (it's treated as 0).

var text1 = document.getElementById("Text1");
var text2 = document.getElementById("Text2");

function add_number() {
   var first_number = parseFloat(text1.value);
   if (isNaN(first_number)) first_number = 0;
   var second_number = parseFloat(text2.value);
   if (isNaN(second_number)) second_number = 0;
   var result = first_number + second_number;
   document.getElementById("txtresult").value = result;
}

<p>Enter First Number :</p>
<br>
<input type="text" id="Text1" name="TextBox1" oninput="add_number()">
<br> <p>Enter Second Number :</p>
<br>
<input type="text" id="Text2" name="TextBox2" oninput="add_number()">
<br>Result :
<br>
<input type="text" id="txtresult" name="TextBox3">

Good solution provided by @Nick. I just added a check that user can enter only numeric input. An alternative approach.

function add_number(e) {
  if (isNumberKey(e)) {
    setTimeout(() => {
      var first_number = document.getElementById("Text1").value !== "" ? parseInt(document.getElementById("Text1").value) : 0;
      var second_number = document.getElementById("Text2").value !== "" ? parseInt(document.getElementById("Text2").value) : 0;
      var result = first_number + second_number;
      document.getElementById("txtresult").value = result;
    }, 50)
    return true;
  } else {
    return false;
  }
}

function isNumberKey(evt) {
  var charCode = (evt.which) ? evt.which : event.keyCode
  if (charCode > 31 && (charCode < 48 || charCode > 57)) {
    return false;
  }
  return true;
}

<p>Enter First Number : <input type="text" id="Text1" name="TextBox1" onkeypress="return add_number(event)"></p>

<p>Enter Second Number : <input type="text" id="Text2" name="TextBox2" onkeypress="return add_number(event)"></p>

<br>Result : <input type="text" id="txtresult" name="TextBox3">

Hope it will help you.

jQuery approach:

$('#Text1, #Text2').on("paste keyup",

  function () {
  
    var result = parseInt($("#Text1").val()) + parseInt($("#Text2").val());
    
    $("#txtresult").val((isNaN(result) ? '' : result));
    
  }
  
);

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Enter First Number:</p>
<input type="text" id="Text1" name="TextBox1">
<p>Enter Second Number:</p>
<input type="text" id="Text2" name="TextBox2">
<p>Result:</p>
<input type="text" id="txtresult" name="TextBox3">

function add_number() {
                   
  var first_number = parseInt(document.getElementById("Text1").value);
  var second_number = parseInt(document.getElementById("Text2").value);
  var result = first_number + second_number;

  document.getElementById("txtresult").value = result;
  
}

<p>Enter First Number :</p>
<br>
<input type="text" id="Text1" name="TextBox1">
<br> <p>Enter Second Number :</p>
<br>
<input type="text" id="Text2" name="TextBox2">
<br>Result :
<br>
<input type="text" id="txtresult" name="TextBox3">
<p>
<input type="button" value="submit" onclick="add_number()">
<input type="reset" value="reset">