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

Answer 1

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

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

示例：

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

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

此提交按钮将提交表单，其中包含在表单属性中指定的ID。

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

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

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

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

Answer 3

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

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

Rails：在form_tag外提交按钮

3 个答案:

HTML：

CofeeScript：