ruby-on-rails - number - rails text_field_tag type

Rieles: botón Enviar fuera de form_tag

Question

Estoy usando un botón para realizar el procesamiento en un grupo de casillas de verificación seleccionadas. La solución se basa en RailsCast # 165.

Todo funciona bien, pero solo si el botón submit_tag está dentro del formulario (que es una tabla en mi aplicación). Me gustaría colocar el botón de enviar en el encabezado de la página, pero esto rompe la conexión al formulario.

¿Cómo puedo colocar un botón de envío fuera del cuerpo del formulario?

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

Con este código de coffescript puedes poner el formulario de envío externo simplemente agregando una clase ''outside-submit'' al enlace.

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

Answer 2

Puede crear un botón fuera del formulario y usar javascript para enviar el formulario cuando se hace clic en el botón:

HTML:

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

Javascript (usando jQuery):

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

También puede agregar el javascript directamente en el atributo onClick del botón.

Answer 3

Si bien esta pregunta es antigua, creo que podría valer la pena señalar una mejor opción que no dependa de JavaScript.

HTML5 introdujo el form como un atributo que se puede aplicar a cualquier control de formulario y lo vinculará a un formulario específico basado en su id, incluso si el control no está anidado dentro de la etiqueta del formulario.

Ejemplo:

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

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

Este botón de envío enviará el formulario con la identificación especificada en su atributo de formulario.

Además, esto no se limita a enviar botones, sino que funciona para cualquier control de formulario y le permite enviar parciales de formulario que están ubicados en cualquier lugar.

A diferencia de la mayoría de las soluciones de JavaScript, mantendrá todas las características del formulario nativo, como la presentación al ingresar / regresar.