Rails：form_tag之外的提交按钮

Question

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

目前一切正常，但是只有在submit_tag按钮包含在表单内（在我的应用程序中是一个表格）时才有效。我想把提交按钮放在页面标题中，但这会断开与表单的连接。

我该如何将提交按钮放在表单体之外？

<%= 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

resources :cosmics do
  collection do
    put :select
  end
end

- port5432

---

真的吗？我能用什么方法链接到表单外的另一个按钮或链接吗？ - port5432

不知道这是否是最佳解决方案，但您是否尝试使用按钮的绝对定位？ - Heartcroft

我还没有这样做过...我会尝试一下。 - port5432

Answer 1

尽管这个问题很老，但我认为指出一种不依赖JavaScript的更好选择可能是值得的。

HTML5引入了form属性，可以应用于任何表单控件，并将其绑定到特定的表单，基于其id - 即使该控件不嵌套在表单标签内。

例如：

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

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

这个提交按钮将提交ID在其form属性中指定的表单。

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

与大多数JavaScript解决方案不同的是，您将保留所有本机表单功能，如按enter/return键提交。

- Michael Feihstel

---

提交表单时按下回车键的功能是我不想使用JS解决方案的原因。此外，这种方法更加简洁。谢谢！ - Kobus Post

这是非常优雅的。 - zx1986

请记住，这个解决方案在任何版本的IE中都不受支持。 - Omegalen

Answer 2

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

HTML：

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

Javascript（使用jQuery）：

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

您也可以直接将JavaScript添加到按钮的onClick属性中。

- Baldrick

---

太棒了，巴尔德里克！你是个传奇！附言：我认为布莱克爵士有时可能有点不公平;-) - port5432

Answer 3

使用这个CoffeeScript代码，您可以将提交按钮放在表单外面，只需将“outside-submit”类添加到链接中即可。

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()

- Germano