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的方式：

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

Answer 2

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

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

（不能告诉你花了多长时间才弄明白......）出于某种原因，常规事件没有正确地冒充到使用rails'new的委托事件处理程序attached by rails delegate function，当它们被jQuery触发时。

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

如何从控制器传递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 5

你可以使用.submit（）;

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

Answer 6

@mltsy回答对我来说非常适合。但是，想重申这需要使用rails-ujs。如果您从像我这样的旧版本升级，您可能仍在使用依赖于jquery的jquery_ujs。如果您在控制台中获得ReferenceError: Can't find variable: Rails，请检查您的application.js并确保您拥有rails-ujs或@ mltsy的优秀答案不会起作用。我想留下评论而不是回答，但是Stack不会让我。

Answer 7

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

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

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

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

Answer 8

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

您可以在 html 元素上使用 requestSubmit，而不是提交，它将按照您期望的方式工作，因为 requestSubmit 甚至会引发 submit，并且 { {1}} 没有。

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

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

submit

Answer 9

我正在更新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()

使用javascript提交rails远程表单

9 个答案: