Bootstrap modal coded inside forms - rendered with model then OUTSIDE the form

Question

I have a standard Rails app form with nested attributes. I have too many fields in the nested attributes so I figured I would create a modal window for these via Bootstrap. It looks roughly like this:

<body>
  <form>
    <div id="modal" class="modal">
      modal form input fields
    </div>
  </form>
</body>

The issue I have is that when rendered in the browser I get this:

<body>
  <form>
  </form>
  <div id="modal" class="modal">
    modal form input fields
  </div>
</body>

The modal divs are all moved to the end of the body and hence the inputs not submitted with the form. The modals work just fine.

After searching I came across this (position:fixed):

https://getbootstrap.com/docs/4.0/components/modal/

I don't know if it related but worth mentioning. Anyone else seen this? I can't seem to find another related issue but could easily be using the wrong search terms etc.

UPDATE

Hunted through the BS code:

   // Move modal to body
    // Fix Bootstrap backdrop issue with animation.css

    // MOD Keeps the modals in place so you can hide them in a form

    $('.modal').appendTo("body");

Now - thoughts on how to prevent this? If it was one modal I could just move it back. The issue is I have multiple modals (one for each nested attribute which can be > 0). I can conceive making this work (ie. moving them all back) but ideally suppressing this would be better (easier).

i think, position fixed has nothing to do with this. You could use the Modal events to populate or send your data $('#myModal').on('hidden.bs.modal', function (e) { // do something... }) — db1975, Feb 15 '20 at 00:57
If I were you, I'd review my HTML markups twice :) I do remember a user asking a similar question to this about a form generated using Rails... And it was non valid HTML being ignored by the browser — Bilel, Feb 15 '20 at 01:03
Found the question : https://stackoverflow.com/questions/6095076/form-for-closes-form-tag . If it's not that, you better share your ruby code too, and add "ruby-on-rails" tag to your question. — Bilel, Feb 15 '20 at 01:07
And this one : https://stackoverflow.com/questions/19736609/rails-is-adding-a-form-tag-in-a-spot-that-is-not-where-i-closed-the-do-block — Bilel, Feb 15 '20 at 01:09
I will check my HTML. That seems possible. The odd part is the modals are all dumped to the very end of the BODY. — Dan Tappin, Feb 15 '20 at 01:24
It's not because I have to imagine that :) I'd suggest a layout with something like what you call an anomaly ! Isolate the modal container from any loops, nested elements... And update it's content (form here) using the active selector attributes. Sometimes I use json objects if it's too much of data to handle... — Bilel, Feb 15 '20 at 01:32
Worth noting that you can avoid this problem by using the form attribute on your form elements ([MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefform)), although that does require adding an id to your form, and isn't supported in IE (https://caniuse.com/#feat=form-attribute) — Tieson T., Feb 15 '20 at 01:59
What is most likely happening is that Popper.js (the code that does the heavy lifting for displaying and positioning Bootstrap modals) is pulling the modal markup from the page when rendering the modal, and then injecting it back into the end of the page when the modal is hidden. Would take some experimenting to see if that's actually the case, though. — Tieson T., Feb 15 '20 at 02:07
It is Bootstrap for sure. See the edited question - I added the 'modal' class that activates the modal. If I comment out that class the div does not move. Same code - no changes otherwise. Will look at Popper.js next. — Dan Tappin, Feb 15 '20 at 03:19
I do not seem to have Popper.js installed. My Bootstrap I vs. 3 (bootstrap-sass gem) I have a legacy template code that I am working with that could also compound the issue. — Dan Tappin, Feb 15 '20 at 03:22

score 0 · Accepted Answer · answered Feb 15 '20 at 18:02

Given my situation I choose to just move the divs back. It was not that bad:

<body>
  <form>
    <table>
      <tr>
        <td class="modal_id_1">
          <div id="modal_id_1" class="modal">
            modal form input fields
          </div>
        </td>
        <td class="modal_id_2">
          <div id="modal_id_2" class="modal">
            modal form input fields
          </div>
        </td>
      </tr>
    </table>
  </form>
</body>

After age load the modal divs are moved to the end of the body. I did this:

  $('.item_modal').each(function() {
    $(this).appendTo("td." + $(this).attr('id'));

Open to better answers - thanks to those that commented

Bootstrap modal coded inside forms - rendered with model then OUTSIDE the form

1 Answers1