0

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");

          }
?>

Edited by Nick Evan: Fixed formatting

2
Contributors
25
Replies
27
Views
6 Years
Discussion Span
Last Post by twiss
0

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.

0

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>
0

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" />
0

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);
};
};
0

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

0
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.

Edited by twiss: n/a

0

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

0

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

0

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).

0

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");

}
?>
0
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);
};
};
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.