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.

[hanszoons]

I have found another solution. The use case is slightly different but similar. I have a single-button form in +layout.svelte, with page actions in a separate +page.server.js. The buttons can be pressed from any child route. Without JavaScript, the actions should redirect to where the action originated. With JavaScript enabled, the default use:enhance behavior makes a redirect unnecessary (or would require custom logic, as mentioned above) as it is already handled.

// /any/path/anywhere/+page.server.js
export const actions  = {
	some_action: async ({ request }) => {
	 	// do stuff
	 	// error path
	
		const data = await request.formData();
		const redirect_path = data.get('redirect-path');

		if (redirect_path) {
			// redirect THROWS so no further handlers are needed
			redirect(303, String(redirect_path));
		}
		
		// return path on succes 
	},
};

and (anywhere basically):

<script >
	import { browser } from '$app/environment';
	import { enhance } from '$app/forms';
	import { page } from '$app/state';
</script>

<form method="POST" action="/any/path/anywhere?/some_action" use:enhance>
	{#if !browser}
		<input type="hidden" name="redirect-path" value={page.url.pathname} />
	{/if}
	<button type="submit">Do something</button>
</form>

The idea is simple: redirect_path will be removed on hydration if JS is enabled.
This is not a perfect solution, as this absolutely requires forms to be use:enhanced. But it at least solved my simple 'single button' use case.