As a programmer I always try different ways to solve problems in programming in many different ways or methods and using different programming languages. In this article I will show you how to write a very simple program using JQuery Framework to find the sum of five numbers given by the user of our program.
JQuery Framework is a JavaScript library that enables programming to add functionality in their web applications in the client side. Based on my personal experience I have use JQuery to validate entries in the text field in HTML, I can also use it to create dynamic web pages and animations. Most of the website that we have seen in the Internet using JQuery in one way to another. Our program works very simple it will ask the user to enter five numbers in five text field and then it will return the total sum. I also added a function that the user can only use their keyboard to navigate the text field by simple pressing the return key or the enter key.
I hope you find my work useful in learning how to use JQuery Framework.
Thank you very much.
Sample Output of Our Program
Program Listing
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body bgcolor="lightgray">
<font size="6" face="Arial" color="green">
Addition of Five Numbers Using JQuery </font>
<font size="3" face="Arial" color="green">
<br><br>
Value No. 1: <input type="text" id="no1" name="field1" size="4"><br>
Value No. 2: <input type="text" id="no2" name="field1" size="4"><br>
Value No. 3: <input type="text" id="no3" name="field1" size="4"><br>
Value No. 4: <input type="text" id="no4" name="field1" size="4"><br>
Value No. 5: <input type="text" id="no5" name="field1" size="4"><br>
<br>
<input id="send" type="submit" value="ADD SUM" title="Click here to find the sum of numbers">
<br><br>
<font size="5" face="Arial" color="green">
<span style="padding:0 10px;"></span>
</font>
<script>
$('#send').click(function () {
var a = $("#no1").val();
var b = $("#no2").val();
var c = $("#no3").val();
var d = $("#no4").val();
var e = $("#no5").val();
var display_result = "The total sum is " +addition(a,b,c,d,e) +".";
$("span").append(display_result)
});
function addition(a1,b1,c1,d1,e1)
{
var total_sum = Number(a1) + Number(b1) + Number(c1)+ Number(d1)+ Number(e1)
return(total_sum);
}
</script>
<script type="text/javascript">
$('#no1').keypress(function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13'){
$('#no2').focus();
}
event.stopPropagation();
});
$('#no2').keypress(function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13'){
$('#no3').focus();
}
event.stopPropagation();
});
$('#no3').keypress(function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13'){
$('#no4').focus();
}
event.stopPropagation();
});
$('#no4').keypress(function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13'){
$('#no5').focus();
}
event.stopPropagation();
});
$('#no5').keypress(function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13'){
$('#send').focus();
}
event.stopPropagation();
});
</script>
</font>
</body>
</html>
</body>
</html>
DOWNLOAD FILE HERE
