title: Ajax form validation with php WITHOUT jQuery
body: <p>I am learning JavaScript without jQuery.</p>
  
  <p>Right now I am trying to pass some data from an input field to php and than pass a <code>$variable</code> from php to javascript. In jQuery this is easy with <code>$.ajax</code>. </p>
  
  <p>But how do I do this with ONLY JavaScript? Here is my attempt. Right now I only want to pass the <code>$_POST</code> content from the <code>inputfield</code>. I didn't do any validation at this moment.</p>
  
  <p>My plan is to make a validation with php and then pass an error message or more than one. Or in case of success an success message. </p>
  
  <p>But out of my console log I am only getting <code>NULL</code>.</p>
  
  <pre><code>window.onload = function () {
      var Input = document.querySelector('input#Input');
      var InputButton = document.querySelector('button.formBtn');
      InputButton.onclick = function () {
  
          var InputRequest = new XMLHttpRequest();
  
          InputRequest.open("POST", "ajax.php", true);
          InputRequest.send();
          InputRequest.onreadystatechange = function () {
              if (this.readyState == 4 &amp;&amp; this.status == 200) {
                   var obj = JSON.parse(InputRequest.response)
                   console.log(obj);
              }
          }
          return false;
      }
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Ajax Example&lt;/title&gt;
      &lt;style&gt;
          #Input {
              width: 200px;
              height: 15px;
              padding: 10px 0;
              text-indent: 5px;
          }
          #Input:focus {
              outline: none;
              border: 1px solid lightblue;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;form name="form" action="ajax.php" method="post"&gt;
          &lt;input type="text" id="Input" name="inputTest"&gt;
          &lt;button type="submit" class="formBtn"&gt;Absenden&lt;/button&gt;
      &lt;/form&gt;
      &lt;script src="ajax.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  
  &lt;?php
  $inputResponse = $_POST["inputTest"];
  echo json_encode($inputResponse)
  ?&gt;
  </code></pre>