title: passing data to php script with Ajax and vanilla JavaScript
body: <p>I try to send POST data from html form to PHP script by using Ajax (XML httprequest ) with vanilla JavaScript then retrieve that data and display it to a specific html element.</p>
  <p>the problem is when i click the button to submit the form , seems that the code in Ajax part does not send data to php script and
  at the same does not retrieve data to the specific html element.</p>
  <p>//here is my php script I named it data.php</p>
  <pre><code>&lt;?php
  error_reporting(~E_NOTICE);
     if( $_POST[&quot;name&quot;]) {
        echo &quot;Welcome &quot;. $_POST['name']. &quot;&lt;br /&gt;&quot;;      
        exit();
     }
  ?&gt;
  </code></pre>
  <p>//and here is my html , JavaScript and ajax</p>
  <pre><code>&lt;html lang=&quot;en-US&quot;&gt;
  &lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=0.1,shrink-to-fit=no&quot;&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css&quot; integrity=&quot;sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T&quot; crossorigin=&quot;anonymous&quot;&gt;
  &lt;title&gt;demo&lt;/title&gt;
  &lt;style&gt;
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class=&quot;container&quot;&gt;
  &lt;div class=&quot;row justify-content-center&quot;&gt;
  &lt;div class=&quot;col-sm-6 col-md-6 col-lg-6&quot;&gt;
  &lt;div class=&quot;card&quot;&gt;
  &lt;div class=&quot;card-body&quot;&gt;
  &lt;form method=&quot;post&quot; name=&quot;myForm&quot; onsubmit=&quot;return validateForm();&quot; action=&quot;data.php&quot;&gt;
  &lt;div class=&quot;form-group&quot;&gt;
  &lt;label for=&quot;exampleInputName1&quot;&gt;Full name&lt;/label&gt;
  &lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;name&quot; id=&quot;exampleInputName1&quot; aria-describedby=&quot;nameHelp&quot; placeholder=&quot;Enter name&quot;&gt;
  &lt;/div&gt;
  &lt;p class=&quot;text-center text-danger&quot; id=&quot;loader&quot;&gt;Load and display the value of name here with ajax&lt;/p&gt;                     
  &lt;button type=&quot;submit&quot; onclick=&quot;loadDoc()&quot; class=&quot;btn btn-primary&quot;&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  &lt;script&gt;
  function validateForm(){
  let validation = {
  name:document.myForm.name.value
  };                                              
  let msg = new Array(&quot;Name required&quot;);
  if(validation.name == null || validation.name == &quot;&quot;){
  alert(msg);
  return false;
      }
  function loadDoc(){
  xhttp = new XMLHttpRequest();
  xhttp.open('POST','data.php',false);
  xhttp.setRequestHeader(&quot;Content-type&quot;, &quot;application/x-www-form-urlencoded&quot;);
  xhttp.send(validation.name);
  document.getElementById(&quot;loader&quot;).innerHTML = xhttp.responseText;
          }
  }                               
  &lt;/script&gt;
  &lt;script src=&quot;https://code.jquery.com/jquery-3.3.1.slim.min.js&quot; integrity=&quot;sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js&quot; integrity=&quot;sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js&quot; integrity=&quot;sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>