remote:true-提交按钮有效，但this.form.submit无效

Question

我有form_with-form，我想通过Ajax remote:true请求发送数据。

工作原理：-当我点击提交按钮时，一切都很好，我收到一个警报框(这是我放在.js.erb文件中的(

什么不起作用：-我有一个包含许多字段的搜索表单，我想在任何字段更改时提交表单。如果没有ajax，它可以正常工作，代码"onchange="this.form.submit((；">运行完美。但是当我使用Ajax时，这个.form.submit((仍然在重新加载页面。

预期结果：-当我更改任何字段时，它将在不重新加载页面的情况下发送数据。如果可能的话，我希望避免使用常规Ajax，并使用remote:true form_with方法。

我尝试过的-我使用了许多jquery变体，例如：

this.form.submit();
$('#id_of_submit_button').click(); // it works but i want to make it without using submit button
$(this).closest("form").submit();

我的代码：

show.html.erb

<%= form_with(url: "/cars/" + @car.id.to_s + "#formcarsection", id: "filterform", remote: true, method: "get") do |f| %>
<%= f.text_field :vin, onchange: "this.form.submit();", class: "form-control" %>
<input type="submit" id="submitbtn" value="Count" class="car__submit-btn">
<%= end %>

cars_controller.html.erb

def show
respond_to do |format|
format.html
format.js { render 'cars/show.js.erb' }
end
end

cars/show.js.erb

alert("Hello! I am an alert box!!");

Answer 1

remote: true需要添加到每个字段中。

<%= f.text_field :vin, data: { url: "/cars/" + @car.id.to_s + "#formcarsection", remote: true, class: "form-control" } %>