title: XMLHttpRequest & FormData not submitting data
body: <p>I am trying to submit a form via ajax using the <code>post</code> method and a <code>FormData</code> object.</p>
  <p>Here is a simplified version of the JavaScript:</p>
  <pre><code>var form=…; //  form element
  var url=…;  //  action
  form['update'].onclick=function(event) {    //  button name=&quot;update&quot;
      var xhr=new XMLHttpRequest();
          xhr.open('post',url,true);
          xhr.setRequestHeader(&quot;Content-type&quot;, &quot;application/x-www-form-urlencoded&quot;);
      var formData=new FormData(form);
          formData.append('update', true);    // makes no difference
      xhr.send(formData);
      xhr.onload=function() {
          alert(this.response);
      };
  };
  </code></pre>
  <p>The form has:</p>
  <ul>
  <li>a button (<code>type=&quot;button&quot; name=&quot;update&quot;</code>) to run the script</li>
  <li>no <code>action</code> and <code>method=&quot;get&quot;</code></li>
  </ul>
  <p>My PHP script has the following:</p>
  <pre><code>if(isset($_POST['update'])) {
      print_r($_POST);
      exit;
  }
  
  //  more stuff
  
  print 'other stuff';
  </code></pre>
  <p>When I try it, the PHP falls through to the rest of the code, and I get the other output, rather than what I expect from the <code>print_r</code> statement.</p>
  <p>I have tried the following variations:</p>
  <ul>
  <li><code>new FormData()</code> (without the form). This <em>does</em> work if I add the <code>update</code> data manually.</li>
  <li><code>new FormData(form)</code>. This does not work, whether I add the <code>update</code> manually or not.</li>
  <li>changing the form method to <code>post</code>.</li>
  <li>Firefox, Safari &amp; Chrome on MacOS; all current versions.</li>
  </ul>
  <p>The from itself looks something like this:</p>
  <pre><code>&lt;form id=&quot;edit&quot; method=&quot;post&quot; action=&quot;&quot;&gt;
      &lt;p&gt;&lt;label for=&quot;edit-summary&quot;&gt;Summary&lt;/label&gt;&lt;input id=&quot;edit-summary&quot; name=&quot;summary&quot; type=&quot;text&quot;&gt;&lt;/p&gt;
      &lt;p&gt;&lt;label for=&quot;edit-description&quot;&gt;Description&lt;/label&gt;&lt;input id=&quot;edit-description&quot; name=&quot;description&quot; type=&quot;text&quot;&gt;&lt;/p&gt;
      &lt;p&gt;&lt;label for=&quot;edit-ref&quot;&gt;Reference&lt;/label&gt;&lt;input id=&quot;edit-ref&quot; name=&quot;ref&quot; type=&quot;text&quot;&gt;&lt;/p&gt;
      &lt;p&gt;&lt;label for=&quot;edit-location&quot;&gt;Location&lt;/label&gt;&lt;input id=&quot;edit-location&quot; name=&quot;location&quot; type=&quot;text&quot;&gt;&lt;/p&gt;
      &lt;p&gt;&lt;button type=&quot;button&quot; name=&quot;update&quot;&gt;OK&lt;/button&gt;&lt;/p&gt;
  &lt;/form&gt;
  </code></pre>
  <p>What should I do to submit the get this to work?</p>
  <p>No jQuery, please.</p>