Hotwire Discussion

Error: Form responses must redirect to another location with Firefox

I have a bunch of standard edit forms in my Rails app:

<%= form_for @post, method: :put, url: {action: "update"}  do |f| %>

...

<% end %>

Upon successful submission of the form, the user will be redirected to the show page of the @post in question.

Everything works as expected in Chrome and Safari.

However, in Firefox, despite the form being successfully submitted, the user is left on the form page and a network error is logged as follows:

Error: Form responses must redirect to another location
    requestSucceededWithResponse turbo.es2017-esm.js:965
    _callee2$ turbo.es2017-esm.js:602
    Babel 8
    _callee$ turbo.es2017-esm.js:550
    Babel 10
    _callee3$ turbo.es2017-esm.js:897
    Babel 8
    submitForm turbo.es2017-esm.js:3160
    formSubmitted turbo.es2017-esm.js:4297
    submitBubbled turbo.es2017-esm.js:2793
    submitCaptured turbo.es2017-esm.js:2779
turbo.es2017-esm.js:3276
    formSubmissionErrored turbo.es2017-esm.js:3276
    requestSucceededWithResponse turbo.es2017-esm.js:966
    _callee2$ turbo.es2017-esm.js:602
    Babel 8
    _callee$ turbo.es2017-esm.js:550
    Babel 10
    _callee3$ turbo.es2017-esm.js:897
    Babel 8
    submitForm turbo.es2017-esm.js:3160
    formSubmitted turbo.es2017-esm.js:4297
    submitBubbled turbo.es2017-esm.js:2793
    (Async: EventListener.handleEvent)
    submitCaptured turbo.es2017-esm.js:2779

I notice that this happens wherever the action of the form is the same route as show page. For example:

<form class="edit_post" id="edit_post_<post_id>"  action="/posts/<post_id>" accept-charset="UTF-8" method="post">

I’m not sure what I can do here given I’m using standard Rails form helpers to construct my forms and it’s a normal pattern to be taken back to the page of the recently-updated object.

Has anybody else seen this? How can I make sure that my forms work on Firefox?

Thank you very much!

1 Like

I notice that this happens wherever the action of the form is the same route as show page.

I found this problem when I want to redirect to index page after a successful create.
And this only happens when I use Firefox, but not in Chrome.

Adding created status will make the redirection work for me:

redirect_to posts_path, status: :created

But for update, i just add a random param to the path to make the url different , for example:

redirect_to post_path(@post, redirecting: true)

In rails redirect_to also forwards the method onto the redirect.

If you are using XHR requests other than GET or POST and redirecting after the request then some browsers will follow the redirect using the original request method. This may lead to undesirable behavior such as a double DELETE. To work around this you can return a 303 See Other status code which will be followed using a GET request.

redirect_to posts_url, status: :see_other # 303
redirect_to action: 'index', status: 303

see redirect_to

FYI, when using a simplified syntax Rails forces a POST method with a hidden _method parameter

- <%= form_for @post, method: :put, url: {action: "update"}  do |f| %>
+ <%= form_for @post do |f| %>

This creates a POST form with a _method param

<form class="edit_post" id="edit_post_1" action="/post/1" accept-charset="UTF-8" method="post">
  <input type="hidden" name="_method" value="patch">
  <input type="hidden" name="authenticity_token" value=".....">
</form>