1

No funciona el event.preventDefault() si tomo el objeto form del DOM y le ejecuto con form.submit() pareciese que este form.submit() realmente no despertara el addEventListener('submit', () => {...})

Este mi HTML:

<form method="get" id="form">
    <label for="nombre">Nombre</label>
    <input type="text" id="nombre" placeholder="Ingrese su Nombre" name="nombre">
    <br><br>
    <label for="apellido">Apellido</label>
    <input type="text" placeholder="Ingrese su Apellido" name="apellido" id="apellido">
    <br><br>
    <label for="edad">Edad</label>
    <input type="text" placeholder="Ingrese su Edad" name="edad" id="edad">
    <br><br>
    <button type="button" id="boton" name="boton">Enviar</button>
</form>

y este es mi script:

document.addEventListener('DOMContentLoaded', () => {
   const form = document.getElementById("form");
   const botonSubmit = document.getElementById("boton");

   form.addEventListener('submit', event => {
      event.preventDefault();
   })

   botonSubmit.addEventListener("click", () => {
      form.submit();
   })
})

No deberia recargarse la pagina cuando presiono el boton enviar, sin embargo si lo hace..

2
  • es necesario tener 2 eventos? cuando puedes agrupar todo en uno
    – Bryro
    Commented el 18 ene. a las 23:21
  • Claro, pero la pregunta es por que el metodo .submit() no ejecuta el listener de "submit" y al parecer existe otra funcion que si lo hace.
    – junner13
    Commented el 18 ene. a las 23:23

1 respuesta 1

2

La documentación dice que la función submit() es similar a activar el submit con un botón, pero no es exactamente igual. Paraticualmente porque la función submit() no activa el evento onsubmit/submit del formulario

No submit event is raised. In particular, the form's event handler is not run

Entonces no es que preventDefault() no funcione, si no que sencillamente nunca entra al evento form.addEventListener('submit', event => { //...});n ya que no es activad

Existe la función requestSubmit() que es exactamente igual a activar el submit mediante botón:

document.addEventListener('DOMContentLoaded', () => {
  const form = document.getElementById("form");
  const botonSubmit = document.getElementById("boton");

  form.addEventListener('submit', event => {
    event.preventDefault();
    console.log("Evento Submit");
  })

  botonSubmit.addEventListener("click", () => {
    form.requestSubmit();
  })
})
<form method="get" id="form">
  <button type="button" id="boton" name="boton">Enviar</button>
</form>

O simplemente puedes cambiar el tipo del botón de type=button a type=submit

document.addEventListener('DOMContentLoaded', () => {
  const form = document.getElementById("form");

  form.addEventListener('submit', event => {
    event.preventDefault();
    console.log("Evento Submit");
  })

})
<form method="get" id="form">
  <button type="submit" id="boton" name="boton">Enviar</button>
</form>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.