Feature request: Allow specifying target element to insert form when using anchor with data-turbo-method

[cschilbe]

Current behaviour

When using <a data-turbo-method="post" ... ></a>, the form is appended to the body to ensure that it is not embedded within another form. This works well, but means that the turbo:submit-end event only bubbles up to the body element.

Expected behaviour

I would like to have another attribute data-turbo-form-target or similar, where the form would be inserted before submitting. This would allow for the developer to be in control of where the form is inserted and to handle the event in a predictable context closer to the link that triggered the form.

Proposal

By allowing for an optional data-turbo-form-target attribute, we could enhance the behaviour without breaking existing clients.

https://github.com/hotwired/turbo/blob/main/src/observers/form_link_click_observer.ts#L63

const formTarget = document.querySelector(link.getAttribute("data-turbo-form-target")) || document.body
formTarget.appendChild(form)

Alternative approach

Alternatively, we could dispatch a turbo:submit-end event to the anchor element of which this form was created and submitted for. This was my initial thought but I know from reading that we are not interested in enhancing the anchor to form functionality too much and firing a turbo:submit-end event on an anchor tag might go against core principals.

[brunoprietog]

Why don't you use a <form> instead of an <a> element? This would give you more control. I understand that no more features will be added to data-turbo-method. Any request that is not a get must be made via a form and a button that submits it, also for accessibility reasons. Is there anything preventing you from using a form element?