title: Can't build a FormData object out of existing form
body: <p>I'm trying to build a FormData object out of a form on my page. I'm getting the form element like this:</p>
  
  <pre><code>var form = document.forms['upload_form'];
  </code></pre>
  
  <p>And then I'm building the FormData object like this:</p>
  
  <pre><code>var fd = new FormData(form);
  </code></pre>
  
  <p>Since you cannot log values in a FormData object (as described <a href="https://stackoverflow.com/questions/7752188/formdata-appendkey-value-is-not-working">here</a>), I'm sending the formdata to '/' just so I can see its contents in my Network Inspector. The contents of the request payload are simply:</p>
  
  <pre><code>------WebKitFormBoundaryKAgAjii8IMLyJFcB--
  </code></pre>
  
  <p>and nothing else! If I manually append a value to the form like this:</p>
  
  <pre><code>fd.append("username", "Groucho");
  </code></pre>
  
  <p>it works:</p>
  
  <pre><code>------WebKitFormBoundaryZikgEBo7sTzvlndC
  Content-Disposition: form-data; name="username"
  
  Groucho
  </code></pre>
  
  <p>I've also tried selecting the form element in other ways, such as with jQuery:</p>
  
  <pre><code>var form = $(".upload_form");
  var fd = new FormData(form[0]);
  </code></pre>
  
  <p>No matter how I select the form element, the form variable certainly does have the form in it (it's not null or empty), but constructing the FormData object with it as a parameter just does not seem to work. Can anyone help?</p>
  
  <p><strong>PS</strong> I'm using Chrome 31.0.1650.57. I've also tried this in Safari 7.0 with the same results.</p>
  
  <p><strong>Another thing</strong>: The inputs in this form are nested inside a number of divs. Could this be a problem?</p>