Skip to content

Add two textbox values and display the sum in a third textbox automatically in JavaScript

  • by

Add two textbox values and display the sum in a third textbox automatically needed to use onblur Event because it executed if the user leaves an input field.

So if the user leaves filed after then call the addition function. The function will add values and display the result.

JavaScript add two textbox values and display them in third

Complete HTML Example code:-

<!DOCTYPE html>
<html>
<body>
    <input type="text" id="Num1" value="1" onblur="reSum();"/>

    <input type="text" id="Num2" value="1" onblur="reSum();"/> <br>
    <p>Auto Sum</p>

    <input type="text" id="Sum" value=""/>
    <script>

        function reSum()
        {
            var num1 = parseInt(document.getElementById("Num1").value);
            var num2 = parseInt(document.getElementById("Num2").value);
            document.getElementById("Sum").value = num1 + num2;

        }

    </script>
</body>
</html>

Output:

Add two textbox values and display the sum in a third textbox automatically in JavaScript

Do comment if you have any doubts and suggestion on this topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Leave a Reply

Discover more from Tutorial

Subscribe now to keep reading and get access to the full archive.

Continue reading