Ajax validation for email

Question

techyworld 0 Junior Poster in Training

13 Years Ago

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

          }
?>

javascript

Edited 11 Years Ago by Nick Evan because: Fixed formatting

2 Contributors
25 Replies
1K Views
17 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by twiss

twiss 155 Veteran Poster

13 Years Ago

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.

twiss 155 Veteran Poster

13 Years Ago

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>

twiss 155 Veteran Poster

13 Years Ago

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

twiss 155 Veteran Poster

13 Years Ago

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

twiss 155 Veteran Poster

13 Years Ago

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 13 Years Ago by twiss because: n/a

Reply to this topic

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.

techyworld 0 Junior Poster in Training · Answer 1 · 2011-09-24T16:58:42+00:00

techyworld 0 Junior Poster in Training

13 Years Ago

it does not give me any error!!!

techyworld 0 Junior Poster in Training · Answer 2 · 2011-09-24T18:28:35+00:00

techyworld 0 Junior Poster in Training

13 Years Ago

hmmm.cant find it!!

techyworld 0 Junior Poster in Training · Answer 3 · 2011-09-24T22:35:30+00:00

techyworld 0 Junior Poster in Training

13 Years Ago

GET method is not easier?

techyworld 0 Junior Poster in Training · Answer 4 · 2011-09-24T22:40:26+00:00

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

techyworld 0 Junior Poster in Training · Answer 5 · 2011-09-24T22:54:36+00:00

techyworld 0 Junior Poster in Training

13 Years Ago

ok

techyworld 0 Junior Poster in Training · Answer 6 · 2011-09-24T23:00:29+00:00

techyworld 0 Junior Poster in Training

13 Years Ago

ok

techyworld 0 Junior Poster in Training · Answer 7 · 2011-09-24T23:23:05+00:00

techyworld 0 Junior Poster in Training

13 Years Ago

it doesnot work.

twiss 155 Veteran Poster · Answer 8 · 2011-09-24T23:47:20+00:00

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

techyworld 0 Junior Poster in Training · Answer 9 · 2011-09-24T23:57:33+00:00

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

twiss 155 Veteran Poster · Answer 10 · 2011-09-25T00:00:13+00:00

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

techyworld 0 Junior Poster in Training · Answer 11 · 2011-09-25T00:03:46+00:00

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

twiss 155 Veteran Poster · Answer 12 · 2011-09-25T00:12:06+00:00

How about, prepare an element to get that message,

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

?
Further, read this javascript tut.

techyworld 0 Junior Poster in Training · Answer 13 · 2011-09-25T00:18:25+00:00

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

twiss 155 Veteran Poster · Answer 14 · 2011-09-25T00:22:37+00:00

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

techyworld 0 Junior Poster in Training · Answer 15 · 2011-09-25T00:32:37+00:00

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

}
?>

twiss 155 Veteran Poster · Answer 16 · 2011-09-25T00:38:15+00:00

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

techyworld 0 Junior Poster in Training · Answer 17 · 2011-09-25T00:46:13+00:00

techyworld 0 Junior Poster in Training

13 Years Ago

can you explain me briefly the ajax code?

twiss 155 Veteran Poster · Answer 18 · 2011-09-25T00:50:25+00:00

twiss 155 Veteran Poster

13 Years Ago

Which part?

techyworld 0 Junior Poster in Training · Answer 19 · 2011-09-25T00:52:29+00:00

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

twiss 155 Veteran Poster · Answer 20 · 2011-09-25T01:07:19+00:00

twiss 155 Veteran Poster

13 Years Ago

I already posted that, a while back.