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

如果表单为this.form.submit()并且remote: true正在使用中，

rails-ujs将无效。在这种情况下，将定期提交而不是XHR。

相反，你应该：

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

您可以阅读here了解详情。

Answer 3

这是我能够做到的。我使用：name =＆gt;命名表单switch_car。 “switch_car”并使用以下javascript。

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

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

Answer 4

取决于您使用的js库：

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

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

如果您使用默认值并且您的rails版本低于3.1，那么prototype是默认库。

Answer 5

这是一个古老的问题，但以上答案均不适用于我。它们都导致text / html请求。

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

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

与：

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

Answer 6

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

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

Answer 7

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

我遇到了这个article，它很好地描述了通过submit()方法（有或没有jQuery或Handler）触发ajax请求时的问题。然后，作者建议您创建自己的AJAX请求。这不是必需的，也不应该使用rails.js（jquery-jus gem）中的逻辑。

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

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

在元素或表单上。

Answer 8

对于select_tag，只需添加：

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

您的处理程序将在哪里：

this.form.submit();

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

最后，请确保不要选择带有表单选择的select_tag。

请参阅我对类似问题的回答，仅针对表格选择

Adding An Onchange Event To A Form Select

Answer 9

如果您想学习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，网址：your_ajax_route_path}

将自动将您的输入提交到your_ajax_route_path。如果您使用的是表单生成器，则应与input_html

一起使用

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

像这样。希望对您有用

Answer 10

没有一个解决方案对我有用，所以我使用了下面给出的解决方案。

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

Answer 11

我在jquery_ujs上使用rails 4.2.1，它对我有用：

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

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

Rails尝试在下拉列表中提交表单

11 个答案: