Originally Posted by
jimfraser
Does it work in IE?
With that alert statment it works fine.
PHP file to handle resquest
PHP Code:
<?php
/*This is a dummy code to handle the request*/
$method=$_POST["req"];
if($method=='POST')
{
$required = $_POST["sRequired"];
$typecheck = $_POST["sTypeCheck"];
$val = $_POST["val"];
}else
{
$required = $_GET["sRequired"];
$typecheck = $_GET["sTypeCheck"];
$val = $_GET["val"];
}
$res='';
if($typecheck=='email' && !empty($val))
{
$resq=validateEmail($val);
}
if(empty($val) && $required=='required')
{
$res='Required Fields';
}
else
{
if(empty($res))
$res=$resq;
else
$res='OK';
}
echo trim($res);
function validateEmail($val)
{
if (ereg ("^([0-9a-zA-Z]+[-._+&])*[0-9a-zA-Z]+@([-0-9a-zA-Z]+[.])+[a-zA-Z]{2,6}$", $val))
{
$em='OK';
}
else
{
$em="Invalid Email Address";
}
return $em;
}
?>
index.html
HTML 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" xml:lang="en" lang="en">
<head>
<title>Ajax Form</title>
<script type="text/javascript" src="validate.js"></script>
</head>
<body>
<fieldset>
<legend>Ajax Form</legend>
<form name="form1" id="form1" method="post" action="formvalidation.php" onSubmit="javascript: return attachFormHandlers();">
<table width="500">
<tr><td><div id="gShow"></div></td></tr>
<tr>
<td width="130">Username </td>
<td width="170"><input type="text" name="user" tabindex="1" id="user" class="validate required none usermsg"/></td>
<td id ="usermsg" class="rules"></td>
</tr>
<tr>
<td>Email </td>
<td><input type="text" name="email" tabindex="2" id="email" class="validate required email emailmsg" /></td>
<td id="emailmsg" class="rules"></td>
</tr>
<tr>
<td><input type="submit" name="Submit" value="Submit" tabindex="5" /></td>
</tr>
</table>
</form>
</fieldset>
</body>
</html>
javascript
Code:
//window.onload = attachFormHandlers;
var gShow; //error handling
var sUrl = "formvalidation.php?validationtype=ajax&val=";
var gErrors = 0;
var http
http = getHTTPObject();
function attachFormHandlers()
{
//alert("in attach");
var form = document.getElementById('form1');
if (document.getElementsByTagName)
{
var objInput = document.getElementsByTagName('input');
for (var iCounter=0; iCounter<form.length; iCounter++)
{
if(document.form1.elements[iCounter].type=='text')
{
alert("calling validateme for "+document.form1.elements[iCounter]);
validateMe(document.form1.elements[iCounter]);
}
}
}
if(gErrors<=0)
{
document.form1.submit();
return false;
}
else
{
alert("Fill all Required fields");
return false;
}
}
/*validateMe is the function called with onblur each time the user leaves the input box
passed into it is the value entered, the rules (which you could create your own), and the id of the area the results will show in*/
function validateMe(objInput) {
var str;
sVal = objInput.value;
//alert(sVal);
sRules = objInput.className.split(' ');
sRequired = encodeURI(sRules[1]);
sTypeCheck = encodeURI(sRules[2]); //typecheck are additional validation rules (ie. email, phone, date)
gShow = sRules[3];
/*Post*/
str=sUrl + sVal + "&sRequired=" + (sRequired) + "&sTypeCheck=" + sTypeCheck + "&req=POST";
http.open("POST","formvalidation.php",true);
http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
http.setRequestHeader("Content-length",str.length);
http.setRequestHeader("Connection", "close");
http.onreadystatechange=handleHttpResponse;
http.send(str);
/*GET
http.open("GET", sUrl + (sVal) + "&sRequired=" + (sRequired) + "&sTypeCheck=" + sTypeCheck, true);
http.onreadystatechange = handleHttpResponse; // handle what to do with the feedback
http.send(null); */
}
function handleHttpResponse() {
if (http.readyState == 4)
{
if(http.status == 200)
{
sResults = http.responseText.split(","); //results is now whatever the feedback from
if(sResults[0] != 'OK')
{
gErrors = gErrors + 1;
document.getElementById(gShow).innerHTML=http.responseText;
return false;
}
}
else if (http.status == 404)
{
alert ("Requested URL is not found.");
return false;
}
else if (http.status == 403)
{
alert("Access denied.");
return false;
}
else
{
document.getElementById(gShow).innerHTML="status is : "+http.status;
return false;
}
}
return false;
}
function getHTTPObject() {
var xmlhttp=null;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject) {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
if anyone has time then please let me known why with that simple one alert statement things goes fine and if its not there the form simply get submitted pathetic its my thrid day with this prob cann't think of using ajax horrible .no sloution for such kinds of prob i might be doing some silly error also.....anywayz please look in these file and let me known if u found me wrong on smallest or sillest things
Would be a great help
Regards,
-: 
Bookmarks