HTML/JS/PHP

Make a form data object and add your data to it (this will change depending on how you choose to get the data). It could be 1 to 6 lines of code.

Make an XMLHttpRequestobject event listener for load . This is where you will capture the server response back and report back to the user in the message area Sent! or Error and clear the form if it was sent properly. Notice that you cannot simply say Sent! Look at the PHP file and notice that it may return errors and you have to account for them on the client side (this function). You need to check the XMLHttpRequest response text and see what the PHP file returns. Hint: this is where the magic happens (i.e. this is where all your processing logic will be for reporting to the user).

Make an XMLHttpRequest object event listener for error. This is where you capture a server error and report Error in the message area to the user. Note this error is different than the one mentioned above. This error is when the server encountered server error (e.g. 403, 404, 500, 503, etc). The error above is when there is a processing error.

Set up your XMLHttpRequest with an open POST call. It is one line of code and will look like this: XHR.open('POST', 'email.php'); (assuming you named your XMLHttpRequest object XHR but you can name it whatever you like).

Send the form using a send request like this: XHR.send(formData); (again assuming you named your XMLHttpRequest object XHR)

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"));

HELP ADDING CODE TO THE LOAD AND ERROR EVENT LISTENERS THAT CHECK FOR "OKAY" OR SOME ERROR THEN REPORTS THAT TO THE USER //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