javascript - Can you stop a page from reloading on form submit without preventDefault with svelte kit? - Stack Overflow

admin管理员组

文章数量:1279042

I want to display a toast for a few seconds whenever a user does something, eg. when they log in to the app. I am using a form on /login/+page.svelte to login, with the database interaction in /login/page.server.js. And I am using a writable store to store toasts.

On form submit, the page refreshes, so my store is cleared and the toast is lost. It seems the event flow is:

• submit form to /login/page.server.js
• page.server.js does some stuff
• page.server.js sends back the full page and the browser reloads to the new full page.

I understand you can use preventdefault to prevent all those steps, but I only want to prevent the reloading. Preventing everything does not seem optimal (there are probably some other stuff I don't even know I'm preventing).

Is there a nicer way of interacting between a page.svelte and a page.server.js without reload (and thus clearing, probably all, stores) than preventdefault + using a manual fetch?

REPL I was playing around with that demonstrates the toast staying full 3 seconds generally, but immediately disappearing on normal form submit. /repl/8b61434332ca471b83cbf039bf1f3fc9?version=3.22.0

I want to display a toast for a few seconds whenever a user does something, eg. when they log in to the app. I am using a form on /login/+page.svelte to login, with the database interaction in /login/page.server.js. And I am using a writable store to store toasts.

On form submit, the page refreshes, so my store is cleared and the toast is lost. It seems the event flow is:

• submit form to /login/page.server.js
• page.server.js does some stuff
• page.server.js sends back the full page and the browser reloads to the new full page.

I understand you can use preventdefault to prevent all those steps, but I only want to prevent the reloading. Preventing everything does not seem optimal (there are probably some other stuff I don't even know I'm preventing).

Is there a nicer way of interacting between a page.svelte and a page.server.js without reload (and thus clearing, probably all, stores) than preventdefault + using a manual fetch?

REPL I was playing around with that demonstrates the toast staying full 3 seconds generally, but immediately disappearing on normal form submit. https://svelte.dev/repl/8b61434332ca471b83cbf039bf1f3fc9?version=3.22.0

• javascript
• svelte
• sveltekit

Share Improve this question Follow asked Nov 10, 2022 at 14:42 JoramJoram 30455 silver badges1515 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

The intended workflow for forms is to use form actions and enhance, which automatically processes the form asynchronously (which falls back to the hard reload if JS is disabled).

本文标签：