Deshabilitar el envío automático del formulario al hacer clic en el botón

180

Tengo un formulario HTML donde uso varios botones. El problema es que no importa en qué botón haga clic, el formulario se enviará incluso si el botón no es del tipo "enviar". Por ejemplo, botones como: <button>Click to do something</button>dan como resultado el envío del formulario.

Es bastante doloroso hacer uno e.preventDefault()para cada uno de estos botones.

Uso jQuery y jQuery UI y el sitio web está en HTML5.

¿Hay alguna manera de deshabilitar este comportamiento automático?

París
fuente

Respuestas:

460

Los botones como <button>Click to do something</button> son botones de enviar.

Establecido type="button"para cambiar eso. type="submit"es el valor predeterminado (según lo especificado por la recomendación HTML ).

Quentin
fuente
24
Perdí un día de sueño reparando mi código en vano porque no conocía esta simple especificación.
palerdot
44
Haciéndose eco de la noción de palerdot, me alegro de haber encontrado esta nota después de una búsqueda rápida en Google y no maté horas. Muy bien, muchas gracias.
brooklynsweb
2
@NiketJoshi: esa afirmación no parece tener nada que ver con la pregunta que responde. Si tiene una nueva pregunta, haga una, pero asegúrese de proporcionar una declaración clara del problema y un ejemplo mínimo reproducible .
Quentin
19

Podrías intentar usar return false (return false anula el comportamiento predeterminado en cada elemento DOM) así:

myform.onsubmit = function ()
{ 
  // do what you want
  return false
}

y luego envíe su formulario usando myform.submit ()

o alternativamente :

mybutton.onclick = function () 
{
   // do what you want
   return false
}

Además, si utiliza type="button"su formulario no será enviado.

Boris D. Teoharov
fuente
8

<button>De hecho, son botones de envío, no tienen otra funcionalidad principal. Deberá establecer el tipo en el botón.
¡Pero si vincula su controlador de eventos como se muestra a continuación, apunta a todos los botones y no tiene que hacerlo manualmente para cada botón!

$('form button').on("click",function(e){
    e.preventDefault();
});
diseños mas
fuente
Es e.preventDefault();.
hlcs
0

si desea agregar directamente a la entrada como atributo, use esto

 onclick="return false;" 

<input id = "btnPlay" type="button" onclick="return false;" value="play" /> 

esto evitará el comportamiento de envío de formulario

bh_earth0
fuente
0

otro:

if(this.checkValidity() == false) {

                $(this).addClass('was-validated');
                e.preventDefault();
                e.stopPropagation();
                e.stopImmediatePropagation();

                return false;
}
Hola hack
fuente