Why form inside a form is not working


We have a Web page where we need to have <forms> inside <forms>, you can see it here:


note: enter xyz@anoox.com for the email.

Once you enter the email, then you will see a row of results. The buttons with label:
“Provide Meta Data”
each have their own <form></form> tags
and the whole Table, has a <form></form> , which encloses the whole table and resulting
forms in there.

The 1st “Provide Meta Data” is NOT working, as that just calls back the same page.
However, the 2nd “Provide Meta Data” is working, as that calls the page that it is supposed to.

What is the problem?

P.S., This question one can say is as much of a HTML question, but I feel it is better posted
it here since so much of the page is Php generated. But the core of question, forms is
certainly HTML.

You can’t have a form within a form, so that’s why it doesn’t work. :slight_smile: What are you trying to achieve? Perhaps there’s another way to go about it.


One cannot have “a form within a form”! What a shame. What a limitation of HTML :frowning:

Well what I wanted to do was to have some buttons to go to X location with their own hidden form data
and some others go to another location with their own hidden form data and these data, as you can
see from the Table really best to be together as they are.
But if One cannot have “a form within a form”, then I guess I have to make it a but ugly and get the Job done.


I’m sure you can do that with two forms. You have a lot of styling options with CSS.


As Ralph has indicated there are ways to do this, some of which include:

  • Have multiple forms (outside of each other) and use CSS to re-position the form fields where you want them on the page.
  • You can have multiple submit buttons so that the logic can branch based on what button is selected.
  • You can use JavaScript and copy data from one form to another. This can include copying hidden data from on form field to another form field.
  • You can $_POST to a php page asynchronously using JavaScript and return an array, JSON, or just plain text. You might use this to do a first post, process it, and then bring some data (including the processed data) back and pass some of it to another form.


You can certainly put a form in form and expect it to work in all browsers but IE - but in this event it isn’t Microsoft’s fault. The spec requires you not to do this, but only IE follows the spec. It is best to code to spec - you never know when the other browser makers will change their mind and start following spec.

Over the last couple years Microsoft in their caution has made IE a bit of a miner’s canary. Only spec documents (or those reasonably close )will render correctly in IE 9 standards mode (quirks mode or broken page mode is a crap shoot you don’t want to play with).

As to why the spec forbids this - its a matter of scope resolution. Do the form elements in a nested form belong to to the parent? Does the nested form provide vars from the parent on submit? No easy agreement here - so the spec avoids the issue.

Form element names can be arrayed, so in addition to the suggestions ServerStorm gave before my post you can use that to get the effect of nested forms, while having one master form. Here’s how

<!-- The form tag appears only once as spec requires.
The php routed action must be prepared to route to the
correct code to process the subform -->
<form action="example.php" method="post">

<!-- First subform -->
<input name="[group1][element1]">
<input name="[group1][element2]">
<input name="[group1][element3]">
<button type="submit" name="[group1][submit]"></button>

<!-- Second subform -->
<input name="[group2][element1]">
<input name="[group2][element2]">
<input name="[group2][element3]">
<button type="submit" name="[group2][submit]"></button>

<!-- Third subform -->
<input name="[group3][element1]">
<input name="[group3][element2]">
<input name="[group3][element3]">
<button type="submit" name="[group3][submit]"></button>

When the submit occurs all of three forms will be sent, but only ONE of the submit buttons will be set. Using isset() you can determine which of the three submit buttons was pressed, process its sister elements in its array, and ignore the rest.