AngularJS nested froms, submit button not working

Question

I have an outer form that once submitted will, send the user to the next step. The inner form is submitting search requests for a table that is nested in the outer form. At the moment my solution is not triggering either of the two forms.

<form id="outerForm" onsubmit="submitOuter()">
    <form id="innerForm" onsubmit="submitInner()">
        <button type="submit" form="innerForm">Search</button>
    </form>

    <button type="submit" form="outerForm">Next Step</button>
</form>

jsfiddle here

PS my example is obviously not using AngularJS, the difference is that my forms have data-ng-submit.

form elements should not be nested. More information

Robert
– Robert

2015-09-23 08:39:03 +00:00
Commented Sep 23, 2015 at 8:39 — Robert
– Robert, Commented Sep 23, 2015 at 8:39

Pankaj Parkar · Accepted Answer · 2015-09-23 09:45:47Z

1

You could not have nested form on HTML, but angular does provide the ability to have them nested. For implementing the same thing you need to use ng-form directive.

Outer form will have ng-submit event, but the inner form would have ng-click event with button type="button", if you won't change the button type then it will call the parent form ng-submit method.

Demo Fiddle

ng-submit directive work only with form element, so you need to specify form tag for outer form, since you want ng-submit there.

edited Sep 23, 2015 at 9:45

answered Sep 23, 2015 at 8:50

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

cullimorer · Accepted Answer · 2015-09-23 08:45:25Z

0

Forms should never be nested, are you actually using Angular in your application? If so, could you please provide a Punker of what you are trying to achieve.

answered Sep 23, 2015 at 8:45

cullimorer

7551 gold badge5 silver badges25 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:44:40Z

0

It is not valid to nest form elements, see this question.

I suggest you use ng-click on a type="button" input in the inner part of your form, which handles the search, and ng-submit for the outer one.

I have modified the example plunker of the angular docs on ngSubmit to show you what i mean.

edited May 23, 2017 at 11:44

CommunityBot

11 silver badge

answered Sep 23, 2015 at 8:46

Kevin Dreßler

4472 silver badges15 bronze badges

Collectives™ on Stack Overflow

AngularJS nested froms, submit button not working

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related