<html>
<center>
</center>
<head>
<script src="jquery-1.8.3.js"> </script>
<script type="text/javascript">
$(document).ready(function() {
function Reset(){
alert("hello");
$("#uname").val('');
$("#lname").val('');
$("#phone").val('');
$("#mdata").val('');
$("#emailid").val('');
$("#datepicker").val('');
$("#address").val('');
$("#city").val('');
$("#lblmsg").html('');
}
//$("#uname").live('blur', function() {
//var checklength = $(this).val().length;
// if(checklength === 0)
// {
// $("#uname").css('border-color','red');
// }
// else
// {
// $("#uname").css('border-color','');
// }
// });
$("#btnsubmit").click(function () {
if ($("#uname").val().length === 0) {
$("#lblmsg").text('Please enter the Name.');
$("#uname").focus();
$("#uname").focus();
//$("#uname").css('border-color','red');
return false;
}
else if($("#lname").val().length === 0){
$("#lblmsg").text('Please enter the Last Name.');
$("#lname").focus();
$("#lname").focus();
return false;
}
else if($("#phone").val().length === 0){
$("#lblmsg").text('Please enter the Phone.');
return false;
}
else if($("#mdata").val().length === 0){
$("#lblmsg").text('Please enter the date.');
return false;
}
else if($("#emailid").val().length === 0){
$("#lblmsg").text('Please enter the email id.');
return false;
}
else if($("#datepicker").val().length === 0){
$("#lblmsg").text('Please enter the date.');
return false;
}
else if($("#address").val().length === 0){
$("#lblmsg").text('Please enter the address.');
return false;
}
else if($("#city").val().length === 0){
$("#lblmsg").text('Please enter the city.');
return false;
}
});
});
</script>
</head>
<body>
<table width="100%">
<tbody>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td width="20%">
</td>
<td width="80%">
<form action="" method="POST">
<table width="100%" align="center">
<tbody>
<tr><td width="10%">User Name </td><td width="70%"><input type="text" name="uname" id="uname"/> </td></tr>
<tr><td width="10%">Last Name</td> <td width="70%"><input type="text" name="lname" id="lname"/></td></tr>
<tr><td width="10%">Phone Number </td> <td width="70%"><input type="text" value="+91 " name="phone" id="phone" /></td></tr>
<tr><td width="10%">Data </td> <td width="70%"><input type="text" name="mdate" id="mdata"/></td></tr>
<tr><td width="10%">Email Id </td> <td width="70%"><input type="text" name="emailid" id="emailid"/></td></tr>
<tr><td width="10%">Date</td><td width="70%"><input type="text" name="crdate" id="datepicker" /></td></tr>
<tr><td width="10%">Address</td> <td width="70%"><input type="text" name="address" id="address"/></td></tr>
<tr><td width="10%">City</td> <td width="70%"><input type="text" name="city" id="city"/></td></tr>
<tr> <td> </td><td align="left" ><input class ="" type="submit" name="submit" value="Submit" style="margin-left:5px;" id="btnsubmit"/>
<input class ="" type="reset" name="" value="Reset" id="btnreset" style="margin-left:5px;"/></td></tr>
<tr>
<td width="10%"></td><td colspan ="1">
<label id ="lblmsg" style="color:Red;"></label>
</td>
</tr>
</tbody>
</table>
</form>
</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</tbody>
</table>
</body>
</html>
Nice articel, This article help me very well. Thank you. Also please check my article on my site about HTML form target Attribute.
ReplyDelete