Break out of a frame during form redirect

16

I solved this using Stimulus and not using target="_top".

In my case I needed to use a <turbo-frame> as I was loading the form in from another controller. Think of the way you rename a contact on Hey.com

rename
rename3584×2274 246 KB

Form errors are handled automatically by returning a 422 status code.

For form success I listen to turbo:submit-end on the turbo frame and Turbo.visit() the next page.

/* form_controller.js */
import { Controller } from "stimulus"
import * as Turbo from "@hotwired/turbo"


export default class extends Controller {

  static values = { next: String }

  next(event) {
        if (event.detail.success) {
            Turbo.visit(this.nextValue)
        }
  }
}

<a data-turbo-frame="contact-name-edit"  href="/contact/1/name/edit">Load form</a>
<turbo-frame id="contact-name-edit" data-controller="form" data-form-next-value="/contact/1" data-action="turbo:submit-end->form#next"></turbo-frame>

My original post on this Forms without redirect - #24 by nwjlyons

3 Likes