What's Wrong With My Ajax?

[hybrid kill3r]

I've been trying to figure out this ajax for days now and it's starting to irritate me. When the form is submitted, I want it to call the verifyLogin script, which will call the PHP file with ajax and will execute the form validation script(validateLogin). I output my errors with XML in the PHP file. When I submit the form, I purposely enter invalid information(wrong username out of one database record) but nothing happens at all. At the end of my readystate if statement, I alert the actual readystate number if it isn't equal to 4. It alerts "undefined" as the readystate four or five times. I've tried using plain text instead of XML but it doesn't seem very practical for form validation. Firebug's error console does not output any errors, neither before nor after submitting the form. Please tell me what is wrong!java script:

// JavaScript Documentfunction verifyLogin(){		var loginName = document.getElementById("loginName");	var password = document.getElementById("password");		if(window.XMLHttpRequest){			xhr = new XMLHttpRequest();	} else {		if(window.ActiveXObject){			try {					xhr = new ActiveXObject("Microsoft.XMLHTTP");			}			catch(e){}		}	}	if(xhr){		xhr.onreadystatechange=validateLogin;		xhr.open("GET", "ajax/login.php?act=verify&loginname="+loginName+"&password="+password, true);		xhr.send(null);	} else {		alert("Sorry, but I couldn't make an XMLHttpRequest.");	}}function validateLogin(){		if(xhr.readystate == 4){		if(xhr.status  == 200){							var nameMessage = xhr.responseXML.getElementsByTagName("error1");	var passMessage = xhr.responseXML.getElementsByTagName("error2");		var nameUpdate = document.getElementsById("nameUpdate");	var passUpdate = document.getElementsById("passUpdate");		if(nameMessage.length != 0){		alert(nameMessage);		return false;	} else if(passMessage.length != 0){		passUpdate.innerHTML = passUpdate;		return false;	} else {		return true;	}		}	} else {		alert("Error making request."+xhr.readystate);			}	}

Ajax/login.php:

<?phpmysql_connect('localhost', 'root', '');mysql_select_db('wartech');switch($_GET['act']){	case "verify":		echo '<?xml version="1.0" encoding="ISO-8859-1"?><errors>';			$query = mysql_query("SELECT * FROM members WHERE loginName = '".$_GET['loginname']."' LIMIT 1") or die("Error: ".mysql_error());		if(mysql_num_rows($query) == 0){			echo "<namemessage>Name doesn't exist!</namemessage>";		} else {			echo "<namemessage></namemessage>";				$fetch = mysql_fetch_array($query);				if($_GET['password'] != $fetch['loginPass']){					echo "<passmessage>Incorrect password!</passmessage>";				} else {					echo "<passmessage></passmessage>";				}		}					break;		default: 		echo "Invalid action.";			break;}?>

Form:

<form action='#' method='POST' id='login' onSubmit="return verifyLogin();" /><table align='center' cellspacing='1' cellpadding='1' border='0'>			<tr>				<td align='right'>Login Name: </td>				<td align='left'><input type='text' name='loginname' id='loginname' size='40' value='Login Name' onclick="this.value = null;"/></td>				<td align='left'><span id='nameUpdate'></span><br /><span id='passUpdate'></span></td>				<td align='left' rowpspan='2'><input type='image' src='template/images/go.png' border='0' name='submit' value='Login'/></td>				<td align='right' id='loginmessage'></td>			</tr><tr>				<td align='right'>Password: </td>				<td align='left'><input type='password' name='password' id='password' size='40' value='Password' onclick='this.value=null;'/></td>   			</tr>		</table></form>

[Ingolme]

You need to make xhr a global variable.Put this line of code before everything else in the code:

var xhr;

[hybrid kill3r]

As in above the beginning of the verifyLogin function? Didn't change anything.

[justsomeguy]

It should have changed the readyState from being undefined. If it still says undefined it sounds like you didn't do it correctly. In Firebug also check on the Net tab and see if you see the request going out.