Estoy jugando con HTML/JS para aprender mejor a usar formularios. Por ejemplo, con el siguiente fragmento de código, me gustaría que el usuario ingrese un número antes de enviar el formulario:
<form> <input type="number" min=1 max=100 required> <input type="submit" id="t> </form>Sin embargo, adjuntar el botón Enviar con el siguiente detector de eventos que llama a preventDefault() no impide que la página se actualice cuando hago clic en el botón Enviar.
document.getElementById("t").addEventListener("submit", function(event) { event.preventDefault(); console.log("test"); });Nota: aunque estoy usando el botón de envío y el evento de envío, no quiero enviar datos a un servidor. En cambio, lo estoy usando como una forma de validación de entrada, por lo que el usuario debe ingresar un número entre 1 y 100 antes de que el cliente responda.
No estoy seguro de qué va mal con lo que tengo actualmente. Cualquier ayuda sería apreciada. ¡Gracias!
Como se describe en mi comentario, simplemente cambie el elemento al que está adjuntando el controlador de eventos al elemento <form> .
document.querySelector("form").addEventListener("submit", (event) => { event.preventDefault(); console.log("Test"); }) <form> <input type="number" min=1 max=100 required> <input type="submit" value="Submit"/> </form>Enviar controlador de eventos debe estar en el formulario.
<form id="form"> <input type="number" min=1 max=100 required> <input type="submit"> </form> document.getElementById("form").addEventListener("submit", function(event) { event.preventDefault(); console.log("test"); });