Ajax validation

stevenazari1

stevenazari1

stevenazari1

Permabanned
Joined
21 Oct 2007
Posts
1,518
Hi guys, Im trying to create a simple registration in ajax. user enters their details and if theres an error like a username taken or they dont enter anything for a field, a tick or cross appears.

for some reason its not displaying the graphics so I cant tell where the issue is.... can anyone help? here is the register.php code:

<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
function register(current) //use parameter
{
//do the AJAX
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
writeable.innerHTML=xmlHttp.responseText;//reprint text on screen
}
}

if (current==1)
{
username=document.register.username.value
var url="checkusername.php?currentusername="+username;
var url="checkusernameavailable.php?currentusername="+username;

xmlHttp.open("GET",url,true);
writeable=valpicture
xmlHttp.send(null);
}
if (current==2)
{
password=document.register.password.value
var url="checkpassword.php?currentpassword="+password;

xmlHttp.open("GET",url,true);
writeable=valpicture2
xmlHttp.send(null);
}
if (current==3)
{
firstname=document.register.firstname.value
var url="checkfirstname.php?currentfirstname="+firstname;

xmlHttp.open("GET",url,true);
writeable=valpicture3
xmlHttp.send(null);
}
if (current==4)
{
surname=document.register.surname.value
var url="checksurname.php?currentsurname="+surname;

xmlHttp.open("GET",url,true);
writeable=valpicture4
xmlHttp.send(null);
}
if (current==5)
{
dateofbirth=document.register.dateofbirth.value
var url="checkdateofbirth.php?currentdateofbirth="+dateofbirth;

xmlHttp.open("GET",url,true);
writeable=valpicture5
xmlHttp.send(null);
}
if (current==6)
{
gender=document.register.gender.value
var url="checkgender.php?currentgender="+gender;

xmlHttp.open("GET",url,true);
writeable=valpicture6
xmlHttp.send(null);
}
if (current==7)
{
address1=document.register.address1.value
var url="checkaddress1.php?currentaddress1="+address1;

xmlHttp.open("GET",url,true);
writeable=valpicture7
xmlHttp.send(null);
}
if (current==8)
{
address2=document.register.address2.value
var url="checkaddress2.php?currentname="+address2;

xmlHttp.open("GET",url,true);
writeable=valpicture8
xmlHttp.send(null);
}
if (current==9)
{
city=document.register.city.value
var url="checkcity.php?currentcity="+city;

xmlHttp.open("GET",url,true);
writeable=valpicture9
xmlHttp.send(null);
}
if (current==10)
{
country=document.register.country.value
var url="checkcountry.php?currentcountry="+country;

xmlHttp.open("GET",url,true);
writeable=valpicture10
xmlHttp.send(null);
}
if (current==11)
{
postcode=document.register.postcode.value
var url="checkpostcode.php?currentpostcode="+postcode;

xmlHttp.open("GET",url,true);
writeable=valpicture11
xmlHttp.send(null);
}
if (current==12)
{
email=document.register.email.value
var url="checkemail.php?currentemail="+email;
writeable=valpicture12
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

}
//-->
</script>
</head>

<body text="#FFFFFF" bgcolor="#336699">

<table border="0" width="100%" cellspacing="0" cellpadding="0">
<form action="" name="register">
<tr>
<td width="50%"><font face="Arial Narrow" size="2">Register</font></td>
<td width="20%">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td width="50%" align="right">
<p align="right"><font size="2" face="Arial Narrow">Username:</font></td>
<td width="20%"><font face="Arial Narrow"><input type="text" name="username" onkeyup="javascript:register(1)"> Minimum 5 Letters</font></td>
<td><span id="valpicture"></span></td>
</tr>
<tr>
<td width="50%" align="right">
<p align="right"><font size="2" face="Arial Narrow">Password:</font></td>
<td width="20%"><font face="Arial Narrow"><input type="password" name="password" onkeyup="javascript:register(2)">Minimum
5 letters</font></td>
<td><span id="valpicture2"></span></td>
</tr>
<tr>
<td width="50%" align="right">
<p align="right"><font size="2" face="Arial Narrow">Firstname:</font></td>
<td width="20%"><font face="Arial Narrow"><input type="text" name="firstname" onkeyup="javascript:register(3)"></font></td>
<td><span id="valpicture3"></span></td>
</tr>
<tr>
<td width="50%" align="right"><font size="2" face="Arial Narrow">Surname:</font></td>
<td width="20%"><font face="Arial Narrow"><input type="text" name="surname" onkeyup="javascript:register(4)"></font></td>
<td><span id="valpicture4"></span></td>
</tr>
<tr>
<td width="50%" align="right"><font size="2" face="Arial Narrow">Date Of Birth:</font></td>
<td width="20%"><font face="Arial Narrow"><input type="text" name="dateofbirth" onkeyup="javascript:register(5)"></font></td>
<td><span id="valpicture5"></span></td>
</tr>
<tr>
<td width="50%" align="right"><font size="2" face="Arial Narrow">Gender:</font></td>
<td width="20%"><font face="Arial Narrow"><input type="text" name="gender" onkeyup="javascript:register(6)"></font></td>
<td><span id="valpicture6"></span></td>
</tr>
<tr>
<td width="50%" align="right"><font size="2" face="Arial Narrow">1st Line Address:</font></td>
<td width="20%"><font face="Arial Narrow"><input type="text" name="address1" onkeyup="javascript:register(7)"></font></td>
<td><span id="valpicture7"></span></td>
</tr>
<tr>
<td width="50%" align="right"><font size="2" face="Arial Narrow">2nd Line Address:</font></td>
<td width="20%"><font face="Arial Narrow"><input type="text" name="address2" onkeyup="javascript:register(8)"></font></td>
<td><span id="valpicture8"></span></td>
</tr>
<tr>
<td width="50%" align="right"><font size="2" face="Arial Narrow">Town/City:</font></td>
<td width="20%"><font face="Arial Narrow"><input type="text" name="city" onkeyup="javascript:register(9)"></font></td>
<td><span id="valpicture9"></span></td>
</tr>
<tr>
<td width="50%" align="right"><font size="2" face="Arial Narrow">Country:</font></td>
<td width="20%"><font face="Arial Narrow"><input type="text" name="country" onkeyup="javascript:register(10)"></font></td>
<td><span id="valpicture10"></span></td>
</tr>
<tr>
<td width="50%" align="right"><font size="2" face="Arial Narrow">Postcode:</font></td>
<td width="20%"><font face="Arial Narrow"><input type="text" name="postcode" onkeyup="javascript:register(11)"></font></td>
<td><span id="valpicture11"></span></td>
</tr>
<tr>
<td width="50%" align="right"><font size="2" face="Arial Narrow">Email:</font></td>
<td width="20%"><font face="Arial Narrow"><input type="text" name="email" onkeyup="javascript:register(12)"></font></td>
<td><span id="valpicture12"></span></td>
</tr>
<tr>
<td width="50%" align="right">&nbsp;</td>
<td width="20%"><input type="submit" name="submit" value="submit"></td>
<td>&nbsp;</td>
</tr>
</form>
</table>
</body>
</html>
Click to expand...

and this is the checkusername.php code:

<?$username=$_GET["currentusername"];

$length=strlen($username);


if ($length<5)
{
echo ("<img src='cross.gif'>");
}
else
{
echo ("<img src='tick.gif'>");
}
?>
Click to expand...

and this is to check for username availability:

<?$username=$_GET["currentusername"];

include ("conninfo.php");
$query="SELECT * FROM login WHERE username like '$username'";
$result=mysql_query($query);

$numrows=mysql_num_rows($result);


if ($numrows>=1)
{
echo ("Username is taken");
}
else
{
echo ("Username is not taken");
}
?>
Click to expand...

can you see whats wrong cos I cant :confused: pls help :)

steve
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom