Turbo Frames and JS form.submit()

There is an issue with Turbo Frames and .submit() which causes it not to work with Turbo Frames.

According to this Hotwire discussion:

Turbo intercepts form submission events, but weirdly, the JS formElement.submit() method does not trigger the submit event.

Solution

Update to the latest version of Turbo and use .requestSubmit() instead.

If using Turbo version < 7.1 you may run into browser compatibility issues so it's best to update Turbo.

It turns out that the turbo-stream mechanism listens for form submission events, and for some reason the submit() function does not emit a form submission event. That means that it’ll bring back a normal HTML response. That said, it looks like there’s another method, requestSubmit() which does issue a submit event.