Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

Sveltekit Form Actions enhance

$
0
0

I have a basic form that I am trying to submit, with no luck.

My main goal is to introduce a modal that has a "Are you sure you would like to submit the form", with a cancel and a submit (external) button that would allow the user pass the details along.

It is a basic form where I'm trying to use form actions to retrieve the values on the backend.

+page.svelte

<div class="base"><form id='myCustomForm' method="POST" action="?/create" use:enhance={createUser}><label>            Name<input type="text" name="name" required /></label><label>            Age<input type="number" name="age" required /></label><button type="submit">Submit</button></form><div class="outsideSubmit"><button type="submit" form="myCustomForm">Outside Submit</button></div></div>

On the server side of things, I have a very basic form using which I'm trying to retrieve the values

+page.server.ts

async function createAction({ request }){    const data = await request.formData().then(res => res.json())    console.log("create:", data)    return { success: true}}export const actions = {    default: createAction,"/create": createAction,"create": createAction} satisfies Actions

However, I keep receiving the following error:

{"type": "error","error": {"message": "POST method not allowed. No actions exist for this page"    },"status": 405}

Everything is at a root-level, so I don't understand why this is an issue. I have a minimum reproducible example CodeSandbox here

Also added a csrf: { checkOrigin: false } to the svelte.config.js

My larger problem is that I am unable to submit the form using the external button. I'm setting the value of the formId dynamically. My guess is that it is not able to find the form from the modal. But trying to solve this problem first.


Viewing all articles
Browse latest Browse all 1541

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>