Question

I have created a registration system that uses AJAX to process the form so that I can return false. The relevant js is the top block of code. I pass this data to join.php, which sends it to the database. I run a check in join.php to make sure that nobody with a duplicate email has already signed up. As you can see, if the email already exists, I want to insert a message using javascript. Instead of reading the script tags, it simply pastes them into my alert in plaintext…so my alert has the datastring and then actually says the code <script>...</script>. How can I get this js to process instead?

Javascript:

$(".submit").click(function() {  
        var dataString = {
            school : $("#school").val(),
            studentEmail : $("#studentEmail").val(),
            studentPassword : $("#studentPassword").val(),
            parentEmail : $("#parentEmail").val(),
            parentPassword : $("#parentPassword").val(),
            studentFirstName : $("#studentFirstName").val(),
            studentLastName : $("#studentLastName").val(),
            studentPhone : $("#studentPhone").val(),
            parentFirstName : $("#parentFirstName").val(),
            parentLastName : $("#parentLastName").val(),
            parentPhone : $("#parentPhone").val()
        };
        $.ajax({
            type: "POST",
            url: "join.php",
            data: dataString,
            success: function(data) {
                alert ("data sent: "+ data);
            }
        });
        return false;
    }
});

join.php

if($_POST) {
    $school             = mysql_real_escape_string($_POST['school']);
    $studentEmail       = mysql_real_escape_string($_POST['studentEmail']);
    $parentEmail        = mysql_real_escape_string($_POST['parentEmail']);
    $studentFirstName   = mysql_real_escape_string($_POST['studentFirstName']);
    $studentLastName    = mysql_real_escape_string($_POST['studentLastName']);
    $studentPhone       = mysql_real_escape_string($_POST['studentPhone']);
    $parentFirstName    = mysql_real_escape_string($_POST['parentFirstName']);
    $parentLastName     = mysql_real_escape_string($_POST['parentLastName']);
    $parentPhone        = mysql_real_escape_string($_POST['parentPhone']);

    $check = mysql_query("SELECT studentEmail FROM clients WHERE  studentEmail = '{$studentEmail}';");
    $num = mysql_num_rows($check);


    if (($num) == 0) {

        $sql = "INSERT INTO clients ".
            "(`studentEmail`, `studentPassword`, `parentEmail`, `parentPassword`, ".
            "`studentFirstName`, `studentLastName`, `studentPhone`, `parentFirstName`, ".
            "`parentLastName`, `parentPhone`, `school`) ".
            " VALUES ('$studentEmail', '$studentPassword', '$parentEmail', ".
            "'$parentPassword', '$studentFirstName', '$studentLastName', ".
            "'$studentPhone', '$parentFirstName', '$parentLastName', '$parentPhone', '$school')";

        $result = mysql_query($sql);
        if ($result) { 
            echo "Database query successful!";
        }
        else {
            die("Database query failed: " . mysql_error()); 
        }

        include "emails/signUp.php";
    }
    else {
        echo 'FAIL

        <script>
            $(".formErrorMessage").html("Email already exists");
        </script>';
    }
}

Answer 1

The alert shows your script block because you’ve got this in your success handler:

alert ("data sent: "+ data);

Data is going to be whatever text you output in your PHP. If you want to have variable behavior based on whether your request was successful or not, I’d recommend that your PHP returns JSON containing a success flag and the message. Your JavaScript callback would then look like this:

function(data) {
    if (data.success) {
        alert ("data sent: "+ data.message);
    } else {
        $(".formErrorMessage").text(data.message);
    }
}

Your PHP should then change your content-type to JSON:

header('Content-Type: application/json');

… and your echos would change to something like this:

echo '{"success": false, "message": "Email already exists."}';