Jump to content

What's Wrong With My Ajax?


hybrid kill3r
 Share

Recommended Posts

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>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...