Jquery sample
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Advance Javascript Using JQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<style type="text/css">
body, input, select{
font:11px tahoma, Verdana, Arial, "Times New Roman";
}
p label{
width:200px;
float:left;
}
#result, #form{
float:left;
margin-right:20px;
}
</style>
</head>
<body>
<div id="form">
<p id="id"><label>id</label> <input type="text" id="txtid" /> </p>
<p id="address"><label>Address </label> <input type="text" id="txtinsaddress" /> </p>
<p id="contact"><label>Contact</label> <input type="text" id="txtcontact" /></p>
<p id="faxno"><label>Fax No</label> <input type="text" id="txtfaxno" /> </p>
<p id="mobile"><label>Mobile</label> <input type="text" id="txtmobile" /> </p>
<p id="email"><label>Email</label> <input type="text" id="txtemail" /> </p>
<p id="age"><label>Age</label> <input type="text" id="txtage" /> </p>
<p id="***"><label>***</label>
<select id="txtsex">
<option value="male">Male</option>
<option value="female">Female</option>
</select></p>
<p id="civilstatus"><label>Status</label>
<select id="txtstatus">
<option value="single">single</option>
<option value="married">married</option>
<option value="head">head of the family</option>
</select>
</p>
<p id="birthplace"><label>Birth Place</label> <input type="text" id="txtbirthplace" /></p>
<p id="birthdate"><label>Birth Date</label> <input type="text" id="txtbirthdate" /></p>
<p id="address2"><label>Address</label> <input type="text" id="txtbusaddress" /></p>
<p id="contact2"><label>Contact</label> <input type="text" id="txtbuscontact" /></p>
<p id="faxno2"><label>Fax no</label> <input type="text" id="txtbusfaxno" /></p>
<input type="button" id="print" value="Print Info" />
</div>
<div id="result">
</div>
<script type="text/javascript">
$("#print").click(function(event){
/* @result */
$("#result").html("");
$("#result").hide();
var selected = new Array("civilstatus", "***");
var label = "";
var id ="";
var value = "";
$("#form p").each(function(event){
id = $(this).attr("id");
label = $("#"+id+" label").html();
if (jQuery.inArray($(this).attr("id"), selected) >= 0)
value = $("#"+id+" select").val();
else
value = $("#"+id+" input:text").val();
value = (value=="")? " ":value;
$("#result").html($("#result").html()+"<p><label>"+label+":</label>"+value+"</p>");
});
$("#result").show("slow");
});
</script>
</body>
</html>