By: Prem Tiwari | Last Updated: | In: Web Technologies
In this jQuery program, I am going to share the addition of two numbers using jQuery. This is a very easy and simple program written in jQuery to calculate any two numbers.
Create an index.html file and include the jQuery file before head tag closed.
|
1 2 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type='text/javascript'></script> |
Copy paste below jQuery code inside the head tag.
|
1 2 3 4 5 6 7 8 9 |
$(document).ready(function(){ $("#calculate").click(function () { var num1 = $("#num1").val(); var num2 = $("#num2").val(); var answer = parseInt(num1) + parseInt(num2); alert(answer); $("#answer").val(answer); }); }); |
Now copy the below HTML code and add to the index.html file inside the body tag.
|
1 2 3 4 |
<input type="number" id="num1" class="form-control" placeholder="0"> <input type="number" id="num2" class="form-control" placeholder="0"> <input type="number" id="answer" class="form-control" placeholder="0" readonly> <button id="calculate" type="button">calculate</button> |
Now open the index.html page in your browser and execute the program to see the output. Below is the complet code this program.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<html> <head> <title>Addition of Two Numbers Using jQuery</title> <!-- include jquery file --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type='text/javascript'></script> <script language="javascript"> $(document).ready(function(){ $("#calculate").click(function () { var num1 = $("#num1").val(); var num2 = $("#num2").val(); var answer = parseInt(num1) + parseInt(num2); alert(answer); $("#answer").val(answer); }); }); </script> </head> <body> <input type="number" id="num1" class="form-control" placeholder="0"> <input type="number" id="num2" class="form-control" placeholder="0"> <input type="number" id="answer" class="form-control" placeholder="0" readonly> <button id="calculate" type="button">calculate</button> </body> </html> |
See DEMO here,
See the live demo of above program by clicking on below Try it Yourself button.
Prem Tiwari is the founder of FreeWebMentor.com and also a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby and also he has been a regular speaker of WordPress sessions in various IT Companies. View all posts by Prem Tiwari
Tags: CSS, HTML 5, Javasrcipt, Jquery, Tip and tricks
