Question

I want to write a jQuery file uploading program,
using this plug-in http://aquantum-demo.appspot.com/file-upload
Despite this plug-in is really good, I encounter a problem.

This is what I did:
I designed a form which the graphics uploading part uses the plug-in listed above.
However, this plug-in also requires a form to activate PHP.

Program Excerpt:

<form action="" method="get">
<--This layer probably needs other form information ex: name, telephone no....etc !-->
   <form action="upload.php" method="POST" enctype="multipart/form-data">
        <div class="fileupload-buttonbar">
            <label class="fileinput-button">
                <span>Add files...</span>
                <input type="file" name="files[]" multiple>
            </label>
            <button type="submit" class="start">Start upload</button>
            <button type="reset" class="cancel">Cancel upload</button>
            <button type="button" class="delete">Delete files</button>
        </div>
    </form>
</form>    

I know that the malfunction is caused by the two forms, if so, is there any way to fix it?
Or is there better ways to submit forms? Please HELP me! Thank you guys!

Answer 1

The problem is that you have nested forms. Don’t use nested forms. Their behavior is undefined.

From looking at your code, it’s not clear as to why you even need the first form. It has no action and so it doesn’t seem to be doing anything. Is there a reason that you cannot include the file-upload controls within the existing form?

If you cannot, you can do one of two things:

• Don’t provide a submit button for the file-upload form. Add a submit handler to the contact form. In this handler, you can explicitly fire the submit event on the file-upload form. This method is less work on the front-end, but you have two explicit submissions and so you will probably need code on the back-end to figure out which file(s) are associated with which contacts.
• Have hidden fields on the file-upload form that match up with the fields in your contact form. Don’t provide a submit handler for the contact form. Add a submit handler to the file-upload form. In this handler, you can copy values over from the contact form to the hidden fields on the file-upload form. This method is more work on the front-end, but you’re submitting everything in one go and so you don’t have to do extra work on the back-end to figure out which files go with which contact. Overall I think this method is easier.