include submitter value in enhanced GET forms (#8273)

* include submitter value in GET form data

* Update .changeset/tricky-foxes-buy.md

Co-authored-by: Rich Harris <hello@rich-harris.dev>

.changeset/tricky-foxes-buy.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+Include submitter's value when progressively enhancing `<form method="get">`

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

@@ -1461,21 +1461,28 @@ export function create_client({ target, base }) {
 				if (method !== 'get') return;
 
 				const url = new URL(
-					(event.submitter?.hasAttribute('formaction') && submitter?.formAction) || form.action
+					(submitter?.hasAttribute('formaction') && submitter?.formAction) || form.action
 				);
 
 				if (is_external_url(url, base)) return;
 
-				const { noscroll, reload } = get_router_options(
-					/** @type {HTMLFormElement} */ (event.target)
-				);
+				const event_form = /** @type {HTMLFormElement} */ (event.target);
+
+				const { noscroll, reload } = get_router_options(event_form);
 				if (reload) return;
 
 				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') ?? '');
+				}
+
 				// @ts-expect-error `URLSearchParams(fd)` is kosher, but typescript doesn't know that
-				url.search = new URLSearchParams(new FormData(event.target)).toString();
+				url.search = new URLSearchParams(data).toString();
 
 				navigate({
 					url,

packages/kit/test/apps/basics/src/routes/routing/form-get/+page.svelte

@@ -11,8 +11,9 @@
 
 <h1>{$page.url.searchParams.get('q') ?? '...'}</h1>
 <h2>{type}</h2>
+<h3>{$page.url.searchParams.get('foo') ?? '...'}</h3>
 
 <form>
 	<input name="q" />
-	<button>submit</button>
+	<button type="submit" name="foo" value="bar">Submit</button>
 </form>

packages/kit/test/apps/basics/test/client.test.js

@@ -844,6 +844,7 @@ test.describe('Routing', () => {
 		await page.goto('/routing/form-get');
 		expect(await page.textContent('h1')).toBe('...');
 		expect(await page.textContent('h2')).toBe('enter');
+		expect(await page.textContent('h3')).toBe('...');
 
 		const requests = [];
 		page.on('request', (request) => requests.push(request.url()));
@@ -854,6 +855,7 @@ test.describe('Routing', () => {
 		expect(requests).toEqual([]);
 		expect(await page.textContent('h1')).toBe('updated');
 		expect(await page.textContent('h2')).toBe('form');
+		expect(await page.textContent('h3')).toBe('bar');
 	});
 });