In this article I would like to share with you a sample program that I wrote using JQuery I called this program Greeter Program what does the program will do is to ask the user to enter the first name and last name of the user and then our program will greet the user. It teaches the user how to interact with HTML and JQuery using forms and buttons.
If you have some questions feel free to send me an email at jakerpomperada@yahoo.com and jakerpomperada@gmail.com. People here in the Philippines who would like to contact me can reach me at my mobile number 09173084360.
Thank you very much and God Bless.
Sample Output of the Program
Program Listing
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</script>
<script>
var txt= $("#fname").val();
$(document).ready(function(){
$("#greet").click(function(){
var f_name = $("#fname").val();
var l_name = $("#lname").val();
if(f_name==0) {
alert("First Name cannot be empty");
$(this).focus();
}
else if(l_name==0) {
alert("Last Name cannot be empty");
$(this).focus();
}
else {
$('.display').html("Hello " + f_name + " " + l_name + " How are you? ");
}
});
$("#clear").click(function(){
var f_name = $("#fname").val(" ");
var l_name = $("#lname").val(" ");
$('.display').html(" ");
f_name.focus();
});
});
</script>
<style>
body {
background:lightgreen;
color: red;
font-family:arial;
font-weight:bold;
size:12;
}
</style>
</head>
<body>
Enter your First Name :
<input type="text" id="fname" name="fname" maxlength="20">
<br><br>
Enter your Last Name :
<input type="text" id="lname" name="fname" maxlength="20">
<br><br>
<button id="greet" type="button" title="Click here to display me"> Greet Me </button>
<button id="clear" type="button" title="Click clear text box"> Clear Me </button>
<br><br><br>
<div class="display"></div>
</body>
</html>
