POST Form call php file asynchronously

Could anyone help me at this? I'm trying to make an AJAX contact form, here's what I want to do:

1. Validate certain format on HTML POST form through JS.


2. If valid, enable form submit button; and after being pressed.


3. Make a XML request to a mail.php file that processes the post request.


4. Modify the DOM according to the mail.php response.

Here's my code:

<?php
// bool mail( string $to, string $subject, string $message [, string $additional_headers [, string $additional_parameters ] ] )
if(isset($_POST['email'])) {
    $email_to = "my_test_mail@gmail.com";
    $email_subject = "Correo de pruebas";

    $email = $_POST['email'];
    $name = isset($_POST['nombre']) ? $_POST['nombre'] : "Sin nombre";
    $telephone = isset($_POST['telefono']) ? $_POST['telefono'] : "Sin numero";
    $nopal = isset($_POST['tor-nopal']) ? "Si" : "No";
    $maiz = isset($_POST['tor-maiz']) ? "Si" : "No";
    $harina = isset($_POST['tor-harina']) ? "Si" : "No";
    $message = $_POST['mensaje'];

    function clean_string($string) {
        $bad = array("content-type", "bcc:", "to:", "cc:", "href");
        return str_replace($bad, "", str_replace("\n", "\r\n", $string));
    }

    $email_message = "Nombre: ".clean_string($name)."\r\n";
    $email_message .= "Correo electronico: ".clean_string($email)."\r\n";
    $email_message .= "Telefono: ".clean_string($telephone)."\r\n";
    $email_message .= "Nopal: ".clean_string($nopal)."\r\n";
    $email_message .= "Maiz: ".clean_string($maiz)."\r\n";
    $email_message .= "Harina: ".clean_string($harina)."\r\n\r\n";
    $email_message .= "Mensaje:\n".clean_string($message)."\r\n";

    $headers = "MIME-Version: 1.0\r\n".
    "Content-Type: text/plain;charset=UTF-8\r\n".
    "From: Pruebas <juanc_94_konoha@hotmail.com>\r\n".
    "Reply-To: ".$email."\r\n".
    "Subject: Contacto tortillas\r\n".
    "X-Mailer: PHP/".phpversion();

    if( mail($email_to, $email_subject, $email_message, $headers) )
        echo "0";
    else
        echo "1";
} else
    echo "-1";
?>

My HTML form:

<form method=post action="./mail.php">
    <fieldset><label for=email>Correo el&eacute;ctronico:</label>
    <input type=email name=email id=email placeholder="usuario@ejemplo.com.mx" required></fieldset>
    <fieldset><label for=nombre>Nombre:</label>
    <input type=text name="nombre" id=nombre></fieldset>
    <fieldset><label for=telefono>Telefono:</label>
    <input type=tel name="telefono" id=telefono></fieldset>
    <fieldset><label><input type=checkbox name="tor-nopal"> Nopal</label>
    <label><input type=checkbox name="tor-maiz"> Ma&iacute;z</label>
    <label><input type=checkbox name="tor-harina"> Harina</label></fieldset>
    <fieldset><label for="mensaje">Mensaje</label>
    <textarea max-width=500 name="mensaje" id=mensaje max-length=498 required></textarea></fieldset>
    <br /><br />
    <input type=submit value=Enviar>
</form>

And here's the basic draft of my JS code:

function contactSubmitStatus() {
    var form = document.forms[0];
    if(request.readyState === 4)
        if(request.status === 200)
            if(request.responseText == "0") {
                document.getElementsByTagName("h3")[0].innerHTML = "¡Gracias por contactarnos!";
                fade("out", 1500, form, IE_check());
                form.remove;
            } else if(request.responseText == "1") {
                var explanation = document.createElement("p");
                explanation.innerHTML = "Tus datos están aparentemente bien pero hubo un problema en el servidor. Por favor intenta mas tarde o envianos un correo electrónico desde tu cliente de correos. (i.e: http://ift.tt/nP7iLr)";

                explanation.setAttribute("id", "warning-node");
                form.appendChild(explanation);
                fade("in", 1000, explanation, IE_check());
            }
}

function contactForm() {
    document.getElementsByName("email")[0].addEventListener("blur", isEmail);
    document.getElementsByName("mensaje")[0].addEventListener( "blur", isMsgValid);
    document.getElementsByName("submit")[0].addEventListener("click", function() {
        var request = createRequest(),
        form = document.forms[0],
        p = document.createElement("p");

        if(request == null) {
            alert("Tu navegador no permite transacciones asincronas, prueba con otro navegador.");
            return;
        } else {
            request.onreadystatechange = contactSubmitStatus;
            request.open("POST", form.action, true);
            request.send(new FormData(form));

            p.setAttribute("id", "contact-status");
            p.innerHTML = "Procesando datos...";
            form.appendChild(p);
        }
    });
}

The script worked. Only the form redirected me to /mail.php and only displayed 0. Which means the mail should have been sent but the email was not even in my spam mailbox. I'm guessing I have to configure a mail server on my workstation to test this kind of things, and I don't have a hosting yet to use for testing.

On regards to the browser loading redirecting to '/mail.php', do you think I need to use GET instead? 'Cuz I'm actually expecting a result to act upon. And since I would be using GET my php would need to use $_REQUEST instead of $_POST, right?

I'm sorry, maybe this is overwhelming but php is not my forte.