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.

Quasdunk · Accepted Answer · 2011-08-07 13:59:57Z

6

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.

edited Aug 7, 2011 at 13:59

answered Aug 7, 2011 at 13:53

Quasdunk

15.2k3 gold badges39 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ShankarSangoli · Accepted Answer · 2011-08-07 13:49:00Z

4

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>

answered Aug 7, 2011 at 13:49

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Collectives™ on Stack Overflow

Using nested forms in html document

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related