fix: submitters on remote forms (#14475)

* fix submitters on remote forms

* use native FormData submitter parameter

* tweak changeset

* add tests

* fix tests

* aaa

Author: ottomated

.changeset/nine-months-start.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: include the value of form submitters on `form` remote functions

documentation/docs/20-core-concepts/30-form-actions.md

@@ -440,7 +440,7 @@ We can also implement progressive enhancement ourselves, without `use:enhance`,
 	/** @param {SubmitEvent & { currentTarget: EventTarget & HTMLFormElement}} event */
 	async function handleSubmit(event) {
 		event.preventDefault();
-		const data = new FormData(event.currentTarget);
+		const data = new FormData(event.currentTarget, event.submitter);
 
 		const response = await fetch(event.currentTarget.action, {
 			method: 'POST',

documentation/docs/20-core-concepts/60-remote-functions.md

@@ -427,7 +427,7 @@ For client-side validation, you can specify a _preflight_ schema which will popu
 
 	const schema = v.object({
 		title: v.pipe(v.string(), v.nonEmpty()),
-		content:v.pipe(v.string(), v.nonEmpty())
+		content: v.pipe(v.string(), v.nonEmpty())
 	});
 </script>
 

packages/kit/CHANGELOG.md

@@ -2199,7 +2199,7 @@
 
 ### Patch Changes
 
-- fix: add `submitter` type to `SumbitFunction` ([#9484](https://github.com/sveltejs/kit/pull/9484))
+- fix: add `submitter` type to `SubmitFunction` ([#9484](https://github.com/sveltejs/kit/pull/9484))
 
 ## 1.13.0
 

packages/kit/src/exports/public.d.ts

@@ -1937,7 +1937,11 @@ export type RemoteForm<Input extends RemoteFormInput | void, Output> = {
 	/** Preflight checks */
 	preflight(schema: StandardSchemaV1<Input, any>): RemoteForm<Input, Output>;
 	/** Validate the form contents programmatically */
-	validate(options?: { includeUntouched?: boolean }): Promise<void>;
+	validate(options?: {
+		includeUntouched?: boolean;
+		/** Perform validation as if the form was submitted by the given button. */
+		submitter?: HTMLButtonElement | HTMLInputElement;
+	}): Promise<void>;
 	/** The result of the form submission */
 	get result(): Output | undefined;
 	/** The number of pending submissions */

packages/kit/src/runtime/app/forms.js

@@ -136,7 +136,7 @@ export function enhance(form_element, submit = () => {}) {
 			? /** @type {HTMLButtonElement | HTMLInputElement} */ (event.submitter).formEnctype
 			: clone(form_element).enctype;
 
-		const form_data = new FormData(form_element);
+		const form_data = new FormData(form_element, event.submitter);
 
 		if (DEV && enctype !== 'multipart/form-data') {
 			for (const value of form_data.values()) {
@@ -148,11 +148,6 @@ export function enhance(form_element, submit = () => {}) {
 			}
 		}
 
-		const submitter_name = event.submitter?.getAttribute('name');
-		if (submitter_name) {
-			form_data.append(submitter_name, event.submitter?.getAttribute('value') ?? '');
-		}
-
 		const controller = new AbortController();
 
 		let cancelled = false;

packages/kit/src/runtime/client/client.js

@@ -2543,12 +2543,7 @@ function _start_router() {
 		event.preventDefault();
 		event.stopPropagation();
 
-		const data = new FormData(event_form);
-
-		const submitter_name = submitter?.getAttribute('name');
-		if (submitter_name) {
-			data.append(submitter_name, submitter?.getAttribute('value') ?? '');
-		}
+		const data = new FormData(event_form, submitter);
 
 		// @ts-expect-error `URLSearchParams(fd)` is kosher, but typescript doesn't know that
 		url.search = new URLSearchParams(data).toString();

packages/kit/src/runtime/client/remote-functions/form.svelte.js

@@ -230,7 +230,7 @@ export function form(id) {
 
 				event.preventDefault();
 
-				const form_data = new FormData(form);
+				const form_data = new FormData(form, event.submitter);
 
 				if (DEV) {
 					validate_form_data(form_data, clone(form).enctype);
@@ -340,7 +340,7 @@ export function form(id) {
 				event.stopPropagation();
 				event.preventDefault();
 
-				const form_data = new FormData(form);
+				const form_data = new FormData(form, target);
 
 				if (DEV) {
 					const enctype = target.hasAttribute('formenctype')
@@ -350,10 +350,6 @@ export function form(id) {
 					validate_form_data(form_data, enctype);
 				}
 
-				if (target.name) {
-					form_data.append(target.name, target?.getAttribute('value') ?? '');
-				}
-
 				await handle_submit(form, form_data, callback);
 			};
 		};
@@ -422,12 +418,12 @@ export function form(id) {
 			},
 			validate: {
 				/** @type {RemoteForm<any, any>['validate']} */
-				value: async ({ includeUntouched = false } = {}) => {
+				value: async ({ includeUntouched = false, submitter } = {}) => {
 					if (!element) return;
 
 					const id = ++validate_id;
 
-					const form_data = new FormData(element);
+					const form_data = new FormData(element, submitter);
 
 					/** @type {readonly StandardSchemaV1.Issue[]} */
 					let array = [];

packages/kit/test/apps/basics/src/routes/remote/form/form.remote.ts

@@ -14,7 +14,8 @@ export const set_message = form(
 		message: v.picklist(
 			['hello', 'goodbye', 'unexpected error', 'expected error', 'redirect'],
 			'message is invalid'
-		)
+		),
+		uppercase: v.optional(v.string())
 	}),
 	async (data) => {
 		if (data.message === 'unexpected error') {
@@ -29,7 +30,7 @@ export const set_message = form(
 			redirect(303, '/remote');
 		}
 
-		message = data.message;
+		message = data.uppercase === 'true' ? data.message.toUpperCase() : data.message;
 
 		if (getRequestEvent().isRemoteRequest) {
 			const deferred = Promise.withResolvers();

packages/kit/test/apps/basics/src/routes/remote/form/submitter/+page.svelte

@@ -0,0 +1,9 @@
+<script>
+	import { my_form } from './form.remote.js';
+</script>
+
+<form {...my_form}>
+	<button name={my_form.field('submitter')} value="hello">submit</button>
+</form>
+
+<p id="result">{my_form.result}</p>