Jquery “Blur” event and “getElementById” !!!


Hi Yesterday when I am working in my project with my guide Mr.Thiyagarajan Sir ,

I worked in Blur event in Jquery . It was same as in Javascript .

We can get value of text in Javascript by => “document.getElementById(“idname”).value”

In Jquery , we can get value easily => $(“#idname”).val();

I done Sample Jquery script by using the blur event 🙂

<html>
<head>
<title>OnBlur</title>
<h1 align = "center">Example of OnBlur in Jquery</h1>
<script type="text/javascript" src="/home/sathia/Desktop/javascripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/home/sathia/Desktop/javascripts/jquery-ui-1.7.2.custom.min.js"></script>
<script type = "text/javascript">
$(document).ready(function(){
 $("#yearborn").blur(function(){
var name1 = $("#fname").val();
var name2 = $("#lname").val();
var names = name1 + " " + name2;
var age1 = parseInt($("#yearborn").val());

var d = new Date();
var age2 = d.getFullYear();
var newage = age2 - age1;
var details = "Hi" + " " + names + "\n" + "Your Age is" + " " +  newage + "\n" +"Thank U"
$("#fulname").val(details);

 
});
});

</script>
</head>
<body>
<table align = "center" bgcolor = "black">

<tr><td><label style = "color:white">Enter the First Name :</label></td><td><input type = "text" id = "fname"></td></tr></br></br>
<tr><td><label style = "color:white">Enter the Last name : </label></td><td><input type = "text" id = "lname"></td></tr></br></br></br>
<tr><td><label style = "color:white">Year you Born  : </label></td><td><input type = "text" id = "yearborn"></td></tr></br></br></br>
<tr><td colspan = 2><label style = "color:white" >Details :</label></br><textarea id = "fulname" rows = 8 cols = 40></textarea></td></tr>
</table>
</body>

This code get the first name , Last name and year of Birth from U and Display Full name and Age of yours ..

Here Age is Calculated by subtraction of current year and your birth year 🙂

Screen shot of my output is :

Advertisements

About sathia

Web developer at cloudmint
This entry was posted in Web. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s