Rails 5：使用jQuery提交表单

Question

如果任何元素发生更改，我正在尝试使用jQuery提交表单。 目前，我不使用remote: true 。

以下是呈现部分内容的代码：

views/assets/index.html.erb
<%= render @assets %>

部分代码：

views/assets/_asset.html.erb
<%= form_for [asset.project, asset] do |f| %>
  ...
<% end %>

以下是表单提交的JavaScript代码：

$(document).on('turbolinks:load', function() {
  if (!($(".assets.index").length > 0)) return;

  $('.edit_asset').change(function() {
    alert("submitting..");
    $(this).submit();
  });
});

它正在alert但未提交表单，请提出建议。

Answer 1

实际上，问题是$（this）vs this 。 所以应该

this.submit(); # or
$(this)[0].submit();

但是客户端required: true对表单元素（如required: true验证，因为它已绑定到表单的提交按钮。 因此，我们必须触发该事件，这是我的操作方式：

views/assets/_asset.html.erb
<%= form_for [asset.project, asset] do |f| %>
  ...
  <%= f.submit "Update", style: "display: none;" %>
  ...
<% end %>

JavaScript代码为：

$(document).on('turbolinks:load', function() {
  if (!($(".assets.index").length > 0)) return;

  jQuery.fn.submitOnChange = function() {
    $(this).change(function() {
      $(this).find("input[type=submit]").click();
    })
    return this;
  }
  $('.edit_asset').submitOnChange();
});

如果要远程执行此操作，则必须在form_for上添加remote: true和authenticity_token: true ，因此它将是：

<%= form_for([asset.project, asset], authenticity_token: true, remote: true) do |f| %>

Answer 2

您的问题是.change的.edit_asset中的$(this)定位到该元素并尝试提交。 您需要找到表单对象并提交：

$(document).on('turbolinks:load', function() {
  if (!($(".assets.index").length > 0)) return;

  $('.edit_asset').change(function() {
    alert("submitting..");
    $(this).parents('form').submit();
  });
});

这也可能给您的安装带来压力，建议您在更改后稍稍超时，然后再提交，而不要经常用提交请求来破坏您的rails安装。