SPA: How do I submit a form on an onChange Event without submit button

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!

Solution 1:

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?