Semantic-ui: [Usage] Form inside modal

[emil-nasso]

I am a bit confused on how to submit a form inside a modal.

In my usecase (im converting an old application and switching to semantic ui) i have a list of items with an edit button for each item. When the edit button is clicked a modal is shown with a form where you can edit the item and then submit the changes. No javascript or ajax is involved in the actual editing, just the opening of the modal.

I put this fiddle together: http://jsfiddle.net/efp8z6Ln/157/

There are two forms here, one surrounding the modal and one separate. The one with the modal doesn't work but the separate one does.

What is the best way of working with forms inside modals? Is it possible? I would prefer to work with actual forms instead of manually picking out values with javascript and manually posting it with javascript.

[emil-nasso]

Got it working using this example:
http://jsfiddle.net/efp8z6Ln/158/

I have to use the form='theform' attribute to get it working at all.

Is this a html-thing perhaps, and not a semantic-thing?

[jlukic]

If a submit button is not nested inside a form tag it is the case you need to specify what form it should submit.

Thanks for sharing your experience for others to learn from.

[morgs32]

@jlukic I believe it incumbent on you to make your modal work with a form in it. I hope you can see this is a very common use case for a modal. I need a form in the modal (so that in the DOM it's a parent to the inputs and the modal actions). Using the react library, putting a from outside the modal (outside the DOM tree) and using an id is not sufficient.

Perhaps I'm just not privy to a good way of doing this?

[scipilot]

I know this issue is closed, but this still has problems in v2.4.

Like Emil, I can't see a simple way of using a form in a modal - when you divide the structure up into header/content/actions it breaks the association with the submit button. I have tried all possible combinations of placement of the form and it either breaks the form, or the rendering of the modal. And I have also tried moving the class="ui form" between the form and other containing divs to improve the rendering aspect.

e.g. simply represented.

This works, but looks terrible:

form
header
content
actions - submit button
/form
/modal

This looks good, but the submit button in the actions div doesn't submit the form:

modal
header
content
actions - submit button
/modal
/form

This works as expected but has no styling, so looks terrible:

form
submit button
/form
/modal

A submit button inside the content div also works, but isn't where I want it.

header
form
content  - with a submit button
/form
actions
/modal

It just doesn't work when the submit button is moved to the actions div - where you want it.

The only solution I've found to work is that suggested by Emil, having the submit button outside the form, and using the form attribute to link back to the form".

header
content
form - with ID
/form
/content
actions  - with submit button with form=ID
/modal

But it feels unnecessary to have to do this?

[kokogakayui]

I have been having the same exact issue as scipilot, in my using RubyOnRails form_with helper. Is there anything new on that matter ?

[h0lg]

Making the modal a form like this <form class="ui modal form"> also seems to work, but the fact that you have to jump through these hoops to get a form working inside a modal in my opinion points to a flaw in the modal design.

[gevezex]

Making the modal a form like this <form class="ui modal form"> also seems to work, but the fact that you have to jump through these hoops to get a form working inside a modal in my opinion points to a flaw in the modal design.

Actually it is very convenient. For example login in at a particular page without leaving that page.

[h0lg]

Actually it is very convenient. For example login in at a particular page without leaving that page.

I don't see the convenience. Could you elaborate? But I read my comment and see that I wasn't clear about what I mean by have to "jump through hoops". I mean what scipilot commented on Nov 3, 2018, more specifically:

Like Emil, I can't see a simple way of using a form in a modal - when you divide the structure up into header/content/actions it breaks the association with the submit button.

The modal wants its associated buttons in the "actions" div - i.e. outside of its "content" div, whereas a HTML (4) form wants/prefers its associated buttons within the form.
Trying to nest a form within the content of a modal, you realize that you have to break the association with the form by moving the buttons out, and then re-establish it using the (HTML 5) form attribute, which I have just learned about in this thread.

However, the following markup allows you to have the buttons associated with both the form and the modal:

<form action="..." class="ui form modal" method="...">
    <i class="close icon"></i>
    <div class="header">Modal form</div>
    <div class="content">
        <!-- form inputs go here -->
    </div>
    <div class="actions">
        <button type="submit" class="ui approve button">Save</button>
        <button type="reset" class="ui deny button">Cancel</button>
    </div>
</form>