I'm doing a registration form.I want to validate the email address before submitting the form using ajax.That is to verify if the email address already exist in the database.Can anyone help me please?I don't know what's wrong with these code!

regist.html:

<html>
<head>

<script type="text/javascript">

var http_request; //global variable
function makePOSTRequest(url, parameters) {
  http_request = false;
  /* For Firefox*/   
  if (window.XMLHttpRequest) { 
         http_request = new XMLHttpRequest();
  } else /*For IE*/
     if (window.ActiveXObject) { 
          try {
             /*For some versions of IE*/
             http_request = new ActiveXObject("Msxml2.XMLHTTP");
          } catch (e) {
             try {
                /*For some other versions of IE*/
                http_request = new ActiveXObject("Microsoft.XMLHTTP");
             } catch (e) {}
         }
      }


   if (!http_request) {
    alert('Cannot create XMLHTTP instance');
    return false;
}

 function AjaxFunction(email)
 {
    alert(email);
    xmlhttp = createXMLHttpRequest() ;
    xmlhttp.open("GET","regist_pro.php?email=" + email, true);
    xmlhttp.onreadystatechange  = function() {
        if (xmlhttp.readyState  = 4) 
        { 
            return; 
        }
        document.getElementById("emailtext").innerHTML=xmlhttp.responseText;
    };

    xmlhttp.send(null);
}


function createXMLHttpRequest() {
   try 
   { 
    return new XMLHttpRequest(); 
   } 
   catch(e) 
   {}
   try 
   { 
    return new ActiveXObject("Msxml2.XMLHTTP"); 
   } 
   catch (e) 
   {}
   alert("XMLHttpRequest not supported");
   return null;


 </script>
</head>

<body>
<table cellpadding="2" height='3'>
                <div id="user">
                    <form method="get" action="regist_pro.php"name="name">
                    <tr>                         
                        <td><font size='2'>First name: </font></td>
                        <td><input  name="firstname" type="text" /></td>

                        <td><font size='2'>Email Address: </font></td>
                        <td><input  name="email" type="text" onmouseout="javascript:AjaxFunction(this.value);"/></td>
                        <td><font size='2'>Sex:</font> 
                        <select name="sex">
                            <option>Female</option>
                            <option>Male</option>
                        </td>
                    </tr>

                    <tr>
                        <td><font size='2'>Last name: </font></td>
                        <td><input  name="lastname" type="text" /></td>

                        <td><font size='2'>Password: </font></td>
                        <td><input  name="password" type="password" /></td>
                        <td><font size='2'>Birthday: </font></td>
                        <td>
                    </tr>    
                    <tr>                                                 
                        <td colspan='2' align='right'><input type="submit" name="submit" value="Register" size='5'/></td>
                        <td align='right'><input type="reset" name="reset" value="Reset" size='5'/></td>
                    </tr>    
                    </form>
                    </div>
                    <div id="emailtxt">esfs</div>
</table>
</body>
</html>

regist_pro.php:

<?php    
        session_start();
        include ("db_connect.php");

        $fname = $_GET['firstname'];
        $lname = $_GET['lastname'];
        $email = $_GET['email'];
        $password = $_GET['password'];
        $sex = $_GET['sex'];
        //$birthday= $_GET['birthday'];

        $Select= "Select * FROM registration Where email='$email'";
        $rs=mysql_query($Select);
        if (mysql_num_rows($rs) > 0) 
            {
                  mysql_close($con);
                  echo "Email Address already exists.";
        }
        else{
        mysql_query("INSERT INTO registration (firstname, lastname,email,password,sex,birthday)
        VALUES ('$fname', '$lname','$email','$password','$sex', '$birthday')");


                mysql_close($con);
          header("Location: chat.html");

          }
?>

I believe you're missing a semicolon (didn't look to the rest in-depth, but some things seem strange to me). Besides, if you put your code in [code] and [/code] tags and indent it, such errors are much easier to spot. Also, if you open a console in chrome (or whatever browser, really) it should give you useful errors, too.

it does not give me any error!!!

It certainly will. Look at your own code, and you'll see that it's incorrect.

<script type="text/javascript">
var http_request; //global variable
function makePOSTRequest(url, parameters) {
	http_request = false;
	/* For Firefox*/
	if (window.XMLHttpRequest) {
		http_request = new XMLHttpRequest();
	} else /*For IE*/
		if (window.ActiveXObject) {
		try {
			/*For some versions of IE*/
			http_request = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
				/*For some other versions of IE*/
				http_request = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {}
		}
	}


	if (!http_request) {
		alert('Cannot create XMLHTTP instance');
		return false;
	}

	function AjaxFunction(email)
	{
		alert(email);
		xmlhttp = createXMLHttpRequest() ;
		xmlhttp.open("GET","regist_pro.php?email=" + email, true);
		xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState = 4)
		{
			return;
		}
		document.getElementById("emailtext").innerHTML=xmlhttp.responseText;
	};
	
	xmlhttp.send(null);
}
	
	
function createXMLHttpRequest() {
	try
	{
		return new XMLHttpRequest();
	}
	catch(e)
	{}
	try
	{
		return new ActiveXObject("Msxml2.XMLHTTP");
	}
	catch (e)
	{}
	alert("XMLHttpRequest not supported");
	return null;
</script>

hmmm.cant find it!!

Okay, look at this, try to understand what it does, don't worry if you don't but ask. Not tested.

function getXMLHttpRequest() {
	var httpRequest = false;
	if(window.XMLHttpRequest)
		httpRequest = new window.XMLHttpRequest();
	else if(window.ActiveXObject) {
		try {
			httpRequest = new window.ActiveXObject('Msxml2.XMLHTTP.6.0');
		} catch(er) {
			try {
				httpRequest = new window.ActiveXObject('Msxml2.XMLHTTP.3.0');
			} catch(err) {}
		}
	}
	if(!httpRequest) throw "Couldn't create XMLHttpRequest object.";
	return httpRequest;
}

function checkEmail(email) {
	var httpRequest = getXMLHttpRequest();
	
	httpRequest.onreadystatechange = function() {
		if(httpRequest.readyState == 4) {
			var success = httpRequest.status == 200,
				data = httpRequest.responseText;
			
			// do some stuff
		}
	};
	
	httpRequest.open('POST', 'regist_pro.php');
	httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	httpRequest.send('email=' + escape(email));
}

window.onload = function() {
	document.getElementById('email').onblur = function() {
		checkEmail(this.value);
	};
};

and then:

<input name="email" type="text" id="email" />

GET method is not easier?

Can you explain me this part:

function checkEmail(email) {
var httpRequest = getXMLHttpRequest();
 
httpRequest.onreadystatechange = function() {
if(httpRequest.readyState == 4) {
var success = httpRequest.status == 200,
data = httpRequest.responseText;
 
// do some stuff
}
};
 
httpRequest.open('POST', 'regist_pro.php');
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
httpRequest.send('email=' + escape(email));
}
 
window.onload = function() {
document.getElementById('email').onblur = function() {
checkEmail(this.value);
};
};

Well, that's not really all that much of a difference. If you want get, make it get.

function checkEmail(email) {
	var httpRequest = getXMLHttpRequest();
		// get a request object as per the function above	
	
	httpRequest.onreadystatechange = function() {
		// when the state of the request changes...
		if(httpRequest.readyState == 4) {
			// check if the state == 4, which means, finished
			var success = httpRequest.status == 200,
					// bool indicating success
				data = httpRequest.responseText;
					// raw response
			
			// do some stuff
		}
	};
	
	httpRequest.open('POST', 'regist_pro.php');
		// open the connection
	httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		// set the urlencoded header
	httpRequest.send('email=' + escape(email));
		// send the request and set email={the email address}
}

window.onload = function() {
	// when the doc finished loading
	document.getElementById('email').onblur = function() {
		// when your #email input element loses focus
		checkEmail(this.value);
			// check its value
	};
};

As for my 'do some stuff', it depends on what you want to do.

ok

ok

it doesnot work.

Does chrome give any error? Do you have it live somewhere?

yes. i try it on firefox and opera.no it does not give me any error!

Did you put an alert at // do someting ? Something? Just debug a bit.

yes i did put an alert.this one works :) but i want it to display "email address already exists".

How about, prepare an element to get that message,

document.getElementById('itsId').innerHTML = 'Email address already exists.';

?
Further, read this javascript tut.

now it displays the message "Email address already exists" for all input, even if the email address is not in database!

Yop. On the right track. You'll need to check the response against something that you choose to mean 'already existing', and if it is, display the message. You might also want to set document.getElementById('submitButton').disabled = true/false (depending).

my regist_pro.php file, is it good?

<?php
session_start();
include ("db_connect.php");

$fname = $_GET['firstname'];
$lname = $_GET['lastname'];
$email = $_GET['email'];
$password = $_GET['password'];
$sex = $_GET['sex'];
$birthday= $_GET['birthday'];

$Select= "Select * FROM registration Where email='$email'";
$rs=mysql_query($Select);
if (mysql_num_rows($rs) > 0)
{
mysql_close($con);
echo "Email Address already exists.";
}
else{
mysql_query("INSERT INTO registration (firstname, lastname,email,password,sex,birthday)
VALUES ('$fname', '$lname','$email','$password','$sex', '$birthday')");


mysql_close($con);
header("Location: chat.html");

}
?>

Also okay. Just innerHTML = responseText, and if responseText != '' disable button.

can you explain me briefly the ajax code?

Which part?

function checkEmail(email) {
var httpRequest = getXMLHttpRequest();
 
httpRequest.onreadystatechange = function() {
if(httpRequest.readyState == 4) {
var success = httpRequest.status == 200,
data = httpRequest.responseText;
 
// do some stuff
}
};
 
httpRequest.open('POST', 'regist_pro.php');
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
httpRequest.send('email=' + escape(email));
}
 
window.onload = function() {
document.getElementById('email').onblur = function() {
checkEmail(this.value);
};
};

I already posted that, a while back.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.