Custom Forms - confusion

1

Hotwire looks fantastic - having a bit of an issue with custom forms that it would be great to get some help on.

I’ve created a blank hotwire project, then a simple scaffold (monkey). The CRUD operations seems to work. Form data is sent as TURBO_STREAM and is handled by the scaffold controller and html.erb views.

<%= form_with(model: monkey) do |form| %>
… scaffold input …
<%= form.submit %>
<% end %>

When I try and create a very simple custom form for another model

<%= form_with(model: @customer, url: step2_path) do |f| %>
<%= f.submit “Next”, class: “btn btn-success” %>
<% end %>

The form is submitted as TURBO_STREAM and this error is shown in the browser console.

Form submission failed FormSubmission {state: 2, delegate: Navigator, formElement: form, formData: FormData, submitter: input.btn.btn-success, …} Error: Form responses must redirect to another location
at FormSubmission.requestSucceededWithResponse (turbo-aca352d862899e9670bf9741fcebf788fc606be14900e7dfd2569573c2e56213.js:433)
at FetchRequest.receive (turbo-aca352d862899e9670bf9741fcebf788fc606be14900e7dfd2569573c2e56213.js:297)
at FetchRequest.perform (turbo-aca352d862899e9670bf9741fcebf788fc606be14900e7dfd2569573c2e56213.js:278)

I can get a working app with this, but I loose all my controller variables

def create
redirect_to another_place_path, notice: ‘Customer was successfully created.’
end

I’ve read through a some of these posts, but can’t see a resolution.

Two questions…

  1. Is there a way to turn off TURBO_STREAM for a form?

  2. For backwards compatibility is there a way I can turn off all TURBO_STREAMing , then only enable this for the forms and links that I want?

Thanks for any help.

1 Like
2

I’m facing the same issue, it seems Turbo expects form Submissions to redirect to somewhere else.

I wonder if this kind of thing should be handled by stimulus rather than turbo-frame, but tbh, It would better if turbo-frame could handle it by itself.

EDIT: I was able to achieve something acceptable by using turbo-streams rather than turbo frames.

index.html.erb

image
image752×177 15.5 KB

search.turbo_stream.erb
image

3

This pull request was merged into Turbo a couple of days ago. It allows you to use the render method in conjunction with a status code like 422 to re-render forms.

You’d have pull down a version of Turbo with the PR merged in since there hasn’t been a new official release yet.

4

But a basic search would return 20X http code, it wouldn’t work either, right?

5

Ah yeah, I believe it wouldn’t work with a search form. Streams may be the best solution there. You could potentially fall back to a redirect if JavaScript would be disabled.

1 Like
6

Thanks for your replies. Getting more understanding as I play around a bit more.

I was hoping to be able to install it on an existing site and slowly migrate into the Hotwire way of doing things.

But the way it changes the behaviour of forms makes me think that this impossible at the moment. Unless someone can provide a way forward for this.

7

We’re going to fix this by turn a GET form submission into a visit. On the road map :v:

8 Likes
8

Is there any way to follow the road map? To be notified / know the ETA for this exact feature, to be more specific :slight_smile:

9

This feature was implemented and is available in 7.0.0-beta.4.

3 Likes