A simple program that I wrote using JQuery that will ask the user to enter five number with data validation that I include in this program. I hope you will find this simple program useful in learning how to program in JQuery.
If you have some questions please send me at email at jakerpomperada@yahoo.com and jakerpomperada@gmail.com. People here in the Philippines can reach me in this number 09173084360.
Thank you very much and Happy Computing.
Sample Program Output
Program Listing
<html>
<title> Additon of Five Numbers in JQuery</title>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
// auto text field focus upon loading of our
// webpage
$("#item1").focus();
// function to add all the five values in our text field
$("#sum").click(function(){
var sum = 0;
var item_no1 = $("#item1").val();
var item_no2 = $("#item2").val();
var item_no3 = $("#item3").val();
var item_no4 = $("#item4").val();
var item_no5 = $("#item5").val();
// text field validation conditions checks if the text field
// does not have a value to sum up
if (item_no1==0) {
alert("Item No. 1 Cannot be empty.");
$("#item1").focus();
}
else if (/^[a-zA-Z0-9- ]*$/.test(item_no1) == false) {
alert('Value in Item No. 1 Contains illegal Characters.');
$("#item1").focus();
}
else if (isNaN(item_no1))
{
alert("Value in Item No. 1 is not a number but a letter.");
$("#item1").focus();
}
else if (item_no2==0) {
alert("Item No. 2 Cannot be empty.");
$("#item2").focus();
}
else if (/^[a-zA-Z0-9- ]*$/.test(item_no1) == false) {
alert('Value in Item No. 2 Contains illegal Characters.');
$("#item2").focus();
}
else if (isNaN(item_no2))
{
alert("Value in Item No. 2 is not a number but a letter.");
$("#item2").focus();
}
else if (item_no3==0) {
alert("Item No. 3 Cannot be empty.");
$("#item3").focus();
}
else if (/^[a-zA-Z0-9- ]*$/.test(item_no3) == false) {
alert('Value in Item No. 3 Contains illegal Characters.');
$("#item3").focus();
}
else if (isNaN(item_no3))
{
alert("Value in Item No. 3 is not a number but a letter.");
$("#item3").focus();
}
else if (item_no4==0) {
alert("Item No. 4 Cannot be empty.");
$("#item4").focus();
}
else if (/^[a-zA-Z0-9- ]*$/.test(item_no4) == false) {
alert('Value in Item No. 4 Contains illegal Characters.');
$("#item4").focus();
}
else if (isNaN(item_no4))
{
alert("Value in Item No. 4 is not a number but a letter.");
$("#item4").focus();
}
else if (item_no5==0) {
alert("Item No. 5 Cannot be empty.");
$("#item5").focus();
}
else if (/^[a-zA-Z0-9- ]*$/.test(item_no5) == false) {
alert('Value in Item No. 5 Contains illegal Characters.');
$("#item5").focus();
}
else if (isNaN(item_no5))
{
alert("Value in Item No. 5 is not a number but a letter.");
$("#item5").focus();
}
else {
$(".total_sum").each(function() {
sum+= Number($(this).val());
});
$('.display').html("The total sum is " + sum + ".");
}
});
// function to clear all the content of the text field
$("#clear").click(function(){
$(".total_sum").each(function() {
($(this).val(""));
$(".display").html("");
$("#item1").focus();
});
});
});
</script>
<style>
body {
background:lightgreen;
color: blue ;
font-family:arial;
font-weight:bold;
size:12;
}
</style>
</head>
<body>
<hr size="3" color="red">
<h2> Addition of Five Numbers in JQuery </h2>
<hr size="3" color="red">
<br><br>
Enter Item No. 1 :
<input type="text" id="item1" class="total_sum" name="item1" maxlength="5" size="5">
<br>
Enter Item No. 2 :
<input type="text" id="item2" class="total_sum" name="item2" maxlength="5" size="5">
<br>
Enter Item No. 3 :
<input type="text" id="item3" class="total_sum" name="item3" maxlength="5" size="5">
<br>
Enter Item No. 4 :
<input type="text" id="item4" class="total_sum" name="item4" maxlength="5" size="5">
<br>
Enter Item No. 5 :
<input type="text" id="item5" class="total_sum" name="item5" maxlength="5" size="5">
<br><br>
<button id="sum" type="button" title="Click here to find the sum of the five numbers."> COMPUTE </button>
<button id="clear" type="button" title="Click clear text box"> CLEAR </button>
<br><br><br>
<div class="display"></div>
</body>
</html>
