Question

Hi everyone I am trying to submit a form without the page reloading, a seemingly straightforward thing with AJAX, but I can’t seem to get any changes on my database. I have an alert set in my javascript to run if the AJAX was successful, and it seems to trigger every time, so I think the variables are, indeed, getting sent out of the AJAX, but when I get to join.php, I don’t think it remembers, and therefore doesn’t process correctly.

First of all, here is the relevant script.js:

$(document).ready(function () {
    //----SUBMIT---//
    $(".submit").click(function () {
        // validate and process form here  

        $('.error').hide();
        var studentEmail = $("input#studentEmail").val();
        if (studentEmail == "") {

            $("label#studentEmail_error").show();
            $("input#studentEmail").focus();
            return false;
        }

        var studentPassword = $("#studentPassword").val();
        var parentEmail = $("#parentEmail").val();
        var parentPassword = $("#parentPassword").val();
        var studentFirstName = $("#studentFirstName").val();
        var studentLastName = $("#studentLastName").val();
        var studentPhone = $("#studentPhone").val();
        var parentFirstName = $("#parentFirstName").val();
        var parentLastName = $("#parentLastName").val();
        var parentPhone = $("#parentPhone").val();


        var dataString = 'studentEmail=' + studentEmail 
                         + '&studentPassword=' + studentPassword 
                         + '&parentEmail=' + parentEmail 
                         + '&parentPassword=' + parentPassword 
                         + '&studentFirstName=' + studentFirstName 
                         + '&studentLastName=' + studentLastName 
                         + '&studentPhone=' + studentPhone 
                         + '&parentFirstName=' + parentFirstName 
                         + '&parentLastName=' + parentLastName 
                         + '&parentPhone=' + parentPhone;

        alert(dataString);

        $.ajax({
            type: "POST",
            url: "join.php",
            data: dataString,
            success: function () {
                alert("success");
            }
        });
        return false;
    });
});

Then join.php

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

    //create database connection
    $connection = mysql_connect("localhost","XXXX","XXXX"); 
        //in case database connection fails
        if(!$connection) {
            die("Database connection failed: ".mysql_error());
        }

        else{

        //select database to use
        $db_select = mysql_select_db("XXXX",$connection); 
            //in case database selection fails
            if (!$db_select) { 
                die("Database selection failed: " . mysql_error()); 
            } 

            else {

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

                //set results to variables
                $result = mysql_query($sql);

                //in case query fails
                if (!$result) { 
                    die("Database query failed: " . mysql_error()); 
                } 
            }
        }

}

else {
    echo "FAIL";
}

Answer 1

Try to change the $.post() call into this:

$.ajax({
    type: "POST",
    url: "join.php",
    data: dataString,
    success: function(data) {
      alert ("Success: "+ data);
    }
});

And, at the beginning of PHP code, place this:

var_dump($_POST);

This way, the alert message will display the data received from PHP.

UPDATE:

Since I see nobody here is seeing the hugest security risk with that code, I add it here:

Be very sure that you pass every single string from post through mysql_real_escape_string() before adding it inside the query!

What if anybody posts this as his email address??:

'); DROP TABLE clients; -- 

UPDATE:

I double-checked documentation of jQuery.ajax() and jQuery.post(). While .post() is just a shortcut for .ajax(), their syntax is different:

jQuery.post( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )
jQuery.ajax( settings )

(updated code above too).

UPDATE:

Try this code, that should work “out of the box”:

The JavaScript:

$(document).ready(function(){
    $(".submit").click(function() {  

        $('.error').hide();  
        var studentEmail = $("input#studentEmail").val();  
        if (studentEmail == "") {  
            $("label#studentEmail_error").show();  
            $("input#studentEmail").focus();  
            return false;  
        }

        var dataString = {
            studentEmail : studentEmail,
            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 ("success: "+ data);
            }
        });

        return false;
    });
});

The PHP code

var_dump($_POST);
echo "\n\n"; // Some white space here

if($_POST) {
    $connection = mysql_connect("localhost","XXXX","XXXX"); 
    if(!$connection) {
        die("Database connection failed: ". mysql_error());
    }
    if (!mysql_select_db("XXXX",$connection)) { 
        die("Database selection failed: " . mysql_error()); 
    }

    // Read data from POST
    $studentEmail       = mysql_real_escape_string($_POST['studentEmail']);
    $studentPassword    = mysql_real_escape_string($_POST['studentPassword']);
    $parentEmail        = mysql_real_escape_string($_POST['parentEmail']);
    $parentPassword     = mysql_real_escape_string($_POST['parentPassword']);
    $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']);

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

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