How to put a from inside a from in html

Question

I am trying to put a form inside a form, here is my code:

<form action="info.php" method="post" id="test1">
        <input type="hidden" name="name" value="test">
        <a id="test" style="text-decoration:none;" onclick="document.getElementById('test1').submit();">
            <!-- somestuff -->
            <form action="insertCart.inc.php" method="POST" id="test11">
                    <p class="card button"><button type="button" onclick="document.getElementById('test11').submit();" name="add-to-cart">Add to Cart</button></p>
                </form>
            </div>
        </a>
    </form>

I have tried lots of javascript with the onclick but if i click on the button that is inside the from that is inside the from it will do nothing, but if i change the type to submit it will submit the from with the id "test1" that is also not what i want. Is there any way i can fix it??

Could it be that the id value of your inner form is typed incorrectly? Instead of `tset11`, it should be `test11`. — junkangli, May 17 '20 at 08:14
@HeisAif Don't link to duplicate answers. [Here is the original answer](https://stackoverflow.com/questions/379610/can-you-nest-html-forms) which states what I already said. The HTML is invalid. — Rob, May 17 '20 at 08:17
Does this answer your question? [Can you nest html forms?](https://stackoverflow.com/questions/379610/can-you-nest-html-forms) — Mark, May 17 '20 at 08:26

score 2 · Answer 1 · answered May 17 '20 at 08:17

2

You can't nest forms, it's invalid HTML.

However, what you can do is use the form attribute in your inputs to create the same effect.

From https://stackoverflow.com/a/54901309/1600379:

<form id="main-form" action="/main-action" method="post"></form>
<form id="sub-form"  action="/sub-action"  method="post"></form>

<div class="main-component">
    <input type="text" name="main-property1" form="main-form" />
    <input type="text" name="main-property2" form="main-form" />

    <div class="sub-component">
        <input type="text" name="sub-property1" form="sub-form" />
        <input type="text" name="sub-property2" form="sub-form" />
        <input type="submit" name="sub-save" value="Save" form="sub-form" />
    </div>

    <input type="submit" name="main-save" value="Save" form="main-form" />
</div>

answered May 17 '20 at 08:17

Mark

3,005
1
21
30

Note: the `` tag does not use and does not need a closing slash and never has in HTML. – Rob May 17 '20 at 08:18
Using end slashes, or not, are both valid HTML. Using them or not is a different discussion and not relevant to this q&a. – Mark May 17 '20 at 08:25
for what code i have it does not work and i also tried this for the button that was meant to submit the form inside the form that did not work: – Alien 10 May 17 '20 at 10:46
While it is allowed, I like to point out to people, who seem to be using it more and more for no known reason whatsoever, how useless and pointless that effort is as it carries no meaning and does nothing. – Rob May 17 '20 at 12:27
@Alien10, your code is confused, it's not only a nested form, but it's also placed within a link, which looks to be trying to do the same thing as the nested form submit button. It may be part of a wider set of code, but you may need to rethink your approach and the reason for having a nested form in the first place. Nested forms are a valid, but not common requirement. The attribute was included in the spec specifically for the purpose. – Mark May 17 '20 at 17:44

score 0 · Answer 2 · answered May 17 '20 at 08:19

0

You can not nest the form tag inside another form.

answered May 17 '20 at 08:19

Saumil Nagariya

49
1
6

score 0 · Answer 3 · answered Jun 21 '20 at 02:13

0

I had to make the forms different forms for it to work

answered Jun 21 '20 at 02:13

Alien 10

71
2
8

How to put a from inside a from in html

3 Answers3