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]

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}`)
	}

[tomprimozic]

yeah I'm struggling with the same issues.

Looks like this part of SvelteKit is just broken. As in, the official implementation has a bug that they claim is a feature.

It's not a feature. It's a bug.

A form with use:enhance should work the same way as a form without use:enhance, just without a page reload.

Currently, you can either redirect, or render data (on the same page), but you cannot do both (render data on a different page), like you can without use:enhance.

I hope they fix this ASAP. This is the danger of using frameworks instead of libraries... as soon as you want something different, you just can't do it!

[SteelAlloy]

Is there already an issue on the subject?
Otherwise it will never be fixed

[tomprimozic]

no idea. documentation is sparse... even finding this discussion took me a while!

[eltigerchino]

You'll need to use URL search params to serialise state when redirecting. I'm not sure if there's another way to redirect a browser to a different URL and return data at the same time.

You'll need a flag or some data in the URL search param such as a user id, etc. Then, load data in the load function using the search param value.