diff --git a/.changeset/lemon-mayflies-design.md b/.changeset/lemon-mayflies-design.md new file mode 100644 index 000000000000..7cb208363a9a --- /dev/null +++ b/.changeset/lemon-mayflies-design.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/kit': minor +--- + +feat: expose submitter in use:enhance SubmitFunction diff --git a/documentation/docs/20-core-concepts/30-form-actions.md b/documentation/docs/20-core-concepts/30-form-actions.md index e2587a923faf..7eea5f4fbdb8 100644 --- a/documentation/docs/20-core-concepts/30-form-actions.md +++ b/documentation/docs/20-core-concepts/30-form-actions.md @@ -344,11 +344,12 @@ To customise the behaviour, you can provide a `SubmitFunction` that runs immedia ```svelte
{ + use:enhance={({ form, data, action, cancel, submitter }) => { // `form` is the `` element // `data` is its `FormData` object // `action` is the URL to which the form is posted // `cancel()` will prevent the submission + // `submitter` is the `HTMLElement` that caused the form to be submitted return async ({ result, update }) => { // `result` is an `ActionResult` object diff --git a/packages/kit/src/runtime/app/forms.js b/packages/kit/src/runtime/app/forms.js index db5f4d43ce5a..107a68cf17a9 100644 --- a/packages/kit/src/runtime/app/forms.js +++ b/packages/kit/src/runtime/app/forms.js @@ -91,7 +91,8 @@ export function enhance(form, submit = () => {}) { cancel, controller, data, - form + form, + submitter: event.submitter })) ?? fallback_callback; if (cancelled) return; diff --git a/packages/kit/types/ambient.d.ts b/packages/kit/types/ambient.d.ts index 74677a278c22..de0198bacf24 100644 --- a/packages/kit/types/ambient.d.ts +++ b/packages/kit/types/ambient.d.ts @@ -84,6 +84,7 @@ declare module '$app/forms' { form: HTMLFormElement; controller: AbortController; cancel(): void; + submitter: HTMLElement | null; }) => MaybePromise< | void | ((opts: {