Javascript logic:
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if (xhr.status == 200){
console.log('xhr.readyState: ' + xhr.readyState);
console.log('xhr.status: ' + xhr.status);
console.log('xhr.responseText: ' + xhr.responseText);
alert("Thank you for connecting with me, " + $firstName + ". I'll be in touch soon via email to " + $email + ".");
document.getElementById('contact_form').reset();
enableSubmitButton();
}
if(xhr.status != 200){
console.log('xhr.status: ' + xhr.status);
alert('Apologies, ' + $firstName + ', there was an error sending your message.');
}
}
};
// build JSON for form handler
const prospect = {
first_name: $firstName,
last_name: $lastName,
email: $email,
project_description: $projectDescription
};
const prospectJson = JSON.stringify(prospect);
// console.log(prospectJson);
xhr.open('get', 'inc/contact_form_handler.php?data=' + prospectJson, false);
xhr.send();
Console output subsequent to HTML form submission and XMLHttpRequest:
xhr.readyState: 4
xhr.status: 200
xhr.responseText: Array
(
[data] => {"first_name":"FirstNameTest","last_name":"LastNameTest","email":"test@test.com","project_description":"This is my example project description."}
)
The problem is all of the PHP variable values are empty subsequent to the following logic:
/* get form data JSON */
$prospectArray = $_GET;
print_r($prospectArray);
$arr = json_decode($prospectArray, true);
// assign values to local vars based on json values
$firstName = $arr["first_name"];
$lastName = $arr["last_name"];
$email = $arr["email"];
$projectDescription = $arr["project_description"];
Any guidance, insight or solution is very much appreciated, thank you.