Rails remote form collection_select onchange error

Question

I'm trying to have a remote form automatically submit when a select option is changed. Everything works when I remove remote: true from the form tag, except I don't want the page to reload each time.

I am using Rails 5.1.4.

Code

<%= form_for @foo, remote: true do |f| %>

    ... fields

    <%= f.collection_select :bar_id, @list, :id, :name,
       {include_blank: '-'}, { onchange: 'this.form.submit();'} %>

<% end %>

Controller

def update
  respond_to do |format|
    if @foo.update(foo_params)
      format.html { redirect_to @foo }
      format.json { render :show, status: :ok, location: @foo }
    else
      format.html { render :edit }
      format.json { render json: @foo.errors, status: :unprocessable_entity }
    end
  end
end

I'm getting the following error when the selection is updated in the view:

ActionController::InvalidAuthenticityToken

I'm assuming the this.form.submit(); is the problem. How can I get this form to submit successfully?

Answer 1

Try to the following simple way adding authenticity_token: true to your form tag like below

<%= form_for @foo, remote: true, authenticity_token: true do |f| %>

It should work, at least working for me.

Updated After Comment

You need to work with partial if you use remote: true like if your form in new.html.erb then cut out form part and create a partial for the form like _form.html.erb then render this into new.html.erb like

new.html.erb

<div id="my-form">
   <%= render partial: "form" %>
</div>

and the create a js.erb file based your main file like new.js.erb and put this line like

$("#my-form").html("<%= escape_javascript(render("form")) %>");

On your controller add format.js like below

format.html { redirect_to @foo } 
format.js 
format.json { render :show, status: :ok, location: @foo }

For complete jQuery/AJAX reference with RoR-5 you can read this tutorial it will help to brush up your jQuery/AJAX skill

Hope that will work

Answer 2

add this line to your form.

<%= tag(:input, :type => "hidden", :name => request_forgery_protection_token.to_s, :value => form_authenticity_token) %>

and your form should be like this:

   <%= form_for @foo, remote: true do |f| %>
        <%= tag(:input, :type => "hidden", :name => request_forgery_protection_token.to_s, :value => form_authenticity_token) %>
        ... fields

        <%= f.collection_select :bar_id, @list, :id, :name,
           {include_blank: '-'}, { onchange: 'this.form.submit();'} %>

    <% end %>

Answer 3

The authenticity token is a random value generated in your view to prove a request is submitted from a form on your site, not somewhere else. This protects against CSRF attacks

You can avoid above error by two ways

1) Add following code in application controller

skip_before_filter :verify_authenticity_token  

Reference Link: http://api.rubyonrails.org/classes/ActionController/RequestForgeryProtection/ClassMethods.html

2) Add authenticity_token in the form

<%= hidden_field_tag :authenticity_token, form_authenticity_token %>

OR <%= csrf_meta_tags %>