title: How to ajax POST to php
body: <p>I can't seem to figure out how to use ajax to post.  I made a silly form to try it out and even after having cut it all the way down to just two values, still can't get anything to work.  My html is this:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="j.js"&gt;&lt;/script&gt;
  &lt;title&gt;Test this&lt;
  &lt;body&gt;/title&gt;
  &lt;/head&gt;
  &lt;form name="testForm" onsubmit="postStuff()" method="post"&gt;
  First Name: &lt;input type="text" name="fname" id="fname" /&gt;&lt;br /&gt;
  Last Name: &lt;input type="text" name="lname" id="lname" /&gt;&lt;br /&gt;
  &lt;input type="submit" value="Submit Form" /&gt;
  &lt;/form&gt;
  &lt;div id="status"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Then, my external javascript is just a single function so far:</p>
  
  <pre><code>function postStuff(){
  // Create our XMLHttpRequest object
  var hr = new XMLHttpRequest();
  // Create some variables we need to send to our PHP file
  var url = "processForm.php";
  var fn = document.getElementById("fname").value;
  var ln = document.getElementById("lname").value;
  var vars = "firstname="+fn+"&amp;lastname="+ln;
  hr.open("POST", url, true);
  hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  // Access the onreadystatechange event for the XMLHttpRequest object
  hr.onreadystatechange = function() {
      if(hr.readyState == 4 &amp;&amp; hr.status == 200) {
          var return_data = hr.responseText;
          document.getElementById("status").innerHTML = return_data;
      }
  }
  // Send the data to PHP now... and wait for response to update the status div
  hr.send(vars); // Actually execute the request
  document.getElementById("status").innerHTML = "processing...";
  }
  </code></pre>
  
  <p>While my php just echoes the stuff back:</p>
  
  <pre><code>&lt;?php
  $firstname = $_POST['firstname'];
  $lastname = $_POST['lastname'];
  echo $firstname ." - ". $lastname ."&lt;br /&gt;";
  ?&gt;
  </code></pre>
  
  <p>I can't find anything wrong in firebug or in chrome's toolsy thingies..
  Can anybody who me what I'm doing wrong?</p>