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.