form action on a different page with use:enhance

[SteelAlloy]

Hi,

I'm using a form with an action on another page.

<form
  action="/somewhere/else"
  method="post"
>
  <button type="submit">
    Submit
  </button>
</form>

It works fine without enhancements, I'm getting redirected to /somewhere/else and my action is fullfilled.

But when I add use:enhance everything breaks, svelte performs a fetch but doesn't redirect at all in the client.

I tried using applyAction as written in the docs but I must admit it's not very clear what to do in this case.

https://kit.svelte.dev/docs/form-actions#progressive-enhancement-use-enhance

update the form property, $page.form and $page.status on a successful or invalid response, but only if the action is on the same page you're submitting from. So for example if your form looks like <form action="/somewhere/else" ..>, form and $page will not be updated. This is because in the native form submission case you would be redirected to the page the action is on. If you want to have them updated either way, use applyAction

<form
  action="/somewhere/else"
  method="post"
	use:enhance={({ formElement, formData, action, cancel }) => {

		return async ({ result }) => {
			await applyAction(result); // ???
		};
	}}
>
  <button type="submit">
    Submit
  </button>
</form>

I'm only getting

{
  "type": "success",
  "status": 200,
  "data": {}
}

[eltigerchino]

Native form submission always navigates to the route specified in the form action attribute. However, use:enhance only navigates to another page if you explicitly throw a redirect in your action in +page.server.js.

You could choose to emulate the navigation to the action route after a successful response with a goto call https://kit.svelte.dev/docs/modules#$app-navigation-goto

<form
  action="/somewhere/else"
  method="post"
	use:enhance={({ formElement, formData, action, cancel }) => {

		return async ({ result }) => {
			// emulate native browser form redirect
			if (result.type === "success") {
				await goto(action);
			}
			await applyAction(result);
		};
	}}
>
  <button type="submit">
    Submit
  </button>
</form>

[budivoogt]

What wasn't clear to me from the documentation nor the posts I could find online is what the returned response should be from the formaction. I got this form:

<form
	action={formAction}
	method="post"
	use:enhance={() => {
		return async ({ result, update }) => {
			console.log("Form submitted, result: ", result)

			if (result.type === "redirect") {
				goto(result.location)
				update()
			} else {
				console.log("Applying action")
				await applyAction(result)
				update()
			}
		}
	}}

To redirect by returning the following in my +page.server.ts formaction:

export const actions: Actions = {
	deletePost: async ({ locals: { getSession }, request, url }) => {
 

		return redirect(302, url ?? "/")
	}
}

Wanted to share in case anybody runs into the same issue and needs a hint.

[budivoogt]

Oh wow that's gorgeous! Thanks for pointing that out.

I did notice the page isn't reloading after the await applyAction(result) is hit, so I've added update() thereafter to force an update. Is that the right way to force this?

Code now:

<form
	action={formAction}
	method="post"
	use:enhance={() => {
		return async ({ result, update }) => {
			await applyAction(result)
			update()
		}
	}}
>

[eltigerchino]

Yes, that’s because applyAction does not invalidate the data from load. You can recreate it by calling invalidateAll if the result is "success".

if (result.type === 'success') {
	// rerun all `load` functions, following the successful update
	await invalidateAll();
}

applyAction(result);

https://kit.svelte.dev/docs/form-actions#progressive-enhancement-custom-event-listener

[budivoogt]

Thanks. Is there any advantage to calling invalidateAll instead of update?

[eltigerchino]

I suppose calling update and applyAction runs the risk of calling applyAction twice. Calling update already calls applyAction if you’re on the same page as the server action. You can see how update is implemented here

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

Lines 84 to 109 in 4b999c8

	const fallback_callback = async ({
	action,
	result,
	reset = true,
	invalidateAll: shouldInvalidateAll = true
	}) => {
	if (result.type === 'success') {
	if (reset) {
	// We call reset from the prototype to avoid DOM clobbering
	HTMLFormElement.prototype.reset.call(form_element);
	}
	if (shouldInvalidateAll) {
	await invalidateAll();
	}
	}
	// For success/failure results, only apply action if it belongs to the
	// current page, otherwise `form` will be updated erroneously
	if (
	location.origin + location.pathname === action.origin + action.pathname ||
	result.type === 'redirect' ||
	result.type === 'error'
	) {
	applyAction(result);
	}
	};

[budivoogt]

Thanks. I'm using this form in a component which calls the formAction from different routes too. In that situation, is invoking both applyAction(result) and update() sensible?

I'm running into a different issue -- now that my formAction is redirecting instead of returning an object, I can't get a toast on my page to trigger when I delete a post (this is for a blog project). I previously returned the id of the post that I'd deleted. Is there any way to still return something that updates the form actionData? See how I'd previously integrated this below:

export let form: ActionData

	$: if (form?.success && form?.deletedPost) {
		toast.success(`Post deleted, id: ${form.deletedPost.id}`)
	}