Unexpected results when passing values from PHP to Ajax using json_encode - php

Question

Goal: Develop a registration form for a website
Problem: PHP returns unexpected results to Ajax using the json_encode function (for example, it returns DUPLICATE_USERNAME when it should return DUPLICATE_EMAIL).
Code explanation / algorithm:
User enters their details in the registration form (username, email, etc.)
When submit button is clicked, the input is acquired by a PHP script (registrationProcess.php) via POST
A database check is run so that the username and email are available (here we suppose that they aren't)
PHP returns the value back to the front-end via Ajax. It returns two strings, either DUPLICATE_USERNAME or DUPLICATE_EMAIL; the function that does this is handleRegisterError($error_type)
Depending on the returned string, the UI of the webpage is properly changed
This function is a part of a script that gets called after the submit button is clicked.
<?php
/**
* This function gets called in the PHP script if a registration error has been found. It is passed either DUPLICATE_USERNAME or DUPLICATE_EMAIL.
*/
function handleRegisterError($error_type) {
switch($error_type) {
case "DUPLICATE_USERNAME":
$data = array("error" => "DUPLICATE_USERNAME");
echo json_encode($data);
break;
case "DUPLICATE_EMAIL":
$data = array("error" => "DUPLICATE_EMAIL");
echo json_encode($data);
break;
default:
echo "Unexpected error in registrationProcess.php"
break;
}
}
/>
Now, the JavaScript code on the front-end HTML registration page that receives the code:
<script>
$.ajax({
dataType: 'json',
url: "../php/registrationProcess.php",
success: function(data) {
console.log("SUCCESS: " + data.error);
handleError(data.error);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log("ERROR CALLING AJAX! textStatus = " + textStatus + " | errorThrown = " + errorThrown);
}
});
function handleError(errorType) {
console.log("errorType = " + errorType);
switch(errorType) {
case "DUPLICATE_USERNAME":
// Display duplicate username error
$("#username-error").attr("hidden", false);
$("#username-input-field").css("margin-bottom", 8);
break;
case "DUPLICATE_EMAIL":
// Display duplicate email error
$("#email-error").attr("hidden", false);
$("#email-input-field").css("margin-bottom", 8);
break;
}
}
</script>
The receiving code consists of the basic Ajax form to receive results from PHP. It passes the received variable (data.error) to the handleError function, which in turn consists of a switch statement that changes the UI for a duplicate username/email error.
Debugging:
When PHP sends values from json_encode, it echoes the JSON code it is transmitting to the website, so I can easily see what the PHP transmits as JSON. For JavaScript debugging, I used the console.log function to print "SUCCESS", followed by the data.error (which should be similar to the value transmitted by PHP). The error that is used in JavaScript is then repeatedly printed to console from the handleError function just to be safe.
You can see an example of both sources of debugging I used to analyse the errors in these two images, where the JSON that is transmitted from PHP is seen on the top left and the console is seen on the right side of the image:
Problem analysis
I have placed the following user into the database:
username: Mike
email: mikey#gmail.com
To test the code, I've then run two separate tests: In the first test, I tried to create another username with the name Mike and a different email (which is expected to return a DUPLICATE_USERNAME error). In the second test, I tried to create another username with the name Jenna and the email mikey#gmail.com, which is expected to cause a DUPLICATE_EMAIL error.
My code successfully dealt with the first case, when the username was duplicated:
However, in the second case, PHP correctly recognised a DUPLICATE_EMAIL error, but the JavaScript / Ajax somehow interpreted that as DUPLICATE_USERNAME when it was being sent over.
What am I doing wrong in my code that is causing this bug? Is it maybe some state on the webpage that is being saved from previous data transmissions?
Thank you for the time taken to deal with this problem!
The script for registrationProcess.php:
<?php
include 'secureFunctions.php';
$username = "";
$birthday = "";
$gender = "";
$email = "";
$password = "";
$username = getVariable('username');
$birthday = getVariable('birthday');
$gender = getVariable('gender');
$email = getVariable('email');
$password = getVariable('password');
$db_host = "sql7.freesqldatabase.com";
$db_username = "sql7369409";
$db_password = "*******";
$db_name = "sql7369409";
$conn = new mysqli($db_host, $db_username, $db_password, $db_name);
if(mysqli_connect_error()) {
die("Database connection failed: " . mysqli_connect_error);
}
if($gender != "") {
// Edit gender for the database
switch ("gender") {
case "male":
$gender = "m";
break;
case "female":
$gender = "f";
break;
case "other":
$gender = "o";
break;
}
}
if($birthday != "") {
// Edit birthday for the database
$arr = explode('/', $birthday);
$birthday = $arr[2] . '-' . $arr[1] . '-' . $arr[0];
}
$sql = "INSERT INTO users (id, username, birthday, gender, email, password)
VALUES (NULL, '$username', '$birthday', '$gender', '$email', '$password')";
if (mysqli_query($conn, $sql)) {
echo "New record created successfully!";
header("Location: ../pages/index.html");
exit();
}
else {
handleRegisterError(registrationGetErrorType(mysqli_error($conn)), "TRUE");
}
function handleRegisterError($error_type, $devValue) {
//echo "errorType = $error_type ";
if($devValue == "TRUE") {
/*
switch ($error_type) {
case "DUPLICATE_USERNAME":
//echo "test2";
$data = array("error" => "DUPLICATE_USERNAME");
echo json_encode($data);
break;
case "DUPLICATE_EMAIL":
//echo "test1";
$data = array("error" => "DUPLICATE_EMAIL");
echo json_encode($data);
break;
case "UNKNOWN":
$data = array("error" => "UNKNOWN");
echo json_encode($data);
break;
}
*/
//$data;
if($error_type == "DUPLICATE_USERNAME") {
//echo " t1 ";
$data = array("error" => "DUPLICATE_USERNAME");
//echo json_encode($data);
} elseif($error_type == "DUPLICATE_EMAIL") {
//echo " t2 ";
$data = array("error" => "DUPLICATE_EMAIL");
//echo json_encode($data);
} else {
$data = array("error" => "UNKNOWN");
//echo json_encode($data);
}
echo json_encode($data);
}
}
?>
The above script also uses some methods from secureFunctions.php:
<?php
/**
* Retrieves a variable from HTML using the null coalesce operator (for security reasons)
* #param mixed $variableName
* #return void
*/
function getVariable($variableName) {
$result = $_POST[$variableName] ?? '';
return $result;
}
/**
* There are two types of registration errors: (1) username already in use (2) email already in use or (3) Unknown error
* First two errors look like this:
* (1): Duplicate entry 'skorjanc.survey#gmail.com' for key 'email'
* (2): Duplicate entry 'King_Fish' for key 'name'
*
* #param mixed $sqlDbText The error text from the server
* #return (1) DUPLICATE_USERNAME (2) DUPLICATE_EMAIL (3) UNKNOWN
*/
function registrationGetErrorType($sqlDbText) {
$filtered = str_replace("'", "", $sqlDbText); // Replace single quotes with air
$array = explode(" ", $filtered);
$key = $array[count($array)-1];
if($key == "email") {
return "DUPLICATE_EMAIL";
} elseif($key == "name") {
return "DUPLICATE_USERNAME";
}
return "UNKNOWN";
}
?>
As ArJay suggested, I am also attaching values of $array and $key in the registrationGetErrorType method for both cases (duplicate username and duplicate password):
(1) DUPLICATE_USERNAME
array = Array ( [0] => Duplicate [1] => entry [2] => King_Fish [3] => for [4] => key [5] => name )
key = name
(2) DUPLICATE EMAIL
array = Array ( [0] => Duplicate [1] => entry [2] => skor#gmail.com [3] => for [4] => key [5] => email )
key = email

Answer 1

I have found the cause of the problem.
When the submit button was clicked, all the values were actually sent to the correct PHP script from the form. The values were processed and the correct JSON object with the correct error was returned.
Then, however, the page refreshed because of the submit button functionality. Now, all of the form variables were set back to empty, such as username = "", email = "" etc. Those variables were again used by the same script and tested against existing database records, which in turn resulted in the wrong second error (DUPLICATE_USERNAME instead of DUPLICATE_EMAIL).
It seems that I have hit an algorithm error, as I have devised the code flow in such a way as to cause errors. I have, however, found a great tutorial on creating register/login pages, whose code I have tested (and it works!) - follow this link.
Thanks to everyone, specifically Peter Mortensen, for the patience on this error!