How can I disable turbo drive inside a turbo frame?

1

In the following code, I want to submit the form and disable turbo. The reason is that after the form submission I would like to redirect to an external website. This is not working now. Is this intentional or am I missing anything?

Note that this frame is lazy loaded in a different page.

<turbo-frame id="billing">
    <form method="post" data-turbo="false" action="/billing-url">
      {% csrf_token %}
      <button type="submit" class="btn btn-outline-secondary">Manage subscription</button>
    </form>
</turbo-frame>
2

if you set the target attribute on the form to “_top” it might work.

<form method="post" target="_top" action="/billing-url">

https://turbo.hotwire.dev/reference/frames#html-attributes

3

I tried this but didn’t help. Still Turbo Frame tries to replace the whole page content but not a full redirect.

4

The target="_top" belongs on the turbo-frame element …

But I tried that too - and I suspect there is a bug with being able to switch off turbo for form submissions inside a frame.

What I have done instead is capture the submit event with stimulus and call the stopPropagation method on the event. That prevents the form from being submitted via Turbo.

1 Like
5

Thanks. I also think this is a bug that turbo is not disabled when the form is in a turbo-frame. My solution was to use a Stimulus content loader instead of a turbo frame. But I find your solution elegant too.

1 Like
6

I think this situation match issues 227 and 228. I see now they’re closed today with v7beta announcement.