I'm new to SvelteKit and trying to build a simple todo app with a MongoDB database. I followed the tutorials and implemented a form to add todos like so:
<form action="?/create" method="POST" class="flex flex-col gap-5 justify-center items-center w-2/3 mx-auto" use:enhance><div class="w-2/3"><label class="block text-sm text-gray-500" for="todo"> Title </label><input class="border border-gray-300 w-full rounded-md shadow-sm hover:border-gray-400 focus:outline-none focus:border-gray-500 transition duration-100 ease-linear p-1 text-gray-700" type="text" name="title" bind:value={title} /></div><div class="w-2/3"><label class="block text-sm text-gray-500" for="todo"> Description</label><textarea rows="4" class="w-full border border-gray-300 rounded-md shadow-sm hover:border-gray-400 focus:outline-none focus:border-gray-500 transition duration-100 ease-linear p-1 text-gray-700" name="desc" bind:value={desc} /></div><div><button class="bg-blue-500 text-white px-8 py-2 rounded-md font-semibold text-lg hover:bg-blue-600 transition duration-100 shadow-xl"> Create</button></div></form>
As you see, I am using the use:enhance directive that should prevent the form from reloading the page. When submitted, the form calls the actions object on my "+page.server.js" file, like so:
export const actions = { create: async ({ cookies, request }) => { const data = await request.formData(); if (data.get("title").length === 0) { return fail(400, { error: true, message: "Title can't be empty", }); } if (data.get("desc").length === 0) { return fail(400, { error: true, message: "Description can't be empty", }); } const todo = { title: data.get("title"), description: data.get("desc"), }; try { await createTodo(todo); } catch (err) { return fail(422, { description: "wrong", }); } },};
This should be working fine, but my form refreshes each time I submit it, meaning I get a full page reload and the animations don't work (along with other stuff that might be implemented in the future). What is the cause of this? Is it expected behavior and I am missing something?