Rails 尝试在下拉列表更改时提交表单

Question

我的 Ajax 工作正常，内置 Rails javascript，带有提交按钮。但是，我希望它在更改下拉框的值并消除按钮时提交。在我的研究中，我找到了看起来正确的解决方案，但我没有收到对服务器的请求。这是我的下拉表单代码，请注意，它仍然具有在我添加之前起作用的提交按钮：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 %>

这是生成的 HTML：

<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> 

提前感谢您的帮助。

Answer 1

用这个替换你的 onchange ，

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

Answer 2

如果表单为 remote: true 且正在使用 rails-ujs，则 this.form.submit() 将不起作用。在这种情况下，将进行常规提交而不是 XHR。

相反，您应该：

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

您可以阅读此处了解更多详细信息。

Answer 3

这就是我能够做的让它发挥作用。我使用 :name => 将表单命名为 switch_car “switch_car”并使用了以下 JavaScript。

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

我仍在寻找更好的答案，因此如果我找到什么我会更新。由于某种原因，这不使用submit .js。与使用 AJAX 仅更新更改的页面元素的提交按钮不同，它将其作为 HTML 进行处理。但这是迄今为止我能找到的最好的。

Answer 4

这是一个老问题，但以上答案都不适合我。它们都会产生一个 text/html 请求。

以下作品，例如（隐藏类设置CSS显示：无）：

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

与：

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

Answer 5

根据您使用的 js 库：

原型： :onchange => ("$('switch_car').submit()")

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

如果您使用默认值并且您的 Rails 版本低于 3.1，则原型是默认库。

Answer 6

使用 jQuery 的更通用的解决方案（我不需要知道表单的名称）是：

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

Answer 7

这似乎已经存在了一段时间，但是，无论如何我都会发布我的发现，因为我还没有在任何地方找到这个解释。

我发现了这篇文章 很好地描述了通过 submit() 方法（带或不带 jQuery 或 Handler）触发 ajax 请求时出现的问题。然后作者建议形成您自己的 AJAX 请求。这不是必需的，也不应该这样做来利用 rails.js（jquery-jus gem）。

由于rails.js 绑定并侦听命名空间为submit.rails 的事件，因此手动触发submit() 会出现问题。要手动触发提交，请

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

在元素或表单上使用。

Answer 8

对于 select_tag，只需添加：

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

您的处理程序将在哪里：

this.form.submit();

另外，如果 onchange 不起作用，您可能需要尝试使用大写 C 的 onChage。

最后，请确保不要将 select_tag 与表单选择混淆。

请参阅我对类似问题的回答，仅涉及表单选择

向表单选择添加 Onchange 事件

Answer 9

时间在2021年，用Rails 6

进行隐藏提交然后使用js click()函数：

<%= 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>

参考：https: //stackoverflow.com/a/8690633/15461540

Answer 10

如果你想学习 Rails 方式的 ajax 提交字段更改，这里是代码。

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

数据：{远程：true，url：your_ajax_route_path}

会自动将您的输入提交到 your_ajax_route_path。 使用 input_html

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

如果您使用的是表单生成器，那么您应该像这样 。我希望它对你有用

Answer 11

这些解决方案都不适合我，所以我使用了下面给出的解决方案。

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

Answer 12

我正在使用带有 jquery_ujs 的 Rails 4.2.1，它对我有用：

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

OBS .：它假定该元素是表单的直接子元素。您必须根据您的 DOM 树调整 parent()。