I think I would need parseint to compare the value returned with 30 to then print the specific message. I just can't get past sending $nameLenght from php to JS so I can compare that value with 30.
// php file ---
// check title lenght and print message base on input lenght
if (!empty($title) && !empty($drink) && !empty($pet) && !empty($fictional) && !empty($real)) {
echo "okay";
$name = $title . " " . $drink . " " . $pet . " " . $fictional . " " . $real;
$nameLenght = strlen($name);
}
else {
echo "error";
}
// js file----
function sendData(){
const XHR = new XMLHttpRequest();
let msgArea = document.getElementById("msg");
let formData = new FormData(document.getElementById("submit-form"));
XHR.addEventListener('load', function (event) {
if (XHR.responseText === "okay") {
console.log(XHR.responseText);
clearForm();
if (lenght >= 30){
msgArea.innerHTML = "That's a heck of a title!";
} else {
msgArea.innerHTML = "That's a cute little title.";
} else {
msgArea.innerHTML = "Sorry, your title was not processed. Please try again!";
}
})
// checking if error was returned
XHR.addEventListener('error', function (event) {
if (XHR.statusText !== "OK") {
msgArea.innerHTML = "Server Error";
}
});
// this opens the connection and sends the form
XHR.open('POST', 'process.php');
XHR.send(formData);
return;
}
You can respond to the client(js) with a JSON encoded body. And parse the JSON body in JavaScript with the JSON.parse() function.
Right now, you are echoing okay but you need to echo something like this.
echo json_encode(['status'=>true,'message'=>['name_length'=>strlen($name)]])
let length = JSON.parse(XHR.responseText).name_length