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";
}
You have a mysql error, dont have a quotes:
Corrected:
$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."')";
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.
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; --
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).
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 "
"; // 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());
}
}
Have you tried the script with dummy values to make sure it working correctly.
You can remove the quotes ("")from the sql and replace with '$variable' which converts the whole query to a string.
Is the join.php in the same directory?
Are you throwing a cross domain error in your developer tools? If so you may have to use the jQuery workaround.
Your alert should fire whether or not the actual PHP code is executed- as long as it receives a response.
I would try to put an 'echo "TEST"' statement before your if($_POST) statement to debug. Continue messing with this method until you figure out where exactly your code is failing. If it still isn't executing the POST, check the file path for join.php and ensure it is in the same directory.
Also, are you trying to do this locally or is it hosted on a web server?
Another note, you should use encodeURI(..) on user input prior to posting, as good practice.
Here is a refactor for the way you generate the data string, consider:
//create an object
var dataObj = {};
//get inputs from form with id = formID
//for each input, add a property matching the input id to the dataObj and store the value of the field as the value for that property.
$("#formID :input").each( function (this) {
var id = this.attr(id); //might be a bit off
var val = this.val(); //same here
dataObj[id] = encodeURI(val);
});
Syntax might be a bit off, haven't done this in awhile.