Rails: кнопка отправки вне form_tag

Я использую кнопку для выполнения обработки в группе выбранных флажков. Решение основано на 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

Ответ 1

Вы можете создать кнопку вне формы и использовать 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 кнопки.

Ответ 2

Пока этот вопрос устарел, я думаю, что стоит отметить лучший вариант, который не зависит от JavaScript.

HTML5 представил form как атрибут, который может быть применен к любому элементу управления и привяжет его к определенной форме на основе его идентификатора - даже если элемент управления не вложен внутри тега формы.

Пример:

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

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

Эта кнопка отправки отправит форму с идентификатором, указанным в его атрибуте формы.

Кроме того, это не ограничивается кнопками отправки, но вместо этого работает для любого элемента управления формой и позволяет вам отправлять частичные части формы, которые расположены повсюду.

В отличие от большинства решений для JavaScript, вы будете хранить все собственные функции формы, такие как отправка на ввод/возврат.

Ответ 3

С помощью кода coffescript вы можете поместить внешнюю форму отправки, просто добавив в ссылку класс '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()