0

I have a form to show a user's profile and allow changes to it and inside this form I also have a button to show a modal with a form to change the password (form inside a form).
When I click the button to submit the inner form it is submitting both. I know this can be fixed by using type="button" and adding an onClick event to the button that submits the form but if I do that I am also disabling the functionality of being able to submit the form by pressing the enter key.
The other option is to place the button with the modal outside of my form but I want to avoid doing that if possible because I would have to also change the styling.
Is there a better option? Which is the optimal option?

Niammi
  • 76
  • 1
  • 7

1 Answers1

0

Unfortunately,

(form inside a form).

nested forms are not allowed per HTML specification, the result is invalid HTML output.

I would suggest to go with the following option, even if it's more work:

The other option is to place the button with the modal outside of my form

Per W3C spec:

Flow content, but with no form element descendants.

Relevant stackoverflow discussion: Can you nest html forms?

Andrew Ymaz
  • 1,863
  • 8
  • 12
  • 1
    The relevant specification is [here](https://html.spec.whatwg.org/multipage/forms.html#the-form-element). HTML 3 never became a standard and if it had, it would be woefully out of date now. – Quentin Jul 01 '21 at 21:33