El formulario se envía cuando hago clic en el botón del formulario. ¿Cómo evitar esto?

Question

Uso twitter-boostrap y me gustaría usar these radio-buttons en mi formulario. 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 radio.

de:

<%= 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(); 

Answer 1

De la multa HTML5 specification:

Un botón elemento sin tipo atributo especificado representa lo mismo que un botón elem ent con su atributo de tipo establecido en "enviar".

Y un <button type="submit"> envía el formulario en lugar de comportarse como un simple <button type="button"> push-button.

El HTML4 spec dice lo mismo:

type = submit 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 botón.

Así que sus elementos: <button>

<button class="btn">Button_1</button> 
<button class="btn">Button_2</button> 

son los mismos que éstos (en los navegadores compatibles):

<button type="submit" class="btn">Button_1</button> 
<button type="submit" class="btn">Button_2</button> 

y cualquier vez que se pulsa uno de los botones que envíe su formulario

La solución es utilizar los botones de civil:

<button type="button" class="btn">Button_1</button> 
<button type="button" class="btn">Button_2</button> 

Algunas versiones de IE por defecto a type="button" pesar de lo que dice la norma. Siempre debe especificar el atributo type cuando usa un <button> solo para asegurarse de que obtendrá el comportamiento que está esperando.

Answer 2

Puede utilizar preventDefault() para este

$('.btn').onClick(function(e){ 
    e.preventDefault(); 
}); 

o puede actualizar su html con el siguiente código (sólo añadir type="button") en la etiqueta de 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 %>