使用 JavaScript 提交 Rails 远程表单

你可以只使用 .submit（）;

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

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

不完全是你要找的，但希望这能有所帮助。

这很简单，就是用 Rails 的方式：

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

在 Rails 5.1+ 中，它用非 jquery 替换了旧的，上面的答案不再起作用，总是通过HTML HTTP请求提交表单。以下是触发新 rails submit 事件处理程序的方式：jquery-ujsrails-ujs

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

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

@mltsy答案对我来说是完美的。但是，我想重申一下，这需要使用 rails-ujs。如果您像我一样从旧版本升级，您可能仍在使用 jquery 依赖jquery_ujs。如果你要进入你的控制台，请检查你的应用程序.js并确保你有rails-ujs，否则@mltsy的好答案将不起作用。我想发表评论而不是回答，但 Stack 不让我。ReferenceError: Can't find variable: Rails

如何使用并简单地执行以下操作：rails_ujs

Rails.fire(form, 'submit');

（其中是 DOM 元素）form

这感觉像是一种正确的 Rails 方式。

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

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

您还需要在控制器中包含格式.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()

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

我有一个包含一个表单的表单，我希望该表单在用户添加文件后立即自动提交。我试过了，但这样表格就以 HTML 形式提交。remote: truefile_fieldonchange: form.submit();

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

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

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

您可以在 html 元素上使用，而不是提交，它将按照您期望的方式工作，因为会引发偶数，并且不会。requestSubmitrequestSubmitsubmitsubmit

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

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

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