How to reset form input after server action mutation ?

[indrazm]

Summary

Hey,
How to clear / reset input after server mutation ?

I don't see any tutorial or so.
Please help.

Many Thanks!

Additional information

No response

Example

No response

[icyJoseph]

Code example? Forms have a reset method, or you could alternatively have a button with type "reset", but without a code example, it is a bit hard to guide you in the right direction.

[manuelgutierrezchaves]

I have the same question, this is my code:

import {unstable_setRequestLocale} from 'next-intl/server';
import { getTranslations } from 'next-intl/server';
import prisma from '@/lib/prisma';
import { optional, z } from 'zod';

const schema = z.object({
  name: z.string(),
  lastname: z.string()
})

interface OwnersPageParams {
  params: {
    locale: string;
  };
}

export default async function OwnersPage({
  params: {locale}
}: OwnersPageParams) {
  unstable_setRequestLocale(locale);
  const t = await getTranslations('Home');

  async function addOwner(formData: FormData) {
    'use server'
    const parsedOwner = schema.parse({
      name: formData.get('name'),
      lastname: formData.get('lastname'),
    })
    await prisma.owner.create({
      data: parsedOwner
    })
  }

  return (
    <form action={addOwner} className='border'>
      <input type='text' name="name" className='border' />
      <input type='text' name="lastname" className='border' />
      <button type='submit'>Add User</button>
    </form>
  )
}

[andymcgunagle]

Trying to figure out the same thing and not finding anything in the docs.

There's no reset method on FormData at the moment.

Using the latest version of next (currently 14.0.3).

import { revalidatePath } from "next/cache";
import { sql } from "@vercel/postgres";

import SubmitButton from "./SubmitButton";

export default function InsertUser() {
  async function handleSubmit(formData: FormData) {
    "use server";

    try {
      const firstName = formData.get("firstName")?.toString();
      const lastName = formData.get("lastName")?.toString();

      if (!firstName || !lastName) throw new Error("First name and last name are required.");

      await sql`
        INSERT INTO users
          ("firstName", "lastName")
        VALUES
          (${firstName}, ${lastName})
      `;

      // Is there any way to reset the inputs?
      // Property 'reset' does not exist on type 'FormData'.
      formData.reset();

      revalidatePath("/");
    } catch (error) {
      console.error(error);
    };
  };

  return (
    <form
      action={handleSubmit}
    >
      <input
        name="firstName"
        placeholder="First name..."
        required={true}
        type="text"
      />
      <input
        name="lastName"
        placeholder="Last name..."
        required={true}
        type="text"
      />
      <SubmitButton />
      <button
        type="reset"
      >
        Reset
      </button>
    </form>
  );
};

[rgaladyk-creatuity]

You can use createRef(). Example below works for me.

const handleSubmitServerAction = async (formData: FormData):boolean => {
    'use server';
    try{...}
    return true/false;
}


const ref = createRef<HTMLFormElement>();

const handleSubmitClient = async (formData: FormData) => {
    const response = await handleSubmitServerAction(formData);
    if ( response){
        // success
        ref.current.reset()
    }else{
        // fail
    }
}

<form ref={ref} action={handleSubmitClient}
    ...
</form>

[FleetAdmiralJakob]

Any new things anybody found here? I want to be able to reset the form in my server component.

[rgaladyk-creatuity]

@FleetAdmiralJakob please check my comment. It's a client component combined with server action => #58448 (reply in thread)

[FleetAdmiralJakob]

You can't use ref inside of server components right? I want a solution inside of server components.

[FleetAdmiralJakob]

This is the error I get using your code in a server component.

I want a solution that works inside of my server component.

[FleetAdmiralJakob]

Nevermind.

As mentioned in the video of Lee Robinson (at around minute 18) https://www.youtube.com/watch?v=8DyzsSWNcDE&ab_channel=LeeRobinson we lose nothing if we use a client component instead of a server component so it makes sense to make the form a client component.

[supriome]

https://react.dev/reference/react-dom/components/form#optimistically-updating-form-data

And if you use Typescript, use this code:

const formRef = useRef<HTMLFormElement>(null);

[FleetAdmiralJakob]

But then my code does not longer work with JS Disabled right?

The goal is to reset the form with JS Enabled and Disabled

[FleetAdmiralJakob]

Hi, besides the JS Disabled thingy.

How can I react to the return value of the function? So I only want to clear the input if everything was successful.

[FleetAdmiralJakob]

I created an issue on the react side since this seems to be an open point.
facebook/react#27876

[hlmifzi]

i get the solution

'use client'

import { useOptimistic, useRef } from "react"
import SubmitButton from "./SubmitButton"
import { post } from "../../services"

export const PostList = ({ users }: { users: any }) => {
  const formRef = useRef<HTMLFormElement>(null);

  const [optimisticUsers, addOptimisticUsers] = useOptimistic(
    users,
    (state, newUsers) => [
      ...state, newUsers
    ]
  );

  const handleAdd = async (formData: FormData) => {
    const newUser = {
      name: formData.get("name") as string
    }

    addOptimisticUsers(newUser)
    await post(`api/v1/user`, newUser)
    formRef.current?.reset()
  }

  return (
    <form action={handleAdd} ref={formRef}>
      <input type="text" name="name" />
      <SubmitButton />
      {optimisticUsers?.map((user: any, i: number) => {
        return (
          <div key={i}>{user.name}{" "}
          {!!users.sending && <small> (Sending...)</small>}
          </div>
        )
      })}
    </form>
  )
}

export default PostList

you can check the full code in my github link

[FleetAdmiralJakob]

But this is not working with JS Disabled, right?

[FleetAdmiralJakob]

And another question: How can you react on different results from the backend? eg.

-> On Success: clear the form
-> On Error: keep the input of the form

[hlmifzi]

i standard in module service, you can check my code

[greatstudentkaze]

@FleetAdmiralJakob have you found the answer to the "On Error" scenario?

[santidalmasso]

Another way to reset the form is by using the prop key. I'm not entirely sure how recommended this approach is, but you can return a new state from the action and then use a key to reset the form. Here's a basic example:

"use client";

import { useFormState } from "react-dom";
import { addPost } from "./actions";

export default function Home() {
  const [state, action] = useFormState(addPost, { error: null });

  return (
    <main>
      <form action={action} key={state?.resetKey}>
        <input type="text" placeholder="Title" name="title" />
        <button>Submit</button>
      </form>
    </main>
  );
}

"use server";

import { redirect } from "next/navigation";

export const addPost = (prevState, formData: FormData) => {
  const title = formData.get("title")?.toString();
  if (!title) {
    return {
      resetKey: prevState.resetKey,
      error: "Title is required",
    };
  }
  
  const post = createPost(title);

  return {
    error: null,
    data: post,
    resetKey: post.id,
  };
};

function createPost(title: string) {
  return {
    id: Date.now(),
    title,
  };
}

[FleetAdmiralJakob]

Seems to work but as it is a hack I think we need a better/official/recommended solution

[matt-wigg]

This was very helpful, thank you. I added another example to facebook/react#27876.

[ctessier]

This approach seems to be approved by the React team: https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key

[adriangalilea]

Thank you for this code @santidalmasso I implemented it here

[PauloJSGG]

Any new solution to this? I have a "use server" form and I can't clear my form. Seems like it should be something trivial right?