Demo Download

In this tutorial I will explain how to add & subtract two input fields values using jQuery. This is very simple tutorial, you just need to write HTML and jQuery to achieve it.

Note: Don’t forget to include the jQuery library in the header or footer of web page.

The HTML

<form name="form">
<table>
<tr>
<td>Num 1:</td>
<td><input type="text" name="num1" id="num1" /></td>
</tr>
<tr>
<td>Num 2:</td>
<td><input type="text" name="num2" id="num2" /></td>
</tr>
<tr>
<td>Sum:</td>
<td><input type="text" name="sum" id="sum" readonly /></td>
</tr>
<tr>
<td>Subtract:</td>
<td><input type="text" name="subt" id="subt" readonly /></td>
</tr>
</table>
</form>

As you can see above we will add Num 1 and Num 2 and display their result on Sum, and subtract Num 2 from Num 1.

The jQuery

$(function() {
    $("#num1, #num2").on("keydown keyup", sum);
	function sum() {
	$("#sum").val(Number($("#num1").val()) + Number($("#num2").val()));
	$("#subt").val(Number($("#num1").val()) - Number($("#num2").val()));
	}
});

If you find this tutorial helpful so share it with your friends and leave your comment.

Facebook Official Page: All PHP Tricks

Twitter Official Page: All PHP Tricks