Question

I have this structure in my page. Secondary form works, and main does not. When I remove secondary, then MAIN works. I would like to keep them both in this structure because I ended my code. Is there any way to manage it? Thank you!

<form name="main" action="result.php" method="post">
. // this form submits some results to result.php
.
. 
<form name="secondary" ........>
.
. //this is an ajax form that uploads an image to the server
</form>
.
.
.
<input button>
</form>

Answer 1

Not possible like that, sorry: that is not valid markup – HTML forms do not allow nesting. I’m sorry if that’s inconvenient; as it stands, this will only break in various interesting ways in different browsers, and definitely will not do what you intended.

On a more positive note: the final goal you want is achievable, albeit in different ways:

• do the image and form processing in one form (not entirely convenient, I admit)
• have the “inner form” as an IFRAME
• send “inner form” via AJAX:
  • the “inner form” is not a <form>, maybe just a <fieldset>?
  • it has an input button, which launches a JS method which sends the data from the “inner form” via AJAX
  • the “outer form” is an actual <form>; before it’s submitted, it clears the contents of the “inner form”, so the “inner form” fields aren’t submitted with “outer form”
  • this will break without JavaScript
• have the “inner form” outside the “outer form” HTML, position them with CSS (so it appears to be “outer” and “inner”, when it’s actually “form #1” and “form #2”) – as suggested by @Kau-Boy in the comments
  • this would probably look strange in screen-readers etc, but it would be the cleanest approach IMO