Hono•2mo ago

Nested form objects POST

My form has nested objects and array of objects. I name them as below -

      <form method="post">

          <div class="form-control mb-4">
            <label for="invoiceNumber" class="label">
              <span class="label-text">Invoice Number1</span>
            </label>
            <input id="invoiceHeader.invoiceNumber" name="invoiceHeader.invoiceNumber" ... />
          </div>

      <form method="post">

          <div class="form-control mb-4">
            <label for="invoiceNumber" class="label">
              <span class="label-text">Invoice Number1</span>
            </label>
            <input id="invoiceHeader.invoiceNumber" name="invoiceHeader.invoiceNumber" ... />
          </div>

How can I read them back as json at server side? It all works fine if body has flat structure. Am I missing any middleware

3 Replies

Steven-sensei•2mo ago

Can you provide server side code since it’s the issue ?

anand248OP•2mo ago

Server side code was

export const invoiceFormSchema = z.object({
  invoiceHeader: invoiceSchema,
  items: z.array(invoiceDetailsSchema),
});

export const POST = createRoute(zValidator("form", invoiceFormSchema), async (c) => {
    const data = c.req.valid("form");
...

export const invoiceFormSchema = z.object({
  invoiceHeader: invoiceSchema,
  items: z.array(invoiceDetailsSchema),
});

export const POST = createRoute(zValidator("form", invoiceFormSchema), async (c) => {
    const data = c.req.valid("form");
...

It was failing the zod validation saying no nested object present. I googled more and found that this is where the world abondons the HTML form post https://www.reddit.com/r/webdev/comments/ug13uc/how_can_i_make_post_request_with_nested_form_data/ I also went back to usual way of start sending body as application/json and start calling the server POST manually with fetch.

From the webdev community on Reddit

Explore this post and more from the webdev community

Steven-sensei•2mo ago

Yeah i try to avoid to use form as much as possible and use json most of the time except for files

Gaming

Programming

Nested form objects POST