I am facing problems passing an email address to a php file through AJAX. The code I am using is pretty basic but I can't seem to get it to work. Could anyone help me understand what's going wrong? I amd pretty new to Ajax (about 2 days old) so please forgive me if this seems pretty lame.

function emailchk () {
	if (!document.getElementById("email").value) {
		document.getElementById("emailmsg").innerHTML = " ";
	}
	else {
		url = "emailchk.php?email=" + document.getElementById("email").value;
		if (window.XMLHttpRequest) {
			xhr = new XMLHttpRequest();
		}
		else {
			if (window.ActiveXObject) {
				try {
					xhr = new ActiveXObject("Microsoft.XMLHTTP");
				}
				catch (e) { }
			}
		}
	
		if (xhr) {
			xhr.onreadystatechange = showEmailContents;
			xhr.open("GET", url, true);
			xhr.send(null);
		}
		else {
			alert("Sorry, but I couldn't create an XMLHttpRequest");
		}
		return false;
	}
}

function showEmailContents() {
	if (xhr.readyState == 4) {
		if (xhr.status == 200) {
			var outMsg = xhr.responseText;
		}
		else {
			var outMsg = "There was a problem with the request " + xhr.status;
		}
		document.getElementById("emailmsg").innerHTML = outMsg;
		if (outMsg == "Email already exists") {
			document.getElementById("validate").value = "no";
		}
		else {
			document.getElementById("validate").value = "yes";
		}
	}
}

The PHP file is also pretty basic...

<?php
include ("dbconfig.php");
$sql = "select name from users where email = '$_POST[email]'";
$result = mysql_query ($sql, $conn) or die ("could not query database");

if (mysql_num_rows($result)) {
	print "Email already exists";
}
else {
	print "Email is available";
}

?>

Thanks in advance...

Try to recall all the lines of your code!

function emailchk () 
{ //Refering to what value?--> 
if (!document.getElementById("email").value) {
document.getElementById("emailmsg").innerHTML = " ";
}
else {
url = "emailchk.php?email=" + document.getElementById("email").value; //Missing curly!-->

} //So we'l have to add our end curly for this block! 

if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}

/* else { * This is not necessary for this line! */

if (window.ActiveXObject) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) { }
}
if (xhr) {
xhr.onreadystatechange = showEmailContents;
xhr.open("GET", url, true);
xhr.send(null);
}
else {
alert("Sorry, but I couldn't create an XMLHttpRequest");
}
return false;
}

function showEmailContents() {
if (xhr.readyState == 4&& xhr.status == 200) {
var outMsg = xhr.responseText;
}
else {
var outMsg = "There was a problem with the request " + xhr.status;
}
document.getElementById("emailmsg").innerHTML = outMsg;

if (outMsg == "Email already exists") {
document.getElementById ("validate").value = "no";
}
else {
document.getElementById ("validate").value = "yes";
  }
}

Am not sure if this wil work, but it never hurts to try!
Good day to you!

Actually the code is working but it doesn't seem to pass the email address to the php file. If I try to pass a normal string that seems to work - but for some reason, I cannot pass an email address as a GET variable. Can it be something to do with the @ sign?

If you are able to pass other strings except email them try to url encode the email to send it
u can do the following
url = "emailchk.php?email=" +URLencode(document.getElementById("email").value);

It should work fine.

> Can it be something to do with the @ sign?

Yes.

Make sure you *always* encode user entered data; at least when making asynchronous calls using Ajax. Normal submits automatically encode the form data for you. Use encodeURIComponent.

This article has been dead for over six months. Start a new discussion instead.