HTML/JS/PHP

I have created a contact form for my website. I have JS code that loops through the information submitted and if all correct sends it to PHP to make connection. If it is all correct I am to let the user know it is sent. I have a message are where I communicate that it is sending once it is all okay on the server side I have to let the user know its officially sent. That is where I am having an issue.

main.js

"use strict";

function clearForm() { /* * This function replaces the text in text boxes with empty strings * and replaces the message area with an html */ document.getElementById("name").value = ""; document.getElementById("remail1").value = ""; document.getElementById("remail2").value = ""; document.getElementById("subject").value = ""; document.getElementById("message").value = ""; /* NOTE: This next line violates the division of concerns rule, but it's okay for this assigment. We will fix this later. */ document.getElementById("msg").innerHTML = " "; }

function validate() { var errorMessage = "";

//Get all the elements into the function var nameInput = document.getElementById("name"); var re1Input = document.getElementById("remail1"); var re2Input = document.getElementById("remail2"); var subInput = document.getElementById("subject"); var msgInput = document.getElementById("message");

//Get all the strings in the elements and trim them var name = nameInput.value.trim(); //Removes white space, user experience var remail1 = re1Input.value.trim(); var remail2 = re2Input.value.trim(); var sub = subInput.value.trim(); var message = msgInput.value.trim();

//Put the trimmed versions back into the form for good user experience (UX) nameInput.value = name; //Then puts it back into the form for user experience re1Input.value = remail1; re2Input.value = remail2; subInput.value = sub; msgInput.value = message;

//Test the strings from the form and store the error messages if (name === "") { errorMessage += "Name cannot be empty. "; //If it is it sends message to user } if (sub === "") { errorMessage += "Subject cannot be empty. "; } if (message === "") { errorMessage += "Message cannot be empty. "; } if (!validEmail(remail1)){ errorMessage += "First email address is not valid. "; } if (!validEmail(remail2)){ errorMessage += "Second email address is not valid. "; }

//Send the errors back or send an empty string if there is no error return errorMessage; }

function validEmail(email) { var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\ -0-9]+\.)+[a-zA-Z]{2,}))$/; return re.test(email); }

//Get the button into a JS object var sendBtn = document.getElementById("contact-send");

//Create an event listener and handler for the send button sendBtn.onclick = function () { //Bring the message area in in-case we need it to report errors var msgArea = document.getElementById("msg"); //Get the validation of the form var msg = validate(); //Report errors or submit the form if (msg === "") { msgArea.innerHTML = "Sending..."; sendForm(); } else { msgArea.innerHTML = msg; } };

//Get the button into a JS object var clearBtn = document.getElementById("contact-clear");

//Create an event listener and handler for the clear button clearBtn.onclick = function () { //Call clear if the button is pressed clearForm(); };

function sendForm(){ //Make new object const XHR = new XMLHttpRequest(); //Make form data START HERE stuff it in the form data object let formData = new FormData(document.getElementById("contactForm"));//Call form #contactForm //We give it the form here, event listener to load and report back XHR.addEventListener("load", function(event){ console.log(XHR.responseText); console.log(event); var msgArea = document.getElementById("msg"); var msg = console.log(XHR.responseText); //This is where im having issues if (msg === 'okay'){ msgArea.innerHTML = "Sent!"; } clearForm(); }); XHR.open("POST", "email.php"); //Access stuff on server, establishes connection bt the two XHR.send(formData); //This sends the connection };

email.php