How to Overcome the HTML Form Nesting Limitation

How do you overcome the HTML form nesting limitation?

I would implement this exactly as you described: submit everything to the server and do a simple if/else to check what button was clicked.

And then I would implement a Javascript call tying into the form's onsubmit event which would check before the form was submitted, and only submit the relevant data to the server (possibly through a second form on the page with the ID needed to process the thing as a hidden input, or refresh the page location with the data you need passed as a GET request, or do an Ajax post to the server, or...).

This way the people without Javascript are able to use the form just fine, but the server load is offset because the people who do have Javascript are only submitting the single piece of data needed. Getting yourself focused on only supporting one or the other really limits your options unnecessarily.

Alternatively, if you're working behind a corporate firewall or something and everybody has Javascript disabled, you might want to do two forms and work some CSS magic to make it look like the delete button is part of the first form.

Can you nest html forms?

In a word, no. You can have several forms in a page but they should not be nested.

From the html5 working draft:

4.10.3 The form element

Content model:

Flow content, but with no form element descendants.

Nested Form Alternative

You can't have nested forms in HTML, so you have to use an alternative.

The form that you post doesn't have to be located where the information that you want to post is located. You can use Javascript to copy the information from some fields in the page into hidden fields inside a form somewhere else on the page, and post that form.

This will also make the page simpler. You can use a single form for the delete function, instead of having one form for each item.

I need help to solve a nested FORM problem

<td>
    <form action="page.php" method="POST"><input type="hidden" name="id" value="'.$id.'" />
    <button type="submit" name="action1">Send</button>
    </form>
    <form action="page.php" method="POST"><input type="hidden" name="id" value="'.$id.'" />
    <button type="submit" name="action2">Archive</button>
    </form>
    </td>

in this section I would modify it with hotlinks instead of forms and make diffrent handling page, for example:

echo "<td><a href='page2.php?action=send&id=".$id."'>Send</a> ";
echo "<a href='page2.php?action=archive&id=".$id."'>Send</a></td>";

and the page2.php would operate on $_GET["action"] and $_GET["id"] like replaced mini-form.

then your form from the begining (with checkboxes, that you stated that doesn't work) will be the only one and work :)
this will be ok only if you gave access to verified user.

hope this will push you foreward.

:)

Why WHATWG disallows nested forms in HTML 4 and HTML5?

As far as HTML5 (the draft spec) goes, the situation is not nearly as clear cut as David Dorward suggests. What is true, is that there's no way that nested forms can be specified in the text/html serialization in a backward-compatible way without adding a new way of delimiting forms in markup.

On the other hand, in the application/xhtml+xml serialization, it's not only possible to markup nested forms, but HTML5 goes to some lengths ( http://dev.w3.org/html5/spec/forms.html#form-owner ) to specify what should happen in this case. Further, a quick test around the latest versions of FireFox, Opera, Chrome, and Safari, plus IE9 platform preview shows that they all do what HTML5 specifies.

So, it could have been valid in the HTML5 content model, but it isn't. What determines what is valid and what isn't rests largely on use-cases. So far, no one has provided a sufficiently compelling use case to WHATWG or the W3C HTML WG for making nested forms a part of valid HTML5.

Form inside a form, is that alright?

Though you can have several <form> elements in one HTML page, you cannot nest them.

Nested forms in html

Put appropriate data in the submit buttons:

<button type="submit"
        name="view_post"
        value="1234">
        View Post
</button>

<button type="submit"
        name="delete_checked_posts"
        value="delete_checked_posts">
        Delete checked posts
</button>

Test to see which of the two submit button names appears in the submitted data. If it is view_post then ignore the checkbox data and just view the post. Otherwise, loop over the checkbox values and delete away.

---

Related Topics