How to use:enhance on a bound form?

[M4rk3tt0]

Hi, I have a third-party table component that has a column containing toggle-switch components (status column).
So on each row of the table I can interact with the toggle-switch and save the new status on a database using svelte form actions.

Since it's not possible to pass events using props down to the toggle from the table, I'm using a store to save the data of the selected toggle, and bind it to the fields of a form (that will be hidden).

The form is bound to a variable (myForm), so when the store.status changes I can programmatically submit the form.

Everything works correctly but the problem is that the use:enhance is not used and the page reloads.

How can the use:enhance be used when submitting the form programmatically?

Here is a simple code to show this behavior

+page.svelte

<script>
    import {writable} from 'svelte/store'
    import { tick } from 'svelte';
    import {enhance} from '$app/forms'

    let myForm
    const store = writable({id:'', status:false})

    const handleChange = async(e) =>{
        $store.id=e.target.id
        $store.status=e.target.checked
        await tick()
        myForm.submit()
    }
</script>

<p>Let's say we have a table with a column which has toggle switch in it</p>
<p>For semplicity let's use 3 checkboxes</p>
<input type="checkbox" name="status" id="1" on:change={handleChange}/>
<input type="checkbox" name="status" id="2" on:change={handleChange}/>
<input type="checkbox" name="status" id="3" on:change={handleChange}/>

<p>We create a form that contains id and status of that last clicked toggle</p>
<form method="POST" bind:this={myForm} use:enhance>
    <input type="text" name="id" placeholder="ID" bind:value={$store.id}>
    <input type="checkbox" name="status" bind:checked={$store.status}/>
</form>

+page.server.js

export const actions = {
    default: async ({ request }) => {
        const response = await request.formData();
        console.log(response);
    }
};

[geoffrich]

Instead of submit, use requestSubmit. submit simply submits the form without running any configured event handlers or custom logic. requestSubmit will behave the same as if the user submitted the form themselves.

Make sure to check browser support and potentially polyfill before using, though (only Safari 16 or later)

[M4rk3tt0]

Thank you @geoffrich!

I tried that yesteday on my project but it didn't work and it was even redirecting me to the homepage.

But I just tried again and now it's working like a charm! Maybe I just had to restart the server 😅.