Question

I am trying to send a AJAX request to the server when a user submits a form, I am doing this to check out if that email is already in use by someone else or if it is new.

This is my javascript AJAX function

function check_entireform()
{ 
    var new_email = document.getElementById('jemail').value;
    var xmlhttp;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            var y =xmlhttp.responseText;
            if(y=="user with that email is already registered")
                return false;
        }
    }

    var x ="user_exists.php?email="+ new_email;
    xmlhttp.open("GET",x,true);
    xmlhttp.send();
}

This is my html input tag

<form method="post" action="./new.php" onsubmit="return check_entireform()">
<input type="text" name="email" id="jemail"/>
</form>

This is my user_exists.php file

   <?php
     $email=$_GET["email"];
     if(mysql_query("SELECT email FROM user_info WHERE email='$email'"))
       echo "user with that email is already registered";
     else
       echo"user got a new email";
   ?>

When the user submits the form, I would like to send the user email to the user_exists.php file through the AJAX and then check out if that email is already in use by someone and echo back some information if it already in use.

I don’t know where it’s going wrong. I have been submiting same email but it does not echo and does not stop me from submitting the form.

If there are any better solutions to find out if email is already in use by someone would be great.Thanks

Answer 1

The first A in AJAX is for Asynchronous.

It means that the callback function (the one you defined for onreadystatechange) will only run when the server responds. On the other hand, your submit handler check_entireform will return much earlier than that. It returns undefined, which evaluates to false, so your form is not submitted.

Whatever you want to do, you should do in the callback function.

Always prevent submission and pass reference to form:

<form method="post" action="./new.php" onsubmit="check_entireform(this); return false;">

Accept the reference:

function check_entireform(theform) {

Then submit the form if needed:

   if (xmlhttp.readyState==4 && xmlhttp.status==200)
   {
        var y =xmlhttp.responseText;
        if(y != "user with that email is already registered")
            theform.submit();
   }

jsFiddle Demo – without AJAX, only simulation

---

Return something more logical from your PHP

Tip: Instead of returning a long string from PHP, you should simply return 0 or 1. You should think of the AJAX query like a Yes-No question in this case (Can this email be used?). 1 will mean Yes while 0 will mean No.

So you could change your code to:

        var canBeUsed =xmlhttp.responseText;
        if (canBeUsed) theform.submit();

It will become much easier to read and maintain.

---

URL-encode query string parameter values

In this line:

 var x ="user_exists.php?email="+ new_email;

You should URL encode the new_email variable, because certain characters (like &) have a special meaning in the query string and shall be encoded. You can use the encodeURIComponent() function to do this:

 var x ="user_exists.php?email="+ encodeURIComponent(new_email);

---

Sanitize input in your PHP

ALWAYS sanitize (and validate) any data that comes from the outside. In its current form, your code is vulnerable to SQL Injection, which is a HUGE problem.

Before inserting data into your query, you should use mysql_real_escape_string() on it (or even better, use PDO for your database stuff).

 $email = mysql_real_escape_string($_GET["email"]);
 if(mysql_query("SELECT email FROM user_info WHERE email='$email'"))