javascript - SvelteKit Form Action not returning successremains null - Stack Overflow

admin管理员组

文章数量:1418636

I have the following setup in my +page.server.js:

export const actions = {
    createScore: async ({ request }) => {
        const values = await request.formData();

        try {
            const instagram = values.get('username');
            const score = Number(values.get('score'));

            await prisma.score.create({
                data: {
                    score,
                    instagram
                }
            });

            return { success: true };
        } catch (err) {
            console.error(err);
            return fail(500, { message: 'Could not create the score.' });
        }
    }
};

This runs fine, I see the entry in the database. However, no matter how hard I try, I cannot access 'form' to check for the return of sucess in my front end.

I do the following in page.svelte

<script>
    export let form;
    console.log(form);
</script>

The console log consistently returns null when the form is run.

Further, the following never renders (telling me I am not missing a state change):

{#if form?.success}
<p>It Worked</p>
{/if}

Finally, form as follows:

<form action="?/createScore" method="POST">
<input type="text" id="score" name="score" />
<input type="text" id="username" name="username" />
<button type="submit">Submit</button>
</form>

Am I missing something?

I have the following setup in my +page.server.js:

export const actions = {
    createScore: async ({ request }) => {
        const values = await request.formData();

        try {
            const instagram = values.get('username');
            const score = Number(values.get('score'));

            await prisma.score.create({
                data: {
                    score,
                    instagram
                }
            });

            return { success: true };
        } catch (err) {
            console.error(err);
            return fail(500, { message: 'Could not create the score.' });
        }
    }
};

This runs fine, I see the entry in the database. However, no matter how hard I try, I cannot access 'form' to check for the return of sucess in my front end.

I do the following in page.svelte

<script>
    export let form;
    console.log(form);
</script>

The console log consistently returns null when the form is run.

Further, the following never renders (telling me I am not missing a state change):

{#if form?.success}
<p>It Worked</p>
{/if}

Finally, form as follows:

<form action="?/createScore" method="POST">
<input type="text" id="score" name="score" />
<input type="text" id="username" name="username" />
<button type="submit">Submit</button>
</form>

Am I missing something?

• javascript
• svelte
• sveltekit

Share Improve this question Follow edited Mar 27, 2023 at 14:53 NickP asked Mar 27, 2023 at 14:35 NickPNickP 1,41422 gold badges2525 silver badges5757 bronze badges 9

• Show the form that triggers the action. – brunnerh Commented Mar 27, 2023 at 14:47
• Also, if anything, you would want to log reactively: $: console.log(form); – brunnerh Commented Mar 27, 2023 at 14:48
• 1 I do not see any issues here. The page file is named +page.svelte, correct? Also, would remend using the enhance action to not fully reload the page on submit. – brunnerh Commented Mar 27, 2023 at 15:00
• 3 It is but strangely, enhance seems to have done it and I am now getting something back! Thanks – NickP Commented Mar 27, 2023 at 15:03
• 1 Ran into same issue today, adding use:enhance solved it. Not sure why it was necessary though – Sebastian Commented Aug 30, 2023 at 20:39

 |  Show 4 more ments

3 Answers 3

Sorted by: Reset to default 1

I cannot access 'form' to check for the return of success in my front end.

Maybe different in your case, but I came across the same issue once when I first started learning SvelteKit.

In my case, I had turned off server-side rendering in a +layout.js file so that I could access the window object on the frontend:

export const ssr = false; (I got that here.)

Commenting out that line (along with re-working the way that I handled localstorage access) solved my issue.

I had the same problem. I could fix it by moving the Form from a ponent to +page.svelte.

My issue was that I had a variable with the same name as the actionData. When I changed it it worked.

本文标签： javascriptSvelteKit Form Action not returning successremains nullStack Overflow