title: Building FormData object from form
body: <p>My FormData object will not get data from my pages form element. The appended data goes through and is displayed when I do a <code>var_dump($_POST)</code> in the PHP file, however the form data is not there. Without the append, it is just an empty array.</p>
  
  <p>Javascript:</p>
  
  <pre><code>$(function() {
      $("form").on("submit", function() {
          var formData = new FormData($("#form")[0]);
          formData.append("Hello world", "This is a test");
          $.ajax({
              url: "sub/addCrane.php",
              type: 'POST',
              data: formData,
              cache: false,
              contentType: false,
              processData: false,
          })
          .done(function(data) {
              $("#form").append(data);
          });
      });
  });
  </code></pre>
  
  <p>HTML form:</p>
  
  <pre><code>&lt;form id="form" enctype="multipart/form-data" action="#"&gt;
  
      &lt;p class="inline"&gt;Crane Model: &lt;/p&gt;&lt;input type="text" id="model"&gt;&lt;br /&gt;
      &lt;p class="inline"&gt;Crane Brand: &lt;/p&gt;&lt;input type="text" id="brand"&gt;&lt;br /&gt;
      &lt;p class="inline"&gt;Crane type (ie. Crawler, Tower, Mobile): &lt;/p&gt;&lt;input type="text" id="type"&gt;&lt;br /&gt;
      &lt;p class="inline"&gt;Image of crane: &lt;/p&gt;&lt;input type="file" id="image"&gt;
      &lt;input type="submit" id="submit"&gt;
  
  &lt;/form&gt;
  </code></pre>