How do I submit a form on an onChange event of an tag in an SPA, with without triggering the default behaviour(Page reload). I found out, that I can access the form from the event with the .form element. But if I trigger .form.submit() the page reloads although I have stated on:submit|preventDefault.
I prepared an example of my Problem: https://svelte.dev/repl/894212c7c3d847dd961745f5e9d5750a?version=3.46.2
Also is there like a clean/correct/best-practice way of solving this, without using an submit button?
Thanks in advance for your help!
Grab the data from the form with the FormData constructor. Then POST it with a Fetch, XMLHttpRequest or whatever HTTP tool you prefer.
const myForm = document.getElementById('myForm');
const formData = new FormData(myForm);
const XHR = new XMLHttpRequest(),
XHR.addEventListener( 'load', function( event ) {
alert('DONE!');
} );
XHR.send( formData );
The clean way is to use a form library for javascript OR plain html forms. What's wrong with reloading the page when they click submit?
Submit a form with onChange. It is not recommended to submit a form from 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>