Submitting a form from a SvelteKit component to be handled by a server-side form action is simpler than you might think. You don’t need the form to be inside a page. It can live in any component and still interact with SvelteKit’s server-side functionality.
This post will walk you through submitting a form from a component, processing it using a default form action from a +page.server.js, and setting up a +page.svelte to bind the form.
Project Structure
my-sveltekit-project/
├── src/
│ ├── components/
│ │ └── FormTestComponent.svelte
│ ├── routes/
│ │ ├── +page.svelte
│ │ └── test/
│ │ └── +page.server.js
├── static/
├── package.json
├── svelte.config.js
├── vite.config.js
└── tsconfig.json
First, let’s create a FormTestComponent that contains a simple form:
<!-- src/lib/components/FormTestComponent.svelte --> <script> export let form; </script> <form> <input id="test" name="test" /> <button type="submit"> Submit </button> </form>
At this point, we have a basic form ready to be used inside a component, but we haven't yet connected it to server-side form handling.
Now, create a +page.svelte file to use the FormTestComponent and bind its form prop.
<!-- routes/+page.svelte --> <script> import FormTestComponent from "$lib/components/FormTestComponent.svelte"; export let form; // This comes from the page’s server-side form response </script> <FormTestComponent {form} />
To handle form submissions efficiently, SvelteKit provides the use:enhance directive, which allows you to enhance the form with progressive enhancement features like handling submissions without a full page reload.
Here's how you enhance the form submission in FormTestComponent:
<!-- src/lib/components/FormTestComponent.svelte --> <script> import { enhance } from "$app/forms"; import FormInput from "$components/forms/FormInput.svelte"; import { page } from "$app/stores"; let loading = false; export let form; $: console.log(form); // Log form response for debugging </script> <form method="POST" on:submit|preventDefault action="/test" use:enhance > <FormInput label="test" id="test" /> <button type="submit"> Submit </button> </form>
To process the form on the server, create a directory at /test with a +page.server.js (or +page.server.ts if you prefer TypeScript).
Here’s an example of what the form action might look like in +page.server.js:
// - /routes/test/+page.server.js /** @type {import('./$types').Actions} */ export const actions = { default: async ({ request }) => { const data = await request.formData(); const formEntries = Object.fromEntries(data.entries()); // Convert form data to an object console.log(formEntries); // Log form data on the server return { success: true, message: "Yay!!" }; } };
This is where the server processes the form. In this case, we’re logging the form data and returning a success message. In a real-world scenario, you’d likely perform validation and handle any errors.
Once the form is submitted, you'll see the form data logged both in the terminal (server-side) and in the browser’s console (client-side). This is thanks to the console.log(form) in the component and the console.log(formEntries) in the +page.server.js, which logs the form response and the form respectively.
Now you’ve successfully created a form inside a SvelteKit component that submits data to a server-side form action. You didn’t need to use a full page for the form, and you’ve utilized SvelteKit’s use:enhance to handle submissions seamlessly without a page reload.
You can extend this by adding custom validation, handling errors, or even performing more complex actions like file uploads.
Happy Hacking!
The above is the detailed content of Calling a SvelteKit form action (or submitting a form) from a component. For more information, please follow other related articles on the PHP Chinese website!