Thursday, 12 March 2015

JQUERY validation

<?php include('connection.php'); ?>
<!DOCTYPE html>
<html>

<head>
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
function hello(str)
{
if(window.XMLHttpRequest)
            {
                   xmlhttp = new XMLHttpRequest() ;
              }
 xmlhttp.onreadystatechange=function()
 {

if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("msg44").innerHTML=xmlhttp.responseText;
}

 }
 xmlhttp.open("GET","2.php?id="+str,true);      
                    xmlhttp.send();      
}

</script>
<meta charset="UTF-8">



</head>

<body>
<form  method="post"  id="sub" enctype="multipart/form-data">


<table border="1">
<tr>
<th>First Name</th>
<td><input type="text" name="txtfname" id="fn"/></td>
<td><span style='display:none;color:red' id="sp1" >enter first name</span></td>
</tr>

<tr>
<th>Last Name</th>
<td><input type="text" name="txtlname" id="fn1" /></td>
<td><span style='display:none;color:red'  id="sp2">Enter Last name</span></td>
</tr>
<tr>
<th>Email</th>
<td><input type="text" name="txtename"  onBlur="hello(this.value)" /></td>
<td><span id="msg44"></span></td>
</tr>
<tr>
<td>Password</td>
<td><input type='password' name='pass1' id='pass'></td>
<td><span style='display:none;color:red' id='sp4'>enter password</span></td>
</tr>
<tr>
<td>Re-enter Password</td>
<td><input type='password' name='pass2' id='pass2'></td>
<td><input type='hidden' name='checkpass' id='checkpass'>
<span style='display:none;color:red' id='sp5'>password not match</span></td>
</tr>
<tr>
<th>Date OF Birth</th>
<td><input type="date" name="dt" id="dt1" /></td>
<td><span style='display:none;color:red' id='dt2'>pliz date selected selected</span></td>

</tr>
<tr>
<th>Gender</th>
<td>
<input type="radio" name="g1" value="male" />Male
<input type="radio" name="g1" value="female" />Female
</td>
<td><span style='display:none;color:red' id="gmsg">select gender</span></td>

</tr>
<tr>
<th>Hobby</th>
<td><input type="checkbox" name="c1[]" id="c1" value="cri" />Cricket
<input type="checkbox" name="c1[]" id="c1" value="read" />Read
</td>
<td><span style='display:none;color:red' id="cmsg">Select your Hobby</span></td>
</tr>
<tr>
<th>Country</th>
<td><select name="co">
<option>select</option>
<?php
$sql=mysql_query("select * from country");

while($r1=mysql_fetch_array($sql))
{
?>
<option value="<?php echo $r1[0]; ?>"><?php echo $r1[1]; ?></option>
<?php }
   ?>
</select>
</td>
</tr>
<tr>
<th>State</th>
<td><select name="st">
<option>Select</option>
<?php
$sql1=mysql_query("select * from state");

while($r2=mysql_fetch_array($sql1))
{
?>
<option value="<?php echo $r2[0]; ?>"> <?php echo $r2[1]; ?></option>
<?php }

?>


</select>
</td>

</tr>
<tr>
<th>City</th>
<td><select name="txtcity" id="txtcity" onChange="validateform()">
<option value="0">select</option>
<?php
$sql2=mysql_query("select  * from city");

while($r3=mysql_fetch_array($sql2))
{
?>
<option value="<?php echo $r3[0]; ?>"><?php echo $r3[1]; ?></option>
<?php }


?>
</select>
</td>
<td><span id="msg7"></span></td>
</tr>
<tr>
<th>Image</th>
<td><input type="file" name="file"></td>

</tr>
<tr>
<td colspan="3" align="center"><input type="submit" name="add" value="ADD" /></td>

</tr>

</table>


</form>
<script>
//first name
 $('#sub').submit(function(event)
 {

var f=$("#fn").val();
var g=$("#fn1").val();
var p=$("#pass").val();
var p2=$("#pass2").val();
var chkpass=$("#checkpass").val();
var d=$("#dt1").val();
var gnder=$("input:radio[name=g1]:checked").val();
var hob=$("input[type=checkbox]:checked").length;


         if(f=='' || g=='' || p=='' || chkpass=='1' || d=='' || gnder==undefined || hob=='0')
         {
           $("#sp1").fadeIn();
           $("#fn").css("border","1px solid red");
  $("#sp2").fadeIn();
$("#fn1").css("border","1px solid red");
$("#sp4").fadeIn();
$("#pass").css("border","1px solid red");
$("#dt2").fadeIn();
$("#dt1").css("border","1px solid red");
$("#gmsg").fadeIn();
$("#cmsg").fadeIn();

         }

          if(f=='' || g=='' || p=='' || chkpass=='1' || d=='' || gnder==undefined || hob=='0')
          {
            event.preventDefault();
          }
 });
//end of function
//keyup for first name
$("#fn").keyup(function()
{
var f=$("#fn").val();
if(f=='')
{
$("#sp1").fadeIn();
$("#fn").css("border","1px solid red");
return false;
}
else
{
$("#sp1").fadeOut();
$("#fn").css("border","1px solid black");
}
});
//keyup for last name

$("#fn1").keyup(function()
{

var g=$("#fn1").val();
if(g=='')
{
$("#sp2").fadeIn();
$("#fn1").css("border","1px solid red");
return false;
}
else
{
$("#sp2").fadeOut();
$("#fn1").css("border","1px solid black");
}
});
//pass2
$("#pass2").keyup(function()
{
var p=$("#pass").val();
var p2=$("#pass2").val();
if(p!=p2)
{
$("#sp5").fadeIn();
$("#pass").css("border","1px solid red");
$("#pass2").css("border","1px solid red");
$("#checkpass").val('1');
}
else
{
$("#sp5").fadeOut();
$("#pass").css("border","1px solid black");
$("#pass2").css("border","1px solid black");
$("#checkpass").val('0');
}
});

//pass1
$("#pass").keyup(function()
{
var p=$("#pass").val();
if(p=='')
{
$("#sp4").fadeIn();
$("#pass").css("border","1px solid red");
return false;
}
else
{
$("#sp4").fadeOut();
$("#pass").css("border","1px solid black");
}
});
//date

$("#dt").change(function()
{
var d=$("#dt1").val();

if(d=='')
{
$("#dt2").fadeIn();
$("#dt1").css("border","1px solid red");
return false;
}


else
{
$("#dt2").fadeOut();
$("#dt1").css("border","1px solid black");
}
});

//gender

$("input:radio[name=g1]").change(function()
{
var gnder=$("input:radio[name=g1]:checked").val();
if(gnder==='undefined')
{
$("#gmsg").fadeIn();
}
else
{
$("#gmsg").fadeOut();
}
});
//chackbox validation
$("input[type=checkbox]").change(function()
{
var hob=$("input[type=checkbox]:checked").length;
if(hob=='0')
{
$("#cmsg").fadeIn();
}
else
{
$("#cmsg").fadeOut();
}

});


</script>

<?php


if(isset($_POST['add']))
{
$fname=$_POST['txtfname'];
$lname=$_POST['txtlname'];
$txtename=$_POST['txtename'];

$txtconpass=$_POST['pass2'];
$dt=$_POST['dt'];
$gender=$_POST['g1'];
   $hobby=implode(',',$_POST['c1']);
$co=$_POST['co'];
$st=$_POST['st'];
$txtcity=$_POST['txtcity'];
$file=$_FILES['file']['name'];
$rand=rand(1,50000);
$image=$rand.$file;
move_uploaded_file($_FILES['file']['tmp_name'],"imag/".$image);

$sql=mysql_query("insert into task2 values('','$fname','$lname','$txtename','$txtconpass','$dt','$gender','$hobby','$co','$st','$txtcity','$image')");
if(!$sql)
{
echo mysql_error();
}
else
{
echo "insert";
}
}
?>
</body>

</html>

No comments:

Post a Comment