Rails Trying to submit a form onchange of dropdown

Question

I have my Ajax working, builtin Rails javascript, with the submit button. However, I would like it to submit when I change the value of the dropdown box and eliminate the button. In my research I found what looks like the correct solution but I get no request to the server. Here is my dropdown form code, note it still has the submit button that worked before I added :onchange:

<% form_tag('switch_car', :method => :put, :remote => true) do %>
  <div class="field">
    <label>Car Name:</label>
    <%= select_tag(:id, options_from_collection_for_select(active_cars, "id", "name"), 
       :onchange => ("$('switch_car').submit()"))%><%= submit_tag "Switch Car" %>
  </div>    
<% end %>

Here is the HTML generated:

<form accept-charset="UTF-8" action="switch_car" data-remote="true" method="post">
  <div style="margin:0;padding:0;display:inline">
    <input name="utf8" type="hidden" value="&#x2713;" />
    <input name="_method" type="hidden" value="put" />
    <input name="authenticity_token" type="hidden" value="PEbdqAoiik37lcoP4+v+dakpYxdpMkSm7Ub8eZpdF9I=" />
  </div>
  <div class="field"> 
    <label>Car Name:</label> 
    <select id="id" name="id" onchange="$('switch_car').submit()">
      <option value="9">Truck</option>
      <option value="10">Car</option>
    </select>
    <input name="commit" type="submit" value="Switch Car" /> 
</div> 

Thanks in advance for any help.

Answer 1

Replace your onchange with this,

onchange: "this.form.submit();"

Answer 2

For a select_tag, just add:

{:onchange => "myHandler();" }

where your handler will be:

this.form.submit();

Also, if onchange doesn't work you might want to try onChage with a capital C.

Finally, make sure NOT TO CONFUSE a select_tag with a form select.

See my answer to a similar question, only regarding a form select

Adding An Onchange Event To A Form Select

Answer 3

A more general solution using jQuery (I don't need to know the name of the form) is:

onchange: "$(this).parent('form').submit();"

Answer 4

this.form.submit() will not work if form is remote: true and rails-ujs is in use. In that case, a regular submit will occur instead of XHR.

Instead you should:

onchange: 'Rails.fire(this.form, "submit")'

You can read here for more details.

Answer 5

This is what I was able to do to get it to work. I named the form switch_car by using :name => "switch_car" and used the following javascript.

:onchange => ("javascript: document.switch_car.submit();")

I am still looking for a better answer so I will updated if I find something. This doesn't use submit .js for some reason. It processes it as HTML unlike the submit button which uses AJAX to update only the changing page elements. But this is the best I have been able to find so far.

Answer 6

This seems to have been around for a while but, I'll post my findings anyway since I haven't found this explanation anywhere yet.

I came across this article which describes quite well what's the problem when triggering a ajax request via the submit() method (with or without jQuery or Handler). The author then recommends to form your own AJAX request. That is not required and shouldn't be done to make use of the logic within rails.js (jquery-jus gem).

Problems with triggering submit() manually occur since rails.js binds and listens to an event that is namespaced submit.rails. To manually trigger a submission use

   onchange: 'javascript: $( this ).trigger("submit.rails")'

on the element or the form.