Cómo anular (desactivar) el comportamiento de "enviar" de una etiqueta de botón dentro de una etiqueta de formulario?

Question

<form action=""> 
    <button>click</button> 
</form>` 

El comportamiento predeterminado de un botón dentro de un formulario es enviar ese formulario.

¿Cómo puedo desactivar el comportamiento de envío de ese botón?

Answer 1

Añadir un type="button" a ella:

<button type="button">Click</button> 

---

Los tipos availabe son:

• "enviar": El valor por defecto. Envía el formulario.
• "restablecer": Restablece las entradas del formulario.
• "botón": No hace nada.

Una buena referencia: https://developer.mozilla.org/en/DOM/HTMLButtonElement

Answer 2

Esto desactivará a través de JavaScript

<button onclick='return false'>click</button> 

Pero sólo se puede definir el tipo

<button type='button'>click</button> 

Answer 3

Hay ocasiones en las que desea mantener el detalles de un botón submit (por ejemplo, en un dispositivo móvil, dondeEl botónse puede activar desde el teclado, pero solo si el botón es parte del formulario y del tipo submit). En este caso, lo que debe hacer es evitar la acción predeterminada del botón.

Usando jQuery 1.7+ (usando .on - recomiendo encarecidamente la lectura de la documentación - hay muchos matices en el uso de .on que pueden afectar notablemente el rendimiento)

$(document).on("click", "button", "event", function(evt) { 
    evt.preventDefault(); 
    ... 
} 

El uso de versiones anteriores de jQuery ...

$("#button-id").bind("click", function(evt, ui) { 
    evt.preventDefault(); 
    ... 
} 

Tenga en cuenta que se puede utilizar cualquier selector (seleccione por clase, tipo de elemento, etc.) o un método de unirse al evento (en lugar de .bind, utilice .live, .delegate como ap apropiado para su versión de jquery.