Currently, I am using Sveltekit and I am facing a dilemma regarding updating input data. The actual update process is straightforward, but there is an issue that arises when trying to send an update API request immediately, as it requires an accessToken to be included in the header. However, this token is stored in a cookie with httpOnly set to true, making it inaccessible from JavaScript. This leads me to believe that processing the update logic on the server side is necessary.
I attempted to resolve this by utilizing the action function on the server side, but I encountered some challenges:
- Every time I click the edit button, the input data gets reset.
- It seems that due to the input value reset, the action function does not receive the entered value.
Below is the code snippet I have been working on:
// +page.svelte
<form action="?/updateUser" method="post" use:enhance>
<div class="mb-6">
<Label for="email-input" class="block mb-2">email</Label>
<div class="flex gap-4 w-full">
<Input id="email-input" size="lg" placeholder="email" bind:value={_email} />
<Button type="submit" class="w-fit whitespace-nowrap text-sm" disabled={!isEmailChanged}
>Edit</Button
>
</div>
</div>
</form>
// +page.server.ts
export const actions: Actions = {
updateUser: async ({ cookies, request }) => {
const data = await request.formData();
const email = data.get('email-input') as string;
console.log({ email });
// throw redirect(303, '/protected?page=1');
}
};
If you have any suggestions or advice, please feel free to share. Thank you!