S
SolidJS•2mo ago
dammi

Form submit with SolidStart

Hello everyone, i am following the docs from https://docs.solidjs.com/solid-router/reference/data-apis/action for using a formdata action (server) , but I get the following error. Can anyone point me to the right direction here? 
export const register = action(async (formData: FormData) => {
    "use server";
    
}, "register");
export const register = action(async (formData: FormData) => {
    "use server";
    
}, "register");
const registerAction = useAction(actionApi.register);
const registerAction = useAction(actionApi.register);
<form class = "grid grid-cols-4 gap-4 w-full" action={registerAction} method="post">
<form class = "grid grid-cols-4 gap-4 w-full" action={registerAction} method="post">
Cheers
action -
Documentation for SolidJS, the signals-powered UI framework
No description
6 Replies
Madaxen86
Madaxen86•2mo ago
Can your share more of your code - the implementation of the actions as well as the component and form that uses it?
dammi
dammiOP•2mo ago
Hey, added the code, its the same as shown in the documentation
Madaxen86
Madaxen86•2mo ago
useAction will return the actions as a function which you can use in a eventhandler. If you want to pass it directly to the form in the attribute action you may just pass the action directly actionApi.register in your case
dammi
dammiOP•2mo ago
Wow, thanks for the response, now the error is gone. So does that mean that the Docs are outdated, or did I get sth wrong? Heres the snippet from the docs: 
const deleteTodo = action(async (formData: FormData) => {
  const id = Number(formData.get("id"))
  await api.deleteTodo(id)
})

<form action={deleteTodo} method="post">
  <input type="hidden" name="id" value={todo.id} />
  <button type="submit">Delete</button>
</form>
const deleteTodo = action(async (formData: FormData) => {
  const id = Number(formData.get("id"))
  await api.deleteTodo(id)
})

<form action={deleteTodo} method="post">
  <input type="hidden" name="id" value={todo.id} />
  <button type="submit">Delete</button>
</form>
Madaxen86
Madaxen86•2mo ago
The concepts section shows more examples how to use them https://docs.solidjs.com/solid-router/concepts/actions
Actions -
Documentation for SolidJS, the signals-powered UI framework
dammi
dammiOP•2mo ago
There the same advice: 
import { action, redirect } from "@solidjs/router";

const isAdmin = action(async (formData: FormData) => {
  await new Promise((resolve, reject) => setTimeout(resolve, 1000));

  const username = formData.get("username");

  if (username === "admin") throw redirect("/admin");
  return new Error("Invalid username");
});

export function MyComponent() {

  return (
    <form action={isAdmin} method="post">
      <label for="username">Username:</label>
      <input type="text" name="username" />
      <input type="submit" value="submit" />
    </form>
  );
}
import { action, redirect } from "@solidjs/router";

const isAdmin = action(async (formData: FormData) => {
  await new Promise((resolve, reject) => setTimeout(resolve, 1000));

  const username = formData.get("username");

  if (username === "admin") throw redirect("/admin");
  return new Error("Invalid username");
});

export function MyComponent() {

  return (
    <form action={isAdmin} method="post">
      <label for="username">Username:</label>
      <input type="text" name="username" />
      <input type="submit" value="submit" />
    </form>
  );
}

Did you find this page helpful?