SolidJS•2mo ago

Modular Forms with SolidStart

I'm trying to use Modular Forms in my SolidStart application but am unable to get the form to submit. I've had it working before, submitting properly so trying to debug what is causing the issue now. Thank you

export type CreateApplication = {
    title: string;
    company: string;
};

export const addApplication = action(
    async ({ title, company }: CreateApplication) => {
        "use server";
        const userId = await getAuthUser();
        if (!userId) throw redirect("/");

        const [result] = await db
            .insert(application)
            .values({ title: title, company: company, userId })
            .returning();
        return result;
    },
    "add-application",
);

export function CreateForm() {
    const [_, { Form, Field }] = createForm<CreateApplication>();
    const create = useAction(addApplication);

    const handleSubmit: SubmitHandler<CreateApplication> = (values) => {
        console.log("submission");
        create(values);
    };
    const submission = useSubmission(addApplication);

    return (
        <>
          <Form onSubmit={handleSubmit} method="post">
        <Field name="company">
          {(field, props) => (
            <>
             <input {...props} type="text" placeholder="Company" />
             {field.error && <div>{field.error}</div>}
           </>
        )}
        </Field>
        <Field name="title">
        {(field, props) => (
        <>
          <input {...props} type="text" placeholder="title" />
          {field.error && <div>{field.error}</div>}
        </>
        )}
        </Field>
        <button type="submit">Create</button>
          </Form>
        <Show when={submission.error}>
          <p>{submission.error.message}</p>
        </Show>
        </>
    );
}

export type CreateApplication = {
    title: string;
    company: string;
};

export const addApplication = action(
    async ({ title, company }: CreateApplication) => {
        "use server";
        const userId = await getAuthUser();
        if (!userId) throw redirect("/");

        const [result] = await db
            .insert(application)
            .values({ title: title, company: company, userId })
            .returning();
        return result;
    },
    "add-application",
);

export function CreateForm() {
    const [_, { Form, Field }] = createForm<CreateApplication>();
    const create = useAction(addApplication);

    const handleSubmit: SubmitHandler<CreateApplication> = (values) => {
        console.log("submission");
        create(values);
    };
    const submission = useSubmission(addApplication);

    return (
        <>
          <Form onSubmit={handleSubmit} method="post">
        <Field name="company">
          {(field, props) => (
            <>
             <input {...props} type="text" placeholder="Company" />
             {field.error && <div>{field.error}</div>}
           </>
        )}
        </Field>
        <Field name="title">
        {(field, props) => (
        <>
          <input {...props} type="text" placeholder="title" />
          {field.error && <div>{field.error}</div>}
        </>
        )}
        </Field>
        <button type="submit">Create</button>
          </Form>
        <Show when={submission.error}>
          <p>{submission.error.message}</p>
        </Show>
        </>
    );
}

3 Replies

Madaxen86•2mo ago

What happens instead. Does it just stay on the page, redirect, throws error …?

daltonOP•2mo ago

The form clears, stays on the same page and there is no console output from the handleSubmit.

Madaxen86•2mo ago

Try to remove the method. You’ll only need this when you add the action as the form attribute action which is not what you would want with modular forms.

Gaming

Programming

Modular Forms with SolidStart

Did you find this page helpful?