Question:
My question is as follows: I have two type text inputs. One person put a number in input 1 and another number in input 2.
When the person finished filling in, the result of the sum of the 2 inputs automatically appeared in real time, without having to change the page.
If I put in the first input 5 and in the second input 10, then when I finished filling it would appear like this:
The sum of the two numbers is 15.
That is, in real time without having to click on anything or so.
Answer:
With pure javascript just get the values of the fields by the id, with document.getElementById()
convert the values to int using parseInt()
, the number 10
means in which base the number will be converted, add and throw the result in the input.
function calcular() {
var n1 = parseInt(document.getElementById('n1').value, 10);
var n2 = parseInt(document.getElementById('n2').value, 10);
document.getElementById('resultado').innerHTML = n1 + n2;
}
<form action="" method="post">
N1: <input type="text" id="n1" value="10" /> <br> N2: <input type="text" id="n2" value="5" onblur="calcular()" /> <br>
</form>
<div id="resultado"></div>