Saturday, 21 March 2015

Ajax_Form _Validation _with _PHP

Form validation in Ajax:


(1)write code for  "ajax-form-validation-demo.php" :


<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title>Demo of form validation using Ajax and PHP after submit button</title>
<script language="javascript" src="json2.js"></script>
<script type="text/javascript">
function ajaxFunction()
{
var httpxml;
try
{
// Firefox, Opera 8.0+, Safari
httpxml=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
httpxml=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
httpxml=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
function stateChanged()
{
if(httpxml.readyState==4)
{
//document.getElementById("msgDsp").style.display='inline'; // if Message box is hidden before
// red = #f00000; green = #00f040; yellow = #f0f000; brick= #f0c000; light yello = #f0f0c0
var myObject = JSON.parse(httpxml.responseText);
if(myObject.data[0].status_form==="NOTOK"){ // status of form if notok
document.getElementById("msgDsp").style.borderColor='red';
document.getElementById("msgDsp").innerHTML=myObject.data[0].msg;
}/// end of if if form status is notok
else {
document.getElementById("msgDsp").style.borderColor='blue';
document.getElementById("msgDsp").innerHTML=" Validation passed ";
document.myForm.reset();
} // end of if else if status form notok

//alert(myObject.data[0].t1 + myObject.data[0].r1 +myObject.data[0].s1 + myObject.data[0].c1);
if(myObject.data[0].t1==="F")
{document.getElementById("t1").style.borderStyle='solid';
document.getElementById("t1").style.borderWidth='1px';
document.getElementById("t1").style.borderColor='red';}
else{
document.getElementById("t1").style.borderStyle='solid';
document.getElementById("t1").style.borderWidth='1px';
document.getElementById("t1").style.borderColor='white';
}
if(myObject.data[0].r1==="F")
{
document.getElementById("r1").style.borderStyle='solid';
document.getElementById("r1").style.borderWidth='1px';
document.getElementById("r1").style.borderColor='red';
}else{
document.getElementById("r1").style.borderStyle='solid';
document.getElementById("r1").style.borderWidth='1px';
document.getElementById("r1").style.borderColor='white';
}

if(myObject.data[0].s1==="F")
{ document.getElementById("s1").style.borderStyle='solid';
document.getElementById("s1").style.borderWidth='1px';
document.getElementById('s1').style.borderColor='red' ; }
else{
document.getElementById("s1").style.borderStyle='solid';
document.getElementById("s1").style.borderWidth='1px';
document.getElementById('s1').style.borderColor='white' ;
}

if(myObject.data[0].c1==="F")
{ document.getElementById("c1").style.borderStyle='solid';
document.getElementById("c1").style.borderWidth='1px';
document.getElementById('c1').style.borderColor='red' ; }
else{
document.getElementById("c1").style.borderStyle='solid';
document.getElementById("c1").style.borderWidth='1px';
document.getElementById('c1').style.borderColor='white' ;
}
}
}

function getFormData(myForm) {
var myParameters = new Array();
//// Text field data collection //
var val=myForm.fname.value;
val = "fname="+val;
myParameters.push(val);

// End of text field data collection //

//////// Radio Button data collection //////
var val="";
for(var i=0; i < document.myForm.sex.length; i++){
if(document.myForm.sex[i].checked){
var val=document.myForm.sex[i].value;
}
}
var sParam = encodeURIComponent('sex');
sParam += "=";
sParam += encodeURIComponent(val);
myParameters.push(sParam);
///////End of radio button data collection/////////
////// Start of select box data collection ///////////
var val=myForm.month.options[myForm.month.options.selectedIndex].value;
val = "month="+val;
myParameters.push(val);
////////End of select box data collection /////////////
////// Start of check box data collection ///////////
if(document.myForm.agree.checked){
var val = "agree="+document.myForm.agree.value;
myParameters.push(val);
}

////////End of checkbox data collection /////////////
////////////
return myParameters.join("&"); // return the string after joining the array
}



var url="ajax-form-validation-demo-code.php";

var myForm = document.forms[0];

var parameters=getFormData(myForm);
httpxml.onreadystatechange=stateChanged;
httpxml.open("POST", url, true)
httpxml.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
httpxml.send(parameters)
document.getElementById("msgDsp").innerHTML="<img src=wait.gif>";

}


</script>

</head>

<body>
<div id="msgDsp" STYLE="border-style: solid;border-width: 1px;border-color:blue;padding:10px;height:70px;width:350px;top:10px;z-index:1"><b>Form Validation message will be listed here..... </b></div>
<br><br>
<form name="myForm" ><table>
<tr><td>Name </td><td><div id='t1'><input type=text  name=fname ></div></td></tr>
<tr><td>Sex</td><td><div id='r1'><input type=radio name='sex' value='male' >Male <input type=radio name='sex' value='Female'>Female</div></td></tr>
<tr><td>Select a Month</td><td><div id='s1'><select name=month ><option value=''>Select Month</option>
<option value='01'>January</option>
<option value='02'>February</option>
<option value='03'>March</option>
<option value='04'>April</option>
<option value='05'>May</option>
<option value='06'>June</option>
<option value='07'>July</option>
<option value='08'>August</option>
<option value='09'>September</option>
<option value='10'>October</option>
<option value='11'>November</option>
<option value='12'>December</option>
</select></div></td></tr>
<tr><td colspan=2><div id='c1'><input type=checkbox name='agree' value='yes'> Agree to terms and Conditions</div></td></tr>
<tr><td colspan=2><input type=button onClick=ajaxFunction() value=Submit></td></tr></form></table>

<br><br>
<a href=http://www.plus2net.com rel="nofollow">Script and tutorials from plus2net.com</a>

</body>
</html>

(2)write code for  "ajax-form-validation-demo-code.php":


<?Php
// Start with collecting from data ///
@$fname=$_POST['fname'];


@$sex=$_POST['sex'];
@$month=$_POST['month'];
@$agree=$_POST['agree'];


////////

$status_form = "OK";// Set a flag to check
$msg=""; // Message variable

$row=array("t1"=>"T","r1"=>"T","r2"=>"T","s1"=>"T","c1"=>"T","msg"=>"","status_form"=>"OK");

if(strlen($fname) < 3){
$row["status_form"]="NOTOK";
$row["t1"]="F";
$msg .= "Your Name must be more than 3 char  length<br>";
}

if(strlen($month) < 2){
$row["status_form"]="NOTOK";
$row["s1"]="F";
$msg .= "Please select Month<br>";
}
if(strlen($sex) < 1){
$row["status_form"]="NOTOK";
$row["r1"]="F";
$row["r2"]="F";
$msg .= "Please select Sex<br>";
}


if($agree<>"yes" ){
$row["status_form"]="NOTOK";
$row["c1"]="F";
$msg .= "Please agree to terms and conditions<br>";
}
$row["msg"]="$msg";


$main = array('data'=>array($row));
echo json_encode($main);


?>

run the second no file  & test the output.
on

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)