A program that I wrote using JQuery to check if the number given by the user is odd or even number I also included data validation. I hope anyone will be benefit in this simple program.
If you have some questions please send me an email at jakerpomperada@gmail.com and jakerpomperada@yahoo.com. People here in the Philippines can reach me at this number 09173084360.
Sample Program Output
Program Listing
<html>
<title> Odd or Even Number Checker in JQuery</title>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
function check_even_numbers(val)
{
return (val%2 == 0);
}
$("#number").focus();
$("#check").click(function(){
var item_no1 = $("#number").val();
if (item_no1==0) {
alert("Text field cannot be empty.");
$("#number").focus();
}
else if (/^[a-zA-Z0-9- ]*$/.test(item_no1) == false) {
alert('Sorry it Contains Illegal Characters.');
$("#number").focus();
}
else if (isNaN(item_no1))
{
alert("It is not a number but a letter(s) or alphabets.");
$("#number").focus();
}
else if (check_even_numbers(item_no1)) {
$('.display').html(item_no1 + " is an Even Number.");
}
else {
$('.display').html(item_no1 + " is an Odd Number.");
}
});
// function to clear all the content of the text field
$("#clear").click(function(){
$(".display").html("");
$("#number").val("");
$("#number").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> Odd and Even Number Checker in JQuery </h2>
<hr size="3" color="red">
<br><br>
Kindly enter a number :
<input type="text" id="number" name="number" maxlength="5" size="5">
<br><br>
<button id="check" type="button" title="Click here to find if the number is odd or even ."> Check Number </button>
<button id="clear" type="button" title="Click clear text box"> Clear </button>
<br><br><br>
<div class="display"></div>
</body>
</html>
No comments:
Post a Comment