typescript 如何在Sveltekit中提交没有按钮的表单?

pgpifvop  于 2023-10-22  发布在  TypeScript
关注(0)|答案(1)|浏览(113)

我在+page.svelte文件中有一个表单,我想提交一个表单,但没有<button />
例如,我在<form>中有一个<select>元素,现在当用户选择选择时,它会触发将值提交到+page.server.ts文件
一个粗略的例子是这样的:
+page.svelte

<form method="POST" use:enhance>
    // I'm using 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
        };
    },
};
wnrlj8wa

wnrlj8wa1#

Idk如果这是最好的解决方案,但您可以使用requestSubmit
通过bind:this获取表单引用

<form method="POST" use:enhance bind:this={formElement}>

然后你可以随时触发formElement.requestSubmit()在您的情况下,可以在Select触发select事件时执行此操作

相关问题