CODEWITHSUNDEEP
phpjavascripthtmlforms
Gideon
Gideon

Reputation: 1876

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)

I have a form such that a list of questions with inputs is followed by an invitation to upload files if they have them.

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.

How can I do both at once?

My code:

<form id="questions" action="page2.php" method="POST">
    Question 1 <input name="q1"/>
    Question 2 <input name="q2" />  
    Have any files to add? <button id="upload-button">Upload</button>
    <input type="submit" value="Submit Answers" />
</form>


<div class="hidden">
    <form id="fileupload" enctype="multipart/form-data" action="uploader.php" method="POST">
        <input id="fileupload" type="file" name="files[]"  multiple>
        <input  type="submit" value="Upload Files" />
    </form>
</div>

jQuery will pop up the hidden div if someone presses the button to add files.

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)

Any ideas? Thanks

Upvotes: 4

Views: 1343

Answers (1)

Steven Moseley
Steven Moseley

Reputation: 16325

Very simply, structure your HTML like this, and process the logic from both page2.php and uploader.php in one shot (i.e. include the file-upload logic in page2.php). If you show us the contents of both of those files, I can show you how to combine them.

Also added labels with links to the associated inputs, and swapped the submit input for a button element.

<form id="questions" enctype="multipart/form-data" action="page2.php" method="POST">
    <label for="q1">Question 1</label>
    <input id="q1" name="q1" type="text" />

    <label for="q2">Question 2</label> 
    <input id="q2" name="q2" type="text" />  

    <label for="fileupload">Upload a File<label>
    <input id="fileupload" type="file" name="files[]"  multiple />

    <button type="submit">Submit</button>
</div>

Upvotes: 4

Related Questions