How do I submit a form on an onChange Event without submit button-CodePudding

How do I submit a form on an onChange event of an tag, 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!

CodePudding user response：

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?

CodePudding user response：

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>

CodePudding user response：

I don't know why are you don't want to use SPA?

SPA will not reload in front page.

<html lang="en-US">
    <head>
        <script>
            let name = "world";

            function handleSubmit(form) {
                // Handle Submit
                console.log("FormSubmited", form);
            }

            function handleChange(slOBJ) {
                //e.preventDefault();

                // Page reloads for some reason
                // e.target.form.submit();
                console.log("SelectChanged");
                const fD = new FormData(slOBJ.parentNode);
                console.log("SelectChanged to POST", fD);
                const mt = { method: "POST", body: fD };
                fetch(slOBJ.parentNode.action, mt)
                    .then(function (res) {
                        return res.text();
                    })
                    .then(function (resText) {
                        console.log("SelectChange and POSTed", resText);
                    });
            }
        </script>
    </head>

    <body>
        <h1>
            Test
        </h1>
        <form onsubmit="handleSubmit(this)">
            <select onchange="handleChange(this)">
                <option selected>Choose...</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select>
        </form>
    </body>
</html>

Sample