'Problems returning false after using XMLHttpRequest

I have found this Related entry and a few others but I have not quite found my answer so I am posting new. I am trying to run a database query from JavaScript using what I understand of Ajax. I need to return false if the email is already in the database and return true if it does not, but I cannot seem to figure out what I am doing wrong. I have posted my first attempt before I started messing around and making it messy.

JavaScript: It seems to return true no matter what.

function emailvalid(){

var email = document.getElementById('email').value;
var confirmemail = document.getElementById('cemail').value;
if(email != '' && confirmemail != '')
{
    if(email == '')
    {
        document.getElementById('email').style.backgroundColor ='red';
        document.getElementById('tdemail').style.color = 'red';
        document.getElementById('tdemail').innerHTML = 'You must enter a valid email address.';
        document.getElementById('tdcemail').innerHTML = '';
        document.getElementById('cemail').value = '';
        return false;
    }
    
xmlhttp = new XMLHttpRequest();
var url="phpfiles/checkemail.php";
url = url+"?email="+email+"&cemail="+confirmemail;
xmlhttp.onreadystatechange = function()
{
    if (xmlhttp.readyState==4)
    {
        var answer = xmlhttp.responseText;
        if(answer == 'r0')
        {
        
        document.getElementById('email').style.backgroundColor ='green';
        document.getElementById('tdemail').style.color = 'red';
        document.getElementById('tdemail').innerHTML = 'This email address is already associated with an exiting account. Please login or use a different email address.';
        document.getElementById('tdcemail').innerHTML = '';
        document.getElementById('cemail').value = '';
        return false;
        }
        else if(answer == 'r1')
        {
        
        document.getElementById('tdemail').style.color = 'green';
        document.getElementById('email').style.backgroundColor ='green';
        document.getElementById('tdemail').innerHTML = "Emails match and are valid";
        document.getElementById('tdcemail').style.color = 'green';
        document.getElementById('tdcemail').innerHTML = "Emails match and are valid";
        document.getElementById('cemail').style.backgroundColor ='green';
        return true;
        }
        else if(answer == 'r2')
        {
        
        document.getElementById('tdemail').style.color = 'red';
        document.getElementById('email').style.backgroundColor ='red';
        document.getElementById('tdemail').innerHTML = "Email is not valid";
        document.getElementById('tdcemail').style.color = 'red';
        document.getElementById('tdcemail').innerHTML = "Email is not valid.";
        document.getElementById('cemail').style.backgroundColor ='red';
        return false;
        }
        else if(answer == 'r3')
        {
        
        document.getElementById('tdemail').style.color = 'green';
        document.getElementById('email').style.backgroundColor ='green';
        document.getElementById('tdemail').innerHTML = "Email is valid";
        document.getElementById('tdcemail').style.color = 'red';
        document.getElementById('tdcemail').innerHTML = "Emails do not match";
        document.getElementById('cemail').style.backgroundColor ='red';
        return false;
        }
        else if(answer == 'r4')
        {
        
        document.getElementById('tdemail').style.color = 'red';
        document.getElementById('email').style.backgroundColor ='red';
        document.getElementById('tdemail').innerHTML = 'Please enter a valid email address.';
        document.getElementById('tdcemail').style.color = 'red';
        document.getElementById('tdcemail').innerHTML = 'Please enter a valid email address.';
        document.getElementById('cemail').style.backgroundColor ='red';
        return false;
        }
    }
}
    xmlhttp.open("GET",url,true);
    xmlhttp.send(null);

}
else
{
    document.getElementById('tdemail').style.color = 'red';
    document.getElementById('email').style.backgroundColor ='red';
    document.getElementById('tdemail').innerHTML = "Email is not valid";
    document.getElementById('tdcemail').style.color = 'red';
    document.getElementById('tdcemail').innerHTML = "Email is not valid.";
    document.getElementById('cemail').style.backgroundColor ='red';
    return false;
}
}

The innerHTML stuff works just fine which is also why I am confused.

PHP: works fine as far as I can tell.

<?php
$email = $_GET['email'];
$cemail = $_GET['cemail'];
$emailvalidstring = "/^[a-z0-9]+([_\\.-][a-z0-9]+)*@([a-z0-9]+([\.-][a-z0-9]+)*)+\\.[a-z]{2,}$/i";
include('connection.php');

$checkemailquery = "SELECT email FROM users WHERE email='".$email."'";
$checkemailresult = mysql_query($checkemailquery);

// if query failed.
if(!$checkemailresult)
{
    $error = mysql_error();
    print $error;
    exit;
}
//if the query did run, the email exists. Print error and exit.
if(mysql_affected_rows() != 0)
{
    echo "r0";
    return false;   
}
else{
    if(preg_match($emailvalidstring, $email) && $email == $cemail)
    {
        echo "r1";
        return true;
    }
    else if(!preg_match($emailvalidstring, $email) && $email == $cemail)
    {
            echo "r2";
            return false;
    }
    else if(preg_match($emailvalidstring, $email) && $email != $cemail)
    { 
        echo "r3";
        return false;
    }
    else if(!preg_match($emailvalidstring, $email) && $email != $cemail)
    {
        echo "r4";
        return false;   
    }
}
?>

html: I have it do a double check, once to alert the user if it is already taken, and then a second check on the server to make sure it is still true. cemail is the confirmation email.

<form  id="newaccount" name="newaccount" method="post" action="phpfiles/accountcode.php" onSubmit="return emailvalid()" >
<input type="text" id="email" onBlur="emailvalid()"/>
<input type="text" id="cemail" onBlur="emailvalid()" />
<input type="submit" value="New"/>
</form>

I hope I have laid it out well enough. I am open to ANY ideas as I am rather new at this.



Solution 1:[1]

Not all code paths inside your emailvalid javascript function return a value. For example, after calling xmlhttp.send(null);, you're not returning anything.

Most of your return statements are actually returning from the anonymous function assigned to onreadystatechange, not from the emailvalid function, which I'm guessing is not what you want.

Solution 2:[2]

Not related to the issue: I spotted unreachable code here

    if(email != '' && confirmemail != '')
{
    if(email == '')
    {
        document.getElementById('email').style.backgroundColor ='red';
        document.getElementById('tdemail').style.color = 'red';
        document.getElementById('tdemail').innerHTML = 'You must enter a valid email address.';
        document.getElementById('tdcemail').innerHTML = '';
        document.getElementById('cemail').value = '';
        return false;
    }

The code inside 2nd "if" will never be executed because email != '' according to 1st "if".

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 mtelis