Creo que necesitaría parseint para comparar el valor devuelto con 30 para luego imprimir el mensaje específico. Simplemente no puedo dejar de enviar $nameLenght de php a JS para poder comparar ese valor con 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; }