¿Cómo envío un formulario en un evento onChange de una etiqueta en un SPA, sin activar el comportamiento predeterminado (recarga de página)? Descubrí que puedo acceder al formulario desde el evento con el elemento .form . Pero si .form.submit() , la página se vuelve a cargar aunque lo haya indicado on:submit|preventDefault .
Preparé un ejemplo de mi Problema: https://svelte.dev/repl/894212c7c3d847dd961745f5e9d5750a?version=3.46.2
¿También hay una forma limpia/correcta/de mejores prácticas de resolver esto, sin usar un botón de envío?
¡Gracias de antemano por tu ayuda!
Tome los datos del formulario con el constructor FormData . Luego PUBLIQUE con Fetch ,XMLHttpRequest o cualquier herramienta HTTP que prefiera.
const myForm = document.getElementById('myForm'); const formData = new FormData(myForm); const XHR = new XMLHttpRequest(), XHR.addEventListener( 'load', function( event ) { alert('DONE!'); } ); XHR.send( formData );La forma limpia es usar una biblioteca de formularios para javascript O formularios html simples. ¿Qué tiene de malo volver a cargar la página cuando hacen clic en enviar?
Envíe un formulario con onChange. No se recomienda enviar un formulario desde onChange.
<script type="text/javascript"t> function submit(event): document.getElementById('meow').submit() event.preventDefault() // put it at the end to prevent page reload <script/> <form id="meow"> <input onChange="submit()" type="text" name="n" placeholder="enter your name"/><br/> </form>