Submitting form data with hidden values multiple times

[paulchoix]

I'm working on a vote button that can be clicked multiple times to add/remove votes. I'm using a form with a hidden input value that contains the ID of the entry being voted on.

<form method="POST" action="?/vote">
    <input name="entry_id" value={entry_id} hidden />
</form>

In +page.server.js I retrieve the ID using data = await request.formData() and data.get('entry_id'). However, if the form is submitted again, data.get('entry_id') returns an empty string.

I have a similar form for comments, and I noticed that user input is handled correctly when the form is submitted multiple times (data.get('user_input') returns the user input), but the hidden input values do not follow after the first form submission. What am I doing wrong?

[teemingc]

Can you share more of the code? It sounds like the issue might lie elsewhere.

I tried reproducing the issue here but was not successful
https://stackblitz.com/edit/sveltejs-kit-template-default-jimtkr?file=src/routes/+page.svelte

[paulchoix]

Ugh, I forgot an important detail - I'm using form enhancements.

So the above form actually looks like:

<form
	method="POST"
	action="?/vote"
	use:enhance={() => {
		return async ({ result, update }) => {
			update();
			handleResult(result);
		};
	}}
>
	<input name="entry_id" value={entry_id} hidden />
</form>

On +page.server.js:

/** @type {import('./$types').Actions} */
export const actions = {
	default: async (RequestEvent) => {
		const { request } = RequestEvent;
		const request_clone = request.clone(); // I clone the request as the original is passed on and the formData consumed later
		const data = request_clone.formData();
		console.log(data.get('entry_id')); // Returns entry_id on the first try, then an empty string
		...
	}
}

[teemingc]

I had a suspicion that it was the progressive enhancement causing this.
The form enhance was changed a while back to reset the form by default. So, using the default enhance behaviour with update causes the entry_id value to reset.

You'll want to use update({ reset: false }) as mentioned here:
https://kit.svelte.dev/docs/types#$app-forms-submitfunction

Could be worth submitting a PR to increase its visibility.
The main Form actions section does not mention how to disable the reset behaviour:
https://kit.svelte.dev/docs/form-actions#progressive-enhancement

[paulchoix]

There we go! Yes, I read that section of the docs and it wasn't clear that the update function's reset parameter had that impact. I'd submit a PR request, but this is my first GitHub discussion and I'm not even sure how! Many thanks for the help.

[geoffrich]

@s3812497 is right in that enhance is resetting the form. From the docs:

[enhance will] reset the <form> element and invalidate all data using invalidateAll on a successful response

So, one way to work around this would be to pass { reset: false } to the update function as they suggested. However, the root issue is that your input has the hidden attribute instead of type="hidden". hidden simply hides the element visually, it does not make it an actual hidden input. If you add type="hidden" to the input instead, it should not be reset with the rest of the form and there is no need to use { reset: false }.

(Couldn't find a reference for this, but tested in a REPL)

<input name="entry_id" value={entry_id} type="hidden" />

[paulchoix]

I've been using hidden inputs wrong this whole time! Thanks for this.