title: Uploading files within a larger form (two forms on one page), how can I submit both sets of data (file and form) at once? (PHP)
body: <p>I have a form such that a list of questions with inputs is followed by an invitation to upload files if they have them.</p>
  
  <p>I have avoided nesting forms by popping up the form containing the upload. The difficulty is that if they press submit on the Uploader form, it will process the upload on the destination page, and likewise if they hit submit on the rest of the form, the uploads are not submitted.</p>
  
  <p>How can I do both at once?</p>
  
  <p>My code:</p>
  
  <pre><code>&lt;form id="questions" action="page2.php" method="POST"&gt;
      Question 1 &lt;input name="q1"/&gt;
      Question 2 &lt;input name="q2" /&gt;  
      Have any files to add? &lt;button id="upload-button"&gt;Upload&lt;/button&gt;
      &lt;input type="submit" value="Submit Answers" /&gt;
  &lt;/form&gt;
  
  
  &lt;div class="hidden"&gt;
      &lt;form id="fileupload" enctype="multipart/form-data" action="uploader.php" method="POST"&gt;
          &lt;input id="fileupload" type="file" name="files[]"  multiple&gt;
          &lt;input  type="submit" value="Upload Files" /&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery will pop up the hidden div if someone presses the button to add files.</p>
  
  <p>I don't have a problem with them being posted to the same place, but I tried using javascript to use the click event for each button to submit both forms and it did not work. 
  (Reading stack overflow later explained that only the last submission gets processed in this way)</p>
  
  <p>Any ideas? Thanks</p>