Rails Trying to submit a form onchange of dropdown

user_873487 0
Viewed 34474

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.

ruby-on-rails-3 submit forms
12 Answers

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' %>
user_54859030

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

user_154615400

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

user_88889560

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();
    });

user_6441490

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.

user_26469690
Related