Rails：在form_tag外提交按钮

I'm using a button to perform processing in a group of selected check-boxes. The solution is based on RailsCast #165.

我正在使用一个按钮在一组选定的复选框中执行处理。该解决方案基于RailsCast＃165。

It's all working fine, but only if the submit_tag button is contained within the form (which is a table in my application). I'd like to place the submit button in the page header, but this breaks the connection to the form.

这一切都正常，但只有在表单中包含submit_tag按钮（我的应用程序中是一个表）。我想将提交按钮放在页眉中，但这会破坏与表单的连接。

How can I place a submit button outside the body of the form?

如何在表单正文外放置提交按钮？

<%= form_tag select_cosmics_path, method: :put do %>
  <%= submit_tag "Accept Checked", :class => "btn btn-primary" %> 

  <table class="table table-striped"> 
   .
   .
  <% @cosmics.each do |cosmic| %>
    <tr>
      <td><%= check_box_tag "cosmic_ids[]", cosmic.id %></td>
       .
       .
    </tr>
  <% end %>
  </table>
<% end %>

routes.rb

的routes.rb

resources :cosmics do
  collection do
    put :select
  end
end

3 个解决方案

#1

You can create a button outside the form, and use javascript to submit the form when the button is clicked:

您可以在表单外部创建一个按钮，并在单击按钮时使用javascript提交表单：

HTML:

HTML：

<button id="myBtn" class="btn btn-primary">Accept Checked</button>
...
<%= form_tag select_cosmics_path, method: :put, id: 'myForm' do %>
  ...
<% end %>

Javascript (using jQuery):

Javascript（使用jQuery）：

$(document).ready(function() {
  $('#myBtn').on('click', function() { $('#myForm').submit(); });
});

You can also add the javascript directly in the onClick attribute of the button.

您还可以直接在按钮的onClick属性中添加javascript。

#2

While this question is old, I think it might be worth pointing out a better option that doesn't rely on JavaScript.

虽然这个问题很老，但我认为值得指出一个不依赖JavaScript的更好选择。

HTML5 introduced form as an attribute that can be applied to any form control and will bind it to a specific form based on its id - even if the control isn't nested inside the form tag.

HTML5引入了一个可以应用于任何表单控件的属性，并根据其id将其绑定到特定表单 - 即使控件没有嵌套在表单标记内。

Example:

例：

<form id="my_sample_form">
...
</form>

<input type="submit" value="Submit" form="my_sample_form">

This submit button will submit the form with the id specified in its form attribute.

此提交按钮将提交具有其表单属性中指定的ID的表单。

Furthermore this isn't limited to submit buttons, but instead works for any form control and allows you to submit form partials that are positioned all over the place.

此外，这不仅限于提交按钮，而是适用于任何表单控件，并允许您提交位于所有位置的表单部分。

In contrast to most JavaScript solutions, you will keep all native form features like submitting on enter/return.

与大多数JavaScript解决方案相比，您将保留所有本机表单功能，例如在输入/返回时提交。

#3

With this coffescript code you can put the submit outside form just adding a 'outside-submit' class to the link.

使用此coffescript代码，您可以将提交外部表单添加到链接中的“外部提交”类。

HTML:

<a class="outside-form" data-formid="my-form">link to submit</a>

<form id="my-form">
  ...
</form>

CofeeScript:

jQuery ->
  $buttons = $(".outside-submit")

  for button in $buttons
    $button = $(button)
    $form = $("##{$button.data().formid}")
    $button.on 'click', -> $form.submit()