时间戳

首页 > 解决方案 > remote:true - 提交按钮有效，但 this.form.submit 无效

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

问题描述

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

什么有效： - 当我点击提交按钮时，一切都很好，我收到一个警报框（这是我放在我的 .js.erb 文件中的内容）

什么不起作用： - 我有很多字段的搜索表单，我想在任何字段更改时提交表单。没有 ajax 它可以正常工作，代码“onchange="this.form.submit();"工作正常。但是当我使用 Ajax 时，this.form.submit() 仍在重新加载页面。

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

我尝试过的 - 我使用了许多 jquery 变体 fe：

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

我的代码：

显示.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 %>

car_controller.html.erb

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

汽车/show.js.erb

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

标签： ruby-on-rails-6

解决方案

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

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

推荐阅读