title: POST FormData to php using javascript and XMLHTTPRequest
body: <p>At the moment I have two files, index.htm and accessdata.php.
  This is what I have in index.htm:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script&gt;
  function postData() {
    var xmlhttp=new XMLHttpRequest();
    var url = "accessdata.php";
    var checkBoxes_formData = new FormData(document.getElementById("checkBoxes"));
  
    xmlhttp.open("POST",url,true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send(checkBoxes_formData);
  
    xmlhttp.onreadystatechange=function(){
      if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200){
        document.getElementById("result").innerHTML=xmlhttp.responseText;
      }
    }
  }
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;button type="button" onclick="postData()"&gt;POST&lt;/button&gt;
  
  &lt;form id=checkBoxes&gt;
  &lt;table&gt;
      &lt;tr&gt;&lt;input type="checkbox" name="opt1" value="blue" checked&gt; Blue&lt;/td&gt;
      &lt;tr&gt;&lt;input type="checkbox" name="opt2" value="yellow"&gt; Yellow&lt;/td&gt; 
  &lt;/table&gt;
  &lt;/form&gt;
  
  &lt;p id="result"&gt;&lt;/p&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and this is what I have in accessdata.php:</p>
  
  <pre><code>&lt;?php
  
  $opt1=$_POST['opt1'];
  echo $opt1;
  
  echo "bla";
  ?&gt;
  </code></pre>
  
  <p>Now, on</p>
  
  <pre><code>&lt;p id="result"&gt;&lt;/p&gt;
  </code></pre>
  
  <p>"bla" shows up, but not "blue", or "yellow".</p>
  
  <p>What am I doing wrong?</p>
  
  <p>THE CORRECT HTML CODE BELOW!!</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;POST PHP XMLHTTPRequest&lt;/title&gt;
  &lt;script&gt;
  function postData() {
    var xmlhttp=new XMLHttpRequest();
    var url = "accessdata.php";
    var checkBoxes_formData = new FormData(document.getElementById("checkBoxes"));
  
    xmlhttp.open("POST",url,true);
    xmlhttp.send(checkBoxes_formData);
  
    xmlhttp.onreadystatechange=function(){
      if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200){
        document.getElementById("result").innerHTML=xmlhttp.responseText;
      }
    }
  }
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;button type="button" onclick="postData()"&gt;POST&lt;/button&gt;
  
  &lt;form id="checkBoxes"&gt;
  &lt;input type="checkbox" name="opt1" value="blue"&gt; Blue
  &lt;input type="checkbox" name="opt2" value="yellow" checked&gt; Yellow
  
  &lt;/form&gt;
  
  &lt;p id="result"&gt;&lt;/p&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>