Using nested forms in html document

Question

I am trying to set one form into another in my html document like this:

<form1 action="1.php">
some form elements
...................
<form2 enctype="multipart/form-data" action="upload.php" target="upload_target" onsubmit="startUpload();>
<input name="myfile" type="file"/>
<input type="submit" name="submitBtn" class="sbtn" value="Upload" />
</form>
</form>
<iframe id="upload_target" name="upload_target" src="#"></iframe>

The first form gets data from user and inserts into my database. The second form makes file upload with jquery and iframe like in this example : upload file with iframe and jquery

I am trying to upload file in such way because I cant do it by simply transfering data to php file with javascript(with ajax). And the problem is that nested forms are not supported by w3c standards. What can I do to solve this problem? Thanks for help and sorry for my poor english.

Answer 1

I ran into the same problem once, so here's my suggestion: You could put form2 in a different container, e.g. a div which is outside form1 and adjust its position with css (z-index, absolute position or something like that) so it looks like one form.

The disadvantages of this approach are obvious, but with a little effort you can handle them to a certain level.

Another suggestion: Since you're working with javascript anyway, outsource the upload-form to an invisible div and make it pop up by clicking/hovering an upload-button or entering the last field of form1 or whatever.

Answer 2

You cannot have nested form. Try to avoid it and seperate out the forms as below. And while submitting any form if you data from other form, create a hidden fields in this form and submit it.

<form1 action="1.php">
some form elements
...................

</form>

<form2 enctype="multipart/form-data" action="upload.php" target="upload_target" onsubmit="startUpload();>
<input name="myfile" type="file"/>
<input type="submit" name="submitBtn" class="sbtn" value="Upload" />
</form>