Using Ajax/XMLhttprequest to send data to a php file with mail function

Question

I have been following this tutorial ( https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started ) but I had no luck. I am trying to communicate with a php file with a javascript file using XMLhttpRequest. This is the code bellow. I still dont understand how to fully transfer the data across.

HTML

form id="uDF" method="post" onsubmit="submitValidation()">

JavaScript

function submitValidation(){
var data = [document.forms ["uDF"] ["uDFName"].value, document.forms ["uDF"] ["uDFNumber"].value,
document.forms ["uDF"] ["uDFEmail"].value, document.forms ["uDF"] ["uDFSubject"].value,
document.forms ["uDF"] ["uDFMessage"].value,]
console.log(data);
var char = ''; // variable used to check whether email has @
var x;
var isEmail = false;
var isNotEmpty = false;

//for loop checks email for @ char
for(x = 0; x<data[2].length;x++)
{
    char = data[2].charAt(x);
    if(char === "@"){
        isEmail = true;
        break;
    }
}

var i;

//for loop check if data is collected
for(i=0;i < 5;i++){
    if(data[i] === ""){
        isNotEmpty = false;
    }else{
        isNotEmpty = true;
    }
}
if(isEmail === true && isNotEmpty === true)
{
    var httpRequest;
    httpRequest = new XMLHttpRequest();
    if(!httpRequest){
        return false;
    }
    httpRequest.onreadystatechange = function(){
        if(httpRequest.readyState === XMLHttpRequest.DONE && httpRequest.status === 200)
        {
            var response = JSON.parse(httpRequest.responseText);
        }
        httpRequest.open('POST', '../userData.mail.php')
        httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        httpRequest.send('uDFName=' + encodeURIComponent(data[0]) + 'uDFNumber=' + encodeURIComponent(data[1]) + 'uDFNumber=' + encodeURIComponent(data[3])
            + 'uDFNumber=' + encodeURIComponent(data[4]))
    }
}else if (!isNotEmpty){
    alert("empty fields");
}else if(!isEmail){
    alert("Please enter valid email!");
}

}

PHP

$uDFName = (isset($_POST['uDFName'])) ? $_POST['uDFName'] : '';
$uDFNumber = (isset($_POST['uDFNumber'])) ? $_POST['uDFNumber'] : '';
$uDFEmail = "my@email";
$uDFSubject = (isset($_POST['uDFSubject'])) ? $_POST['uDFSubject'] : '';
$uDFMessage = $uDFName . "\r\n" . $uDFNumber . "\r\n" . "just testing";


$message = wordwrap($message, 70, "\r\n");
mail($uDFEmail, $uDFSubject, $uDFMessage);

Answer 1

You have to open and send the request outside of the event handler function. The onreadystatechange handler only executes when the ready state of your request changes.

If you don't open and send the request, the handler function is not executed, and you won't see any results.

This solution should work:

var httpRequest = new XMLHttpRequest();

// this function executes whenever the ready state of the request changes
httpRequest.onreadystatechange = function () {
    if (httpRequest.readyState === XMLHttpRequest.DONE && httpRequest.status === 200) {
        var response = JSON.parse(httpRequest.responseText);
    }
}

// open the request ...
httpRequest.open('POST', '../userData.mail.php')
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

// ... and send it
httpRequest.send('uDFName=' + encodeURIComponent(data[0]) + 'uDFNumber=' + encodeURIComponent(data[1]) + 'uDFNumber=' + encodeURIComponent(data[3])
        + 'uDFNumber=' + encodeURIComponent(data[4]));