El formulario se envía cuando hago clic en el botón del formulario. ¿Cómo evitar esto?
Frecuentes
Visto 35,914 veces
66
Uso twitter-boostrap y me gustaría usar estos botones de radio en mi forma El problema es que cuando hago clic en cualquiera de estos botones, el formulario se envía inmediatamente. ¿Cómo evitar esto? Solo quiero usar botones predeterminados como botones de opción.
desde:
<%= form_for @product do |f| %>
<div class="control-group">
<%= f.label :type, :class => 'control-label' %>
<div class="controls">
<div class="btn-group" data-toggle="buttons-radio">
<button class="btn">Button_1</button>
<button class="btn">Button_2</button>
</div>
</div>
</div>
<div class="form-actions">
<%= f.submit nil, :class => 'btn btn-primary' %>
<%= link_to 'Cancel', products_path, :class => 'btn' %>
</div>
<% end %>
JavaScript:
// application.js
$('.tabs').button();
3 Respuestas
168
De la multa Especificación HTML5:
A . elemento sin tipo El atributo especificado representa lo mismo que un elemento de botón con su atributo de tipo establecido en "entregar".
Y un <button type="submit">
envía el formulario en lugar de comportarse como un simple <button type="button">
presionar el botón.
EL Especificación HTML4 dice lo mismo:
tipo = enviar|botón|restablecer [CI]
Este atributo declara el tipo del botón. Valores posibles:
submit
: Crea un botón de envío. Este es el valor predeterminado.reset
: crea un botón de reinicio.button
: Crea un pulsador.
Entonces tus <button>
elementos:
<button class="btn">Button_1</button>
<button class="btn">Button_2</button>
son los mismos que estos (en navegadores compatibles):
<button type="submit" class="btn">Button_1</button>
<button type="submit" class="btn">Button_2</button>
y cada vez que presione uno de esos botones, enviará su formulario.
La solución es usar botones simples:
<button type="button" class="btn">Button_1</button>
<button type="button" class="btn">Button_2</button>
Algunas versiones de IE tienen por defecto type="button"
a pesar de lo que dice la norma. Siempre debe especificar el type
atributo cuando se utiliza un <button>
solo para estar seguro de que obtendrá el comportamiento que espera.
Respondido 13 Feb 19, 18:02
Guau. Impresionante captura. Este me atrapó. - SENCILLO
Bien, estaba teniendo muchos problemas para evitar que cada botón en mis formularios ROR se enviara a la acción de creación. Muchas gracias por aclarar esto. - Aaron
Vaya, tanto tiempo perdido :( - netero
@Abdul El tiempo no fue en vano si te enseñó a incluir siempre el type
atributo en tu <button>
s. - mu es demasiado corto
@muistooshort, tiene razón en eso, además de obtener conocimiento sobre las muchas otras cosas que vi mientras buscaba cosas: netero
0
Puedes usar preventDefault()
para esto
$('.btn').onClick(function(e){
e.preventDefault();
});
o puede actualizar su html con el siguiente código (solo agregue
type="button"
) en la etiqueta del botón
<%= form_for @product do |f| %>
<div class="control-group">
<%= f.label :type, :class => 'control-label' %>
<div class="controls">
<div class="btn-group" data-toggle="buttons-radio">
<button class="btn" type="button">Button_1</button>
<button class="btn" type="button">Button_2</button>
</div>
</div>
</div>
<div class="form-actions">
<%= f.submit nil, :class => 'btn btn-primary' %>
<%= link_to 'Cancel', products_path, :class => 'btn' %>
</div>
<% end %>
contestado el 08 de mayo de 17 a las 13:05
0
Puede hacer esto directamente usando el asistente de formulario de rieles también especificando type
como una opción para "botón":
<%= form_for @product do |f| %>
<div class="control-group">
<%= f.label :type, :class => 'control-label' %>
<div class="controls">
<div class="btn-group" data-toggle="buttons-radio">
<%= f.button "Button_1", type: "button", class: "btn" %>
<%= f.button "Button_2", type: "button", class: "btn" %>
</div>
</div>
</div>
<div class="form-actions">
<%= f.submit nil, :class => 'btn btn-primary' %>
<%= link_to 'Cancel', products_path, :class => 'btn' %>
</div>
<% end %>
Respondido el 04 de Septiembre de 19 a las 10:09
No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas html ruby-on-rails twitter-bootstrap or haz tu propia pregunta.
Un poco tarde, pero lo que me ayudó fue Método preventDefault() del objeto de evento. algo como
$('.btn').onClick(function(evt){evt.preventDefault();});
- Samveen