title: data submitted using JavaScript's FormData object returns entire html
body: <p>I'm submitting data from a form using JavaScript's <code>FormData</code> Object. Basically, I have the following code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;form action='test.php' id='test' method='post'&gt;
      &lt;input type='text' name = 'text' /&gt;
      &lt;input type='submit' /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I'm using AJAX to submit this form. Here's the code:</p>
  
  <p><strong>javascript</strong></p>
  
  <pre><code>var form = document.getElementById('test');
  form.addEventListener('submit',function(e) {
      e.preventDefault();
      var xhr = new XMLHttpRequest,
      fd = new FormData(form);
      xhr.open('post','test.php',true);
      xhr.onload = function(oEvent) {
          if (xhr.status == 200) {
                alert(xhr.responseText);
              } else {
                alert("Error " + xhr.status);
              }
      };
      xhr.send(fd);
  });
  </code></pre>
  
  <p>And here's the <strong>test.php</strong> file which receives the request:
  <strong>PHP</strong></p>
  
  <pre><code>if(isset($_POST['text'])) {
      echo $_POST['text'];
  } else {
      echo "Nothing Received";
  }
  </code></pre>
  
  <p>The PHP script receives the posted form. Problem is, the response text sent by the PHP script is the entire raw html markup of my page. My question is how do I read just the value of the input field named <strong>text</strong> so the <code>echo $_POST['text']</code> line above returns just that value?</p>