Rails Trying to submit a form onchange of dropdown

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 rese开发者_如何学Pythonarch 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.

---

Replace your onchange with this,

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

---

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.

---

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.

---

Depending on the js library you are using:

Prototype: :onchange => ("$('switch_car').submit()")

Jquery: :onchange => ("$('#switch_car').submit()")

If you are using the defaults and your rails version is below 3.1, then prototype is the default library.

---

This is an old question, but none of the above answers work for me. They all result in a text/html request.

The following works, e.g. (the hide class sets css display: none):

<%= form.radio_button :tier_id, tier.id, onchange: "$('#submit-button-id').click();" %>

together with:

<%= form.submit "Save changes", id: 'submit-button-id', class: 'hide' %>

---

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

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

---

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.

---

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

---

Time at 2021, with Rails 6

make a hidden submit then use js click() function:

<%= form_with(modle: @user, local: false) do |f| %>
    <%= f.select :menu1, ["option1","option2"], {}, onchange: "javascript:this.form.commit.click();" %>
    <%= f.submit 'save', class: "hidden" %>
<% end>

reference: https://stackoverflow.com/a/8690633/15461540

---

If you want to learn rails way ajax submit on fields change here is the code.

<%= select_tag(:id, options_from_collection_for_select(active_cars, "id", "name"), 
data: { remote: true, url: your_ajax_route_path }%><%= submit_tag "Switch Car" %>

data: { remote: true, url: your_ajax_route_path }

will automatically submit your input to your_ajax_route_path. If you are using a form builder then you should use with input_html

input_html: { data: { remote: true, url: your_ajax_route_path } }

like this. I hope it'll be useful for you

---

None of the solutions was working for me so I used the given below solution.

$("#q_dimension_id_eq").on("change", function (e) {
        $(this).closest("form").submit();
    });

---

I'm using rails 4.2.1 with jquery_ujs and it works for me:

onchange: 'jQuery(this).parent().trigger("submit")'

OBS.: It assumes the element is immediately child from form. You must adjust parent() according your DOM tree.