Next.js Discord

Discord Forum

Form does not submit but shows no error

Unanswered
Chinese Alligator posted this in #help-forum
Open in Discord
Chinese AlligatorOP
I'm using Supabase to handle form submissions to update my database. The form was working correctly until I made some changes for data cleanup. I renamed the columns—changing "ISBN" to "isbn" and "authorId" to "author_id"—and deleted over 10 rows directly from the database. Since then, the form no longer submits, yet I’m not seeing any errors on either the client or server side. 

   const [state, action, pending] = useActionState(addBook, undefined);

  //submitting the forms
  async function onSubmit(data: BookInferSchema) {
    try {
      const formData = new FormData();
      Object.entries(data).forEach(([key, value]) => {
        formData.append(
          key,
          value instanceof Date ? value.toISOString() : value.toString()
        );
      });

      //sending the formData to the action.ts for submitting the forms
      const response = (await action(formData)) as {
        error?: string;
        message?: string;
      } | void;

      //Error or success messages for any submissions and any errors/success from the server
      if (response?.error) {
        toast({
          title: "Error",
          description: `An error occurred: ${response.error}`,
        });
      } else {
        form.reset();
      }
    } catch {
      toast({
        title: "Error",
        description: "An unexpected error occured.",
      });
    }
  }


The form part. The console.log does render in the console. 
<Form {...form}>
        <form
          className="space-y-8"
          onSubmit={(e) => {
            e.preventDefault();
            console.log("form submit");
            startTransition(() => {
              form.handleSubmit(onSubmit)(e);
            });
          }}
        >
      </form>
  //other fields
<Form>

7 Replies

Chinese AlligatorOP
My action.ts: 
ts 
//adding a book
export async function addBook(state: BookFormState, formData: FormData) {


  const validatedFields = BookSchema.safeParse({
    ...fields
  });

   // Check if validation failed
   if (!validatedFields.success) {
    console.error("Validation Errors:", validatedFields.error.format()); // Log errors
    return {
      errors: validatedFields.error.flatten().fieldErrors,
    };
  }

 // Prepare for insertion into the new database
 const {isbn, length, width, height, publisher, publicationDate, pages, genre, author_id, signed, format, edition, productLanguage, stocks, title, price, description} = validatedFields.data

  // Insert the new author into the database
  const supabase = createClient();
  const {data, error} = await (await supabase).from('books').insert({isbn, length, width, height, publisher,publicationDate, pages, genre, author_id, signed, format, edition,  productLanguage, stocks, title, price, description});

  if(data){
    console.log(data,"isbn:", isbn,"data in the addBook function")
  }

  
  if (error) {
    return {
      error: true,
      message: error.message,
    };
  }

  revalidatePath('/admin/books');
  
  return {
    error: false,
    message: 'Book updated successfully',
    id: isbn,
  };

}
@Chinese Alligator I'm using Supabase to handle form submissions to update my database. The form was working correctly until I made some changes for data cleanup. I renamed the columns—changing "ISBN" to "isbn" and "authorId" to "author_id"—and deleted over 10 rows directly from the database. Since then, the form no longer submits, yet I’m not seeing any errors on either the client or server side. ts const [state, action, pending] = useActionState(addBook, undefined); //submitting the forms async function onSubmit(data: BookInferSchema) { try { const formData = new FormData(); Object.entries(data).forEach(([key, value]) => { formData.append( key, value instanceof Date ? value.toISOString() : value.toString() ); }); //sending the formData to the action.ts for submitting the forms const response = (await action(formData)) as { error?: string; message?: string; } | void; //Error or success messages for any submissions and any errors/success from the server if (response?.error) { toast({ title: "Error", description: `An error occurred: ${response.error}`, }); } else { form.reset(); } } catch { toast({ title: "Error", description: "An unexpected error occured.", }); } } The form part. The `console.log` does render in the console. ts <Form {...form}> <form className="space-y-8" onSubmit={(e) => { e.preventDefault(); console.log("form submit"); startTransition(() => { form.handleSubmit(onSubmit)(e); }); }} > </form> //other fields <Form>
Dutch
check supabase logs or network tab for form submission. there may be something wrong at request
also check your tables to see if ISBN became isbn like so
Blood cockle
i think brok is on the right path. check your database to see if everything lines up or if you have columns erroring after your changes
Chinese AlligatorOP
@Dutch @Blood cockle There are not errors on the supabase logs or even on the network tab. I tried remove the supabase functions and just left this on the onSubmit function and even then this would not show up in the console 
 ts
async function onSubmit(data: BookInferSchema) {
    console.log("inside the function of onSubmit");

  }
But it does log the console when I click on submit for this part: 
<Form {...form}>
        <form
          className="space-y-8"
          onSubmit={(e) => {
            e.preventDefault();
            console.log("form submitakshdhashdkjad");
            startTransition(() => {
              form.handleSubmit(onSubmit)(e);
            });
          }}
        >
    </form>
</Form>
LuisLl
Can you try 

const onSubmit(…){
  startTransition( () => {
    // here your code
  })
}

…


<form onSubmit={form.handleSubmit(onSubmit)}>