html file upload as part of another form

Question

Idealy I would like to have the following:

<form1 ...>

    ...

     <form2 ...>

         //This form uploads a file using AJAX and writes the content into a text field below.

     </form2>

     <input type="text"/>

</form1>

Firefox handles this but IE likes to follow the rules of W3C this time and it doesn't really work.

So now I have to handle form2 outside of form1 through javascript. Can you provide some help about how to go about this?

Thanks in advance.

Answer 1

Hook the submit event (from form 1's submit), and use something like Ajax.Request in Prototype to scrape and send form 2. You might find Form.request useful as well.

TODO: learn the jQuery way to do it, I guess.

Answer 2

Why not try using the YUI library to perform an AJAX file upload?

Here is a great tutorial on how to accomplish this: http://thecodecentral.com/2007/09/04/asynchronous-file-upload-yuis-approach

Answer 3

You are going to have to put the same handler on the submit event of both forms. In it, prevent the default behavior of each submission. Submit form2 using the submit function; then remove it from the DOM. Next, feel free to submit form1. Of course, you could use AJAX to submit the forms as well, since you already have the handler placed.