SvelteKit中如何无需按钮提交表单？

我在SvelteKit的+page.svelte中创建了一个表单，希望不需要使用<button>就能提交表单——当表单内的Svelte Select组件被用户选择时，自动触发表单提交，把选中的值发送到+page.server.ts的处理逻辑中。现有代码如下：

原代码 #

+page.svelte #

<form method="POST" use:enhance>
    // 使用svelte-select组件
    <Select
        name="select"
        bind:justValue={value}
        items={items}
    />
</form>

+page.server.ts #

import { fail, redirect } from '@sveltejs/kit';
import type { Actions } from './$types';

export const actions: Actions = {
    default: async ({ request }) => {
        const formData = Object.fromEntries(await request.formData());

        const res  = await fetch(`${environment.apiUrl}/search`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                value: formData.select
            })
        });
        const item = await res.json();

        if(!res.ok) {
            return fail(401, { error: 'error', item });
        }
        
        return {
            success: true,
            item
        };
    },
};

实现自动提交的方法 #

要实现选择后自动提交，只需要监听Svelte Select的选择变更事件，在事件触发时手动调用表单的submit()方法即可。具体修改如下：

修改后的+page.svelte #

<script>
    let form; // 表单DOM引用
    let value;
    let items = [/* 你的选项数据 */];
</script>

<form method="POST" use:enhance bind:this={form}>
    <Select
        name="select"
        bind:justValue={value}
        items={items}
        on:change={() => form?.submit()} // 选择变更时自动提交表单
    />
</form>

说明 #

• 通过bind:this={form}获取表单的DOM元素引用，方便后续调用提交方法；
• on:change事件会在用户选中新选项时触发，此时调用form.submit()即可触发表单提交，结合use:enhance能实现SvelteKit的渐进式增强提交，无需刷新页面；
• +page.server.ts的代码无需修改，表单提交后会自动触发default action，处理选中的参数。

内容的提问来源于stack exchange，提问作者Ichwanul Fadhli