title: POST method to send form data with AJAX without JQUERY
body: <p>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.  </p>
  
  <h2>script con jQuery (OK)</h2>
  
  <pre><code>$("#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”);
       }
     });
   });  
  </code></pre>
  
  <h2>PHP script that receives the data</h2>
  
  <pre><code>session_cache_limiter('nocache');    
  header('Expires: ' . gmdate('r', 0));    
  header('Content-type: application/json');      
  
  $Recipient = 'info@ejemplo.com'; // &lt;-- 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 . ' &lt;' . $Email . '&gt;' . "\r\n".  
      "Reply-To: " .  $Email . "\r\n";  
  
      $sent = mail($Recipient, $Subject, $Email_body, $Email_headers);  
  
      if ($sent){   
          $emailResult = array ('sent'=&gt;'yes');  
      } else{  
          $emailResult = array ('sent'=&gt;'no');  
      }  
  
      echo json_encode($emailResult);  
  
  } else {  
  
      $emailResult = array ('sent'=&gt;'no');  
      echo json_encode($emailResult);  
  
  }  
  </code></pre>
  
  <h2>Associated HTML</h2>
  
  <pre><code>&lt;form id="contact-form" role="form"&gt;
        &lt;div class="form-group has-feedback"&gt;
          &lt;input type="text" class="form-control" id="name" name="name"  placeholder="Nombre" required&gt;
        &lt;/div&gt;
        &lt;div class="form-group has-feedback"&gt;
          &lt;input type="email" class="form-control" id="email" name="email" placeholder="Correo electronico" required&gt;
        &lt;/div&gt;
        &lt;div class="form-group has-feedback"&gt;
          &lt;input type="text" class="form-control" id="subject" name="subject" placeholder="Asunto" required&gt;
        &lt;/div&gt;
        &lt;div class="form-group has-feedback"&gt;
          &lt;textarea class="box-msg" rows="6" id="message" name="message"&gt;     &lt;/textarea&gt;
        &lt;/div&gt;
        &lt;div class="form-group has-feedback"&gt;
          &lt;input type="submit" value="Enviar" class="submit-button btn btn-default"&gt;
        &lt;/div&gt;
  &lt;/form&gt;  
  </code></pre>
  
  <h2>Test1 without jQuery (does not work)</h2>
  
  <pre><code>// 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);
  });  
  </code></pre>
  
  <h2>Test2 without jQuery (does not work)</h2>
  
  <pre><code>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));
  });  
  </code></pre>