Form element is lost on modal.load() in chrome

[carlwitt]

I'm loading a form via ajax. The server generates this plaintext response, which is captured by modal.load()

<div class="modal-header">
    [...]
</div>
<div class="modal-body">

    <form action="{{ submitURL }}" method="post" {{ form_enctype(form) }}>
        form contents...
    </form>

</div>
<div class="modal-footer">
    [...]
</div>

The strange thing is now that, when this content is embedded into the modal, the form tag gets lost. I double checked the server response (by inspecting the server response and printing the result using the console like below).

// fill the modal with modal skeleton markup (header, body, footer) and form inputs
$modal.load(modalRetrieveUrl, '', function(data){
    console.log(data);
    $modal.modal();
});

But when I inspect the modal code in chrome, the form tag disappeared. In firefox, it works fine. I could workaround the issue in chrome by adding another, empty form tag, which gets lost instead of my real form. But this also generates an additional form tag in firefox.

Very strange behavior.

[thomandre]

Quick fix : add a empty script tag before the form tag.

[tddrmllr]

I'm getting this error too - in Chrome and Safari. Neither of the suggested fixes in this thread have worked for me either.

[igormancos]

+1 , save my life

[uschmann]

I solved this by making sure that all input elements are self-closed.