We have a Web page where we need to have <forms> inside <forms>, you can see it here:
note: enter firstname.lastname@example.org 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
You can’t have a form within a form, so that’s why it doesn’t work. 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
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 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 -->
<button type="submit" name="[group1][submit]"></button>
<!-- Second subform -->
<button type="submit" name="[group2][submit]"></button>
<!-- Third subform -->
<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.