Hay varias soluciones posibles con Vainilla JS para capturar y detener el evento.
Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.both-auto {
margin-left : auto;
margin-right: auto;
}
.flex {
display: flex;
}
.flex-both {
justify-content: space-between;
}
.flex-col {
flex-direction: column;
}
.top-2 {
margin-top: 2%;
}
.w-50 {
width: 50%;
}
</style>
<script>
function log() // void
{
console.log(...arguments);
}
function qs(selector, node = null) // void
{
return (node || document).querySelector(selector);
}
</script>
</head>
<body>
<form action="xxx.html" class="flex flex-col w-50 both-auto">
<input type="text" class="top-2" name="name" placeholder="Nombre">
<input type="email" class="top-2" name="email" placeholder="Email">
<textarea name="message" class="top-2" rows="7" placeholder='Mensaje'></textarea>
<div class="flex flex-both top-2">
<button type="submit"
className="btn btn-primary">
Enviar (submit)
</button>
<button type="button"
className="btn btn-primary">
Enviar (button)
</button>
</div>
</form>
<script>
const buttonButton = qs('button[type="button"]');
const buttonSubmit = qs('button[type="submit"]');
const form = qs('form');
form.onsubmit = (ev) => {
ev.preventDefault();
log('form => submit event');
}
buttonSubmit.onclick = (ev) => {
ev.preventDefault();
log('button type submit => onclick event');
}
buttonSubmit.onsubmit = (ev) => {
ev.preventDefault();
log('button type submit => submit event');
}
buttonButton.onclick = (ev) => {
ev.preventDefault();
log('button type button => onclick event');
}
</script>
</body>
</html>
Puedes validar datos o lo que necesites y al finalizar enviar el formulario con una sentencia como document.querySelector('form').submit();
.
Veamos el ejemplo:
He añadido un botón de tipo submit, que es el habitual y desencadena el envío de formulario y otro de tipo button. Les asocio un evento de tipo onclick
a cada uno, este será el primero que se ejecute al accionar los botones, por lo tanto no llegará al submit si se controla en este punto.
Como aclaración, en HTML5 a un botón, que quieras usar como tal (no para enviar un formulario concretamente), debe tener el tipo button para que no lance un submit por defecto. Entonces el botón de tipo button que puse sólo puede controlarse con un onclick
, nunca enviaría por si mismo el formulario.
Si quitas el evento onclick
del botón de submit, y dejas en evento onsubmit
en el formulario y en el botón, el primer que se ejecuta es el del propio botón.
Entonces, ¿que para que controlar el evento en el propio formulario?
Es en el último punto en el que se ejecuta.
Para un formulario como éste, lo mejor sería controlar el evento en el formulario, por esta razón: si estas dentro de un input
y se pulsa enter se lanza el onsubmit
, entonces para el ejemplo dejaría sólo:
const form = qs('form');
form.onsubmit = (ev) => {
ev.preventDefault();
log('form => submit event');
}
En este punto, un truco, para evitar que pulsando enter se envíe el formulario, justo después de la apertura del formulario, se puede añadir un botón de tipo submit deshabilitado y oculto, como este:
<button type="submit" style="display:none" disabled></button>
Esto funciona con o sin usar javascript, es decir al añadirlo solo activar el botón de tipo submit activaría el envío del formulario, ya se controle o no el evento, que ahora sí, se puede controlar en el botón o en el propio formulario. Entonces en ejemplo podría quedar:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.both-auto {
margin-left : auto;
margin-right: auto;
}
.flex {
display: flex;
}
.flex-both {
justify-content: space-between;
}
.flex-col {
flex-direction: column;
}
.top-2 {
margin-top: 2%;
}
.w-50 {
width: 50%;
}
</style>
<script>
function log() // void
{
console.log(...arguments);
}
function qs(selector, node = null) // void
{
return (node || document).querySelector(selector);
}
</script>
</head>
<body>
<form action="xxx.html" class="flex flex-col w-50 both-auto">
<button type="submit" style="display:none" disabled></button>
<input type="text" class="top-2" name="name" placeholder="Nombre">
<input type="email" class="top-2" name="email" placeholder="Email">
<textarea name="message" class="top-2" rows="7" placeholder='Mensaje'></textarea>
<div class="flex flex-both top-2">
<button type="submit"
className="btn btn-primary">
Enviar (submit)
</button>
<button type="button"
className="btn btn-primary">
Enviar (button)
</button>
</div>
</form>
<script>
qs('button[type="submit"]').onsubmit = (ev) => {
ev.preventDefault();
log('button type submit => submit event');
// TODO:
// qs('form').submit();
}
</script>
</body>
</html>
Nota: para simplificar le he añadido un display:none
en línea al butón deshabilitado, este hack en principio funciona, es importante que este disabled
y oculto al usuario claro. El ideal para mi es el siguiente:
<button type="submit" disabled hidden aria-hidden="true"></button>
form
de los siguientes eventos: preventDefault(), stopPropagation(), y stopImmediatePropagation()preventDefault()
? ¿Se manda el formulario? ¿Se llega a ejecutar la función del evento? ¿Dónde pones ese código javascript? ¿Te sale algún mensaje de error en la consola de depuración de JavaScript? ¿Estás usando algún JavaScript para validar el formulario?