Is it possible to use multiple forms in the same page?

[vasco3]

I wonder if I could add multiple forms in the same page

[smeijer]

Hi,

Yes, that is certainly possible. So depending on your need, you could either modify the form action, so that the form on the page points to a different backend handler. Or maybe just the same handler, but with a query arg, like:

import { handle, json } from "next-runtime";
import { Form, useFormSubmit } from "next-runtime/form";

export const getServerSideProps = handle({
  async get() {
    return json({ some: "data" });
  },

  async post({ query, req: { body } }) {
    if (query.action === 'create') { ... }
    if (query.action === 'update') { ... }
  }
});

export default function Home() {
  return (
    <div>
      <Form method="post" action="?action=create">
        <button type="submit">Create</button>
      </Form>
      <Form method="post" action="?action=update">
        <button type="submit">Update</button>
      </Form>
    </div>
  );
}

An alternative to this pattern is to add a hidden input stating the action:

import { handle, json } from "next-runtime";
import { Form, useFormSubmit } from "next-runtime/form";

export const getServerSideProps = handle({
  async get() {
    return json({ some: "data" });
  },

  async post({ req: { body: { __action, ...values } } }) {
    switch (__action) {
      case "create":
        return json({ ok: true });
      case "delete":
        return json({ ok: true });
      default:
        return json({ ok: true });
    }
  }
});

export default function Home() {
  const {
    isSubmitting,
    values: { __action }
  } = useFormSubmit();

  return (
    <div>
      <Form method="post">
        <input type="text" name="value" />
        <input type="hidden" name="__action" value="create" />
        <button type="submit">
          {isSubmitting && __action === "create" ? "creating..." : "Create"}
        </button>
      </Form>

      <hr />

      <Form method="post">
        <input type="hidden" name="__action" value="delete" />
        <button type="submit">
          {isSubmitting && __action === "delete" ? "deleting..." : "Delete"}
        </button>
      </Form>
    </div>
  );
}

I realize that we currently do not support named buttons. I've created #60 for that, and will get on that asap. In my opinion, that would be the cleanest solution to support multiple actions on a single route.

<Form method="post">
    <button type="submit" name="__action" value="add-comment">Add Comment</button>
</Form>

Note that if you're dealing with CRUD for a single entity, you might also want to use the different method handlers, so that the requests map to clean API URLs as well.

import { handle, json } from "next-runtime";
import { Form, useFormSubmit } from "next-runtime/form";

export const getServerSideProps = handle({
  async get() {
    return json({ some: "data" });
  },

  async post({ req: { body } }) { }
  async put({ req: { body } }) { }
  async delete({ req: { body } }) { }
});

export default function Home() {
  return (
    <div>
      <Form method="post">
        <input type="hidden" name="id" value="{id}" />
        <input type="text" name="value" />
        <button type="submit">Create</button>
      </Form>

      <hr />

      <Form method="put">
        <input type="hidden" name="id" value="{id}" />
        <input type="text" name="value" />
        <button type="submit">Update</button>
      </Form>

      <hr />

      <Form method="delete">
        <input type="hidden" name="id" value="{id}" />
        <button type="submit">Delete</button>
      </Form>
    </div>
  );
}

[vasco3]

I saw that Remix suggests the value buttons, good thing that you are going to add support for that!

I wonder if is there any downside of using the form action with a query string

[smeijer]

We now also support the name attribute on buttons. Released with https://github.com/smeijer/next-runtime/releases/tag/v2.4.0 and documented here: https://next-runtime.meijer.ws/faq/multiple-forms-on-a-page 🙂