使用 JavaScript 提交 Rails 远程表单

Question

在我的 Rails 应用程序中，我有一个远程表单，看起来像这样：

<%= form_tag some_path, :method => :get, :id => 'my-form', :remote => true do %>
  <%= text_field_tag :search, params[:search], :id => 'search-field' %>
  <%= submit_tag 'Go' %>
<% end %>

现在我想通过 javascript 提交此表单并触发所有 Rails 远程表单回调。到目前为止，我已经尝试了一些方法，但似乎没有任何效果。

我尝试过的事情：

$('#my-form').trigger('onsubmit')

$.rails.callFormSubmitBindings( $('#search-form') )

但到目前为止还没有运气。有什么想法吗？

Answer 1

在 Rails 5.1+ 中，用非 jquery rails-ujs 替换了旧的 jquery-ujs ，上述答案不再有效，始终通过 HTML HTTP 提交表单要求。这就是触发新的 Rails 提交事件处理程序的方式：（

var elem = document.getElementById('myform') // or $('#myform')[0] with jQuery
Rails.fire(elem, 'submit');

无法告诉你我花了多长时间才弄清楚这个问题...）出于某种原因，常规事件不会正确地冒泡到委托的事件处理程序附加Rails 使用rails的新委托函数，当它们由 jQuery 触发时。

Answer 2

这只是 Rails 的方式：

 $("#myform").trigger('submit.rails');

Answer 3

使用 rails_ujs 并简单地执行以下操作怎么样：（

Rails.fire(form, 'submit');

其中 form 是一个 DOM 元素）

这感觉像是正确的 Rails 方法。

您可以在此处查看源代码 - https://github.com/rails/rails/blob/master/actionview/app/assets/javascripts/rails-ujs/utils/event.coffee#L34

Answer 4

如果您无法通过 javascript 访问 Rails，并且您不想尝试进行设置，那么有一个更简单的解决方案！

您可以在 html 元素上使用 requestSubmit 而不是 Submit，它会按照您期望的方式工作，因为 requestSubmit 会引发 submit 甚至，而 submit 则不然。

在这里查看提交和请求提交之间的区别：
https://developer.mozilla.org/en-US/docs /Web/API/HTMLFormElement/submit

在上面的情况下，您可以使用：

$('#my-form')[0].requestSubmit()

Answer 5

从控制器传递 json 并通过 js 捕获它怎么样？

现在，控制器的操作为

respond_to do |format|
      if some condition
        format.json { render :json => {:success => true} }
        format.html{ redirect_to some_path, :notice => "successfully created" }
      else
        ...
      end
end

并在 js 中捕获 json 为

$('#my-form').bind 'ajax:success', (event,data) ->
  if(data.success == true)
    ...

不完全是您正在寻找的内容，但希望这对您有所帮助。

Answer 6

我正在更新 Rails 6 的答案。

如果您在 Rails 6 中遇到此问题，很可能您忘记将参数“format: :js”添加到表单生成器。

<%= form_tag some_path, :method => :get, :id => 'my-form', :remote => true,
         :format => :js do %>
  <%= text_field_tag :search, params[:search], :id => 'search-field' %>
  <%= submit_tag 'Go' %>
<% end %>

您还需要在控制器中包含 format.js。

def update
    respond_to do |format|
      if @model.update(user_params)
        format.html { redirect_to @model, notice: 'Model was successfully updated.' }
        format.json { render :show, status: :ok, location: @model }
        format.js {
          logger.debug "this will run in the update was ok."
        }
      else
        format.html { render :edit }
        format.json { render json: @model.errors, status: :unprocessable_entity }
        format.js {
          logger.debug "this will run in the update was not ok."
        }
      end
    end
  end

现在，您可以通过 JavaScript 定期调用此表单的提交。

this.form.submit()

Answer 7

我知道这是一个老话题，但我已经为此苦苦挣扎了一段时间，终于找到了解决方案。

我有一个带有 remote: true 的表单，其中包含 file_field，我希望表单在用户添加文件后立即自动提交。我尝试了 onchange: form.submit(); 但这样表单是以 HTML 形式提交的。

我的解决方案：使用 JS 单击（隐藏）表单提交按钮：

onchange: $("#submit-button").click();

Answer 8

@mltsy 答案非常适合我。不过，想重申一下，这需要使用rails-ujs。如果你像我一样从旧版本升级，你可能仍在使用jquery依赖的jquery_ujs。如果您在控制台中收到 ReferenceError: Can't find variable: Rails ，请检查您的 application.js 并确保您有rails-ujs，否则 @mltsy 的精彩答案将不起作用。我想留下评论而不是答案，但 Stack 不允许我这样做。

Answer 9

你可以只使用 .submit();

$("#my-form").submit();