POST method to send form data with AJAX without JQUERY

Question

I have a script in js that sends the form data from one page to the server and it works well with a Jquery function but I would like to be able to do it without the use of Jquery. When I try without jQuery the form is sent but the mail arrives empty, without sender, without subject and without message. Thanks in advance.

script con jQuery (OK)

$("#contact-form").on("submit", function(event) {
   event.preventDefault();
   $.ajax({
     type: "POST",
     url: "php/email-sender.php",
     data: {
       name: $("#contact-form #name").val(),
       email: $("#contact-form #email").val(),
       subject: $("#contact-form #subject").val(),
       message: $("#contact-form #message").val()
     },
     dataType: "json",
     success: function(data) {
    console.log(“success”);
       } else {
          console.log(“error”);
       }
     },
     error: function() {
         console.log(“error”);
     }
   });
 });  

PHP script that receives the data

session_cache_limiter('nocache');    
header('Expires: ' . gmdate('r', 0));    
header('Content-type: application/json');      

$Recipient = 'info@ejemplo.com'; // <-- Set your email here    

if($Recipient) {      

    $Name = $_POST['name'];  
    $Email = $_POST['email'];  
    $Subject = $_POST['subject'];  
    $Message = $_POST['message'];  
    if (isset($_POST['category'])) {  
        $Category = $_POST['category'];  
    }

    $Email_body = "";    
    if (isset($_POST['category'])) {  
        $Email_body .= "From: " . $Name . "\n" .  
        "Email: " . $Email . "\n" .  
        "Subject: " . $Subject . "\n" .  
        "Message: " . $Message . "\n" .  
        "Category: " . $Category . "\n";  
    } else {  
        $Email_body .= "From: " . $Name . "\n" .  
        "Email: " . $Email . "\n" .  
        "Subject: " . $Subject . "\n" .  
        "Message: " . $Message . "\n" .   
        "Enviado el " . date('d/m/Y', time());  
    }   

    $Email_headers = "";  
    $Email_headers .= 'From: ' . $Name . ' <' . $Email . '>' . "\r\n".  
    "Reply-To: " .  $Email . "\r\n";  

    $sent = mail($Recipient, $Subject, $Email_body, $Email_headers);  

    if ($sent){   
        $emailResult = array ('sent'=>'yes');  
    } else{  
        $emailResult = array ('sent'=>'no');  
    }  

    echo json_encode($emailResult);  

} else {  

    $emailResult = array ('sent'=>'no');  
    echo json_encode($emailResult);  

}  

Associated HTML

<form id="contact-form" role="form">
      <div class="form-group has-feedback">
        <input type="text" class="form-control" id="name" name="name"  placeholder="Nombre" required>
      </div>
      <div class="form-group has-feedback">
        <input type="email" class="form-control" id="email" name="email" placeholder="Correo electronico" required>
      </div>
      <div class="form-group has-feedback">
        <input type="text" class="form-control" id="subject" name="subject" placeholder="Asunto" required>
      </div>
      <div class="form-group has-feedback">
        <textarea class="box-msg" rows="6" id="message" name="message">     </textarea>
      </div>
      <div class="form-group has-feedback">
        <input type="submit" value="Enviar" class="submit-button btn btn-default">
      </div>
</form>  

Test1 without jQuery (does not work)

// Submit contactForm START
const contactForm = document.getElementById("contact-form");

contactForm.addEventListener("submit", function(event) {
  event.preventDefault();
  var request = new XMLHttpRequest();
  request.open("POST", "/php/email-sender.php", true);
  request.setRequestHeader(
    "Content-Type",
    "application/x-www-form-urlencoded; charset=UTF-8"
  );

  request.onreadystatechange = function() {
    if (request.readyState == XMLHttpRequest.DONE) {
      // request end.
      if (request.status == 200) {
        // success START
        console.log(request.response);
        // success END
      } else {
        // error START
        console.log("error");
        // error END
      }
    }
  };

  var formData = new FormData();
  data.append("name", document.getElementById("name").value);
  data.append("email", document.getElementById("email").value);
  data.append("subject", document.getElementById("subject").value);
  data.append("message", document.getElementById("message").value);
  request.send(formData);
});  

Test2 without jQuery (does not work)

var contactForm = document.getElementById("contact-form");

contactForm.addEventListener("submit", function(event) {
  event.preventDefault();
  var request = new XMLHttpRequest();
  request.open("POST", "/php/email-sender.php", true);
  request.setRequestHeader("Content-Type", "application/json;  charset=UTF-8");

  request.onreadystatechange = function() {
    if (request.readyState == XMLHttpRequest.DONE) {
      // request end.
      if (request.status == 200) {
        // success START
        console.log(request.response);
        // success END
      } else {
        // error START
        console.log("error");
        // error END
      }
    }
  };

  var data = {
    name: document.getElementById("name").value,
    email: document.getElementById("email").value,
    subject: document.getElementById("subject").value,
    message: document.getElementById("message").value
  };
  request.send(JSON.stringify(data));
});  

Answer 1

Your first javascript will return error because the data object is not defined.

Try this one

        const contactForm = document.getElementById("contact-form");

            contactForm.addEventListener("submit", function(event) {
                
              event.preventDefault();
              
                var request = new XMLHttpRequest();
                var url = "/php/email-sender.php";
                request.open("POST", url, true);
                request.setRequestHeader("Content-Type", "application/json");
                request.onreadystatechange = function () {
                    if (request.readyState === 4 && request.status === 200) {
                        var jsonData = JSON.parse(request.response);
                        console.log(jsonData);
                    }
                };
                var name =  document.getElementById("name").value;
                var email = document.getElementById("email").value;
                var subject = document.getElementById("subject").value;
                var message = document.getElementById("message").value;
                
                
                var data = JSON.stringify({"name": name, "email": email, "subject": subject, "message": message});
     
              
                request.send(data);
     
            });  

</script>

Check this thread on how to receive json POST: Receive JSON POST with PHP

Then Try this to your PHP file

<?php
// Handling data in JSON format on the server-side using PHP
header("Content-Type: application/json");
// build a PHP variable from JSON sent using POST method
$v = json_decode(stripslashes(file_get_contents("php://input")));
echo json_encode($v);
?>

To access the object in your PHP file, use

$v->name;
$v->email;
$v->subject;
$v->message;

SCREENSHOT: https://s9.postimg.cc/w1fc8266n/2018-05-03_20h37_08.gif