Siento que estoy preguntando "¿cuánto es 2+2?" pero estoy enfrentando un problema que no entiendo... Aquí está el código, fácil de entender:
<button type="button" onclick="send()"> <form id="form"> <input name="name"> </form> <script> const form = document.getElementById("form"); function send() { form.submit(); } form.addEventListener("submit", (e)=>{ // This code never gets executed, // the default behavior still works. // (note that my console preserves logs, // so it should be visible even though the page is being refreshed.) console.log("preventing default behavior"); e.preventDefault(); }); </script>¿Alguien podría ayudarme en eso? Debería ser muy fácil, pero por alguna razón el código no quiere ser amable conmigo esta noche.
Este es el comportamiento esperado (algo poco intuitivo). Consulte los documentos para HTMLFormElement.submit() :
Este método es similar, pero no idéntico, a la activación del envío de un formulario. Sin embargo, al invocar este método directamente:
No se genera ningún evento de envío. En particular, el controlador de eventos onsubmit del formulario no se ejecuta.
La validación de restricciones no se activa.
El método
HTMLFormElement.requestSubmit()es idéntico a activar el envío de un formulario y no tiene estas diferencias.
Entonces, puede usar form.requestSubmit en lugar de form.submit .
const form = document.getElementById("form"); function send() { form.submit(); } form.addEventListener("submit", (e)=>{ // This code never gets executed, // the default behavior still works. // (note that my console preserves logs, // so it should be visible even though the page is being refreshed.) e.preventDefault(); console.log("preventing default behavior"); send(); }); <form id="form"> <input name="name"> <button type="submit" >submit</button> </form>