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,
  };
}

[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

[Shahriar-Shakil]

@santidalmasso Thanks a lot. BTW, I'm using JWT tokens to fetch data from a Node.js application. How can I create a global fetch instance with a bearer token in a Next.js app router? Can you provide any references?

[jessicarush]

I really liked this solution and had been using it for over a year in my Next 14/React 18 project however, it no longer works since I've upgraded to Next 15/React 19.

[matt-wigg]

I really liked this solution and had been using it for over a year in my Next 14/React 18 project however, it no longer works since I've upgraded to Next 15/React 19.

useActionState is different to useFormState in react 19 - https://www.youtube.com/watch?v=KhO4VjaYSXU&t=261s

[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?

[kirasiris]

Yeah, everyone here pretty much is using the client side and I do need it on the Server side as well.

Having it to transform thousands of files to the client side does not sound too attractive.

[lam-valamorgulis]

'use client'
import { useRef } from "react";
import { addTodo } from "../actions/addTodo";

function TodoForm() {
  const ref = useRef<HTMLFormElement>(null);

  return (
    <form
      ref={ref}
      action={async (formData) => {
        await addTodo(formData);
        ref.current?.reset();
      }}
    >
      <input
        type="text"
        placeholder="Enter your task here"
        name="todo"
      />
      <input name="isDone" type="checkbox" hidden />

      <button>
        <svg
          width="24"
          height="24"
          viewBox="0 0 24 24"
          stroke-width="2"
          stroke="currentColor"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
          type="submit"
        >
          <path stroke="none" d="M0 0h24v24H0z" />
          <circle cx="12" cy="12" r="9" />
          <line x1="9" y1="12" x2="15" y2="12" />
          <line x1="12" y1="9" x2="12" y2="15" />
        </svg>
        <span>Add</span>
      </button>
    </form>
  );
}

export default TodoForm;

and action

"use server";
import { revalidatePath } from "next/cache";

export async function addTodo(formData: FormData) {
  const rawFormData = {
    content: formData.get("todo"),
    date: new Date().toISOString(),
    isDone: formData.get("isDone") === "on" ? "true" : "false",
  };

  await fetch("http://localhost:8000/todos/add", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(rawFormData),
  });
  formData.set("todo", " ");
  revalidatePath("/");
}

[FleetAdmiralJakob]

Could you please format your code better? https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax

[alanmoo]

I was running into this issue and using onSubmit on the form (along with the action prop for the server action) allows me to reset state just fine, while still supporting JS-free form submission if needed. It feels like a totally reasonable long term solution, unless I'm completely missing something. I wrote up my learnings here.

[youyoumu]

This is my solution

'use client'

import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'
import { createMessage } from '@/lib/actions'
import { useState } from 'react'

export function NewMessageForm({
  serverId,
  channelId
}: {
  serverId: string
  channelId: string
}) {
  const [content, setContent] = useState('')

  return (

    // add `onSubmit={() => setContent('')` to form element
    <form action={createMessage} onSubmit={() => setContent('')}>
      <div className="flex gap-2 p-2">
        <input type="text" name="serverId" value={serverId} hidden readOnly />
        <input type="text" name="channelId" value={channelId} hidden readOnly />
        <Input
          name="content"
          value={content}
          onChange={(e) => setContent(e.target.value)}
        />
        <Button type="submit">Submit</Button>
      </div>
    </form>
  )
}

[FleetAdmiralJakob]

This does not include error or success states

[uigywnkiub]

In next.js 14.2 this is already fixed.

[FleetAdmiralJakob]

How? What did they do in order to fix this?

[kirasiris]

They're talking about resetting the form without the need of importing a client component.

[kirasiris]

@FleetAdmiralJakob , they have not fixed it yet. I just downloaded the most recent NextJS version today morning and I'm still unable to reset without having to use a client component....makes no sense!.

[uigywnkiub]

"use server"
export async function create(userId: TUserId, formData: FormData) {
  if (!userId) return;
  const newTransaction: TTransaction = {
    userId,
    description: formData.get("description") as string,
   ...
  };
  try {
    await dbConnect();
    ...
    revalidatePath("/");
  } catch (error) {
    console.error(error);
    throw error;
  }
}

IDK, but it works for me.

[nicksergeant]

We have a custom Form component that uses a ref to reset the form with the native HTMLFormElement: reset(), but only if the server action returns a success.

Our component also handles the aria-live message as well.

Form.tsx

import { useEffect, useRef } from 'react';

export default function Form({
  action,
  children,
  className,
  state,
  ...rest
}: {
  action: any;
  children: React.ReactNode;
  className?: string;
  state: any;
  rest?: React.HTMLProps<HTMLFormElement>;
}) {
  const formRef = useRef<HTMLFormElement>(null);

  useEffect(() => {
    if (state.success) {
      formRef?.current?.reset();
    }
  }, [state.success]);

  return (
    <form action={action} className={className} ref={formRef} {...rest}>
      {children}
      <p aria-live="polite" className="sr-only" role="status">
        {state?.message}
      </p>
    </form>
  );
}

Example usage

'use client';

import Form from '@/components/Form';
import { createBetaUser } from '@/app/auth/actions';
import { Field, Label } from '@/components/catalyst/fieldset';
import { initialFormState } from '@/lib/constants';
import { Input } from '@/components/catalyst/input';
import { useEffect } from 'react';
import { useFormState } from 'react-dom';

export default function BetaSignup() {

  const [state, action] = useFormState(createBetaUser, initialFormState);

  useEffect(() => {
    if (state.success) {
      // Do something that will only fire once on every unique success response.
    }
  }, [state.success]);

  return (
    <Form state={state} action={action}>
      <Field>
        <Label>Email</Label>
        <Input
          name="email"
          placeholder="[email protected]"
          required
          type="email"
        />
      </Field>
    </Form>
  );
}

Server action

export async function createBetaUser(
  _prevState: {
    status: string;
    message?: string;
  },
  formData: FormData
) {
    // ... do stuff.
    return {
      success: new Date().getTime(), // Providing a unique identifier here is important to allow the React component to respond to a changing `success` value.
      message: 'good',
    };
}

[Alatr]

nice example

[nicksergeant]

We've made changes to this format to use a unique ID for the success state in the server action response, and I've updated all of the examples here. This approach is much more useful since it will now handle multiple success responses in a row as the success identifier will change each time.

This allows you to also respond to the server action success response so you can do things on the client - in our case, sending tracking / analytics data when someone successfully submits the form.

[james-kaguru]

I coincedentally came to the same conclusion @nicksergeant ..good work and I absolutely love the extraction of the foorm component..makes it much easier to work with

[james-kaguru]

I coincedentally came to the same conclusion @nicksergeant ..good work and I absolutely love the extraction of the form component..makes it much easier to work with

[GVALFER]

Try this method

const Page = () => {
    const [resetKey, setResetKey] = useState(0);

    const submit = async (formData) => {
        await handleSubmit(formData);
        setResetKey((prev) => prev + 1);
    };

    return (
        <div>
            <form key={resetKey} action={submit}>
                <input name="myinput" type="text" />
            </form>
        </div>
    );
};

[Arshiash80]

This question has been around for a while, but I noticed there are multiple approaches to handling this situation. I wanted to share my method of resetting form inputs after a server action mutation.

As highlighted in the Next.js documentation, I leverage useFormState to pass the initial state and handle the state returned from the server action.

Here’s an example of how to achieve this using TypeScript:

Example of a client component

import { useFormState } from "react-dom";
import { useEffect, useRef, useState } from "react";
import ExampleSubmitButton from "@/components/example-submit-button";
import exampleAction, {
	IMyInitialState, // Interface to define the initial state
} from "../_actions/example-action";

const initialState: IMyInitialState = {
	errors: undefined,
	success: undefined,
};

const MyClientComponent = () => {
	// Passing the initial state and action to useFormState
	const [state, formAction] = useFormState(exampleAction, initialState);
	
	// Additional state controlled by the result of the server action
	const [showSuccessDialog, setShowSuccessDialog] = useState(false);
	const [buttonState, setButtonState] = useState<"idle" | "success" | "error">("idle");

	// Ref to the form, used to clear the form fields upon success
	const formRef = useRef<HTMLFormElement>(null);
	const clearForm = () => {
		if (formRef.current) {
			formRef.current.reset();
		}
	};

	// Effect hook to handle action state changes
	useEffect(() => {
		if (state?.errors) {
			setButtonState("error");
			return;
		}
		if (state?.success) {
			setShowSuccessDialog(true);
			setButtonState("success");
			clearForm();
		}
	}, [state?.errors, state?.success]);

	return (
		<div>
			<form ref={formRef} action={formAction} className="space-y-4 mb-8">
				{/* ----- Form fields go here ------ */}
				<ExampleSubmitButton
					type="submit"
					idle="Idle state title"
					setState={setButtonState}
					state={buttonState}
					success="Success state title"
					error="Error state title"
				/>
			</form>
			<SuccessDialog
				isDialogOpen={showSuccessDialog}
				setIsDialogOpen={setShowSuccessDialog}
			/>
		</div>
	);
}

Example of the server action used by the client component

'use server';

export interface IMyInitialState {
	// Structure your initial state as needed
	errors?: { 
		global?: string[] // Global errors (e.g., 500 status)
		email?: string[]  // Field-specific errors
		name?: string[]
		message?: string[]
	},
	success?: boolean  // Action status
}

const exampleAction = async (_: IMyInitialState, formData: FormData): Promise<IMyInitialState> => {
	try {
		// Your action logic here...
		await new Promise((resolve) => setTimeout(resolve, 1000));

		return {
			errors: undefined,
			success: true,
		};
	} catch {
		return {
			errors: {
				global: ['An error occurred.'],
			},
			success: false,
		};
	}
}

export default exampleAction;

Key Points:

1. Managing form state: useFormState helps handle form (errors or success).
2. Reacting to changes: useEffect watches the action state to either reset the form on success or show errors.
3. Clearing the form: The formRef lets us clear the form after a successful submission.

[cbratschi]

Here is a solution for the Next.js Form component:

https://nextjs.org/docs/app/api-reference/components/form

'use client';

import React, { type ReactNode } from 'react';
import Form from 'next/form';

/**
 * Search form properties.
 */
interface SearchFormProps {
    /**
     * Search URL.
     */
    searchUrl: string

    children: ReactNode
}

/**
 * Search form.
 *
 * @param param0
 */
export default function SearchForm({
    searchUrl,
    children
}: SearchFormProps) {
    /**
     * Reset the form state e.g. clear all input fields.
     *
     * @param event
     */
    const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
        //reset form
        const form = event.currentTarget;

        //Note: using timer because Next.js needs the values first
        setTimeout(() => {
            form.reset();

            //debug
            //console.log('Search form reset.');
        }, 100);
    };

    return (
        <Form action={searchUrl} onSubmit={handleSubmit}>
            {children}
        </Form>
    );
}

[AndreiRadchenko]

Looks like you need to use onSubmit to reset form and action to perform action in parallel

[devdatkumar]

This is a wrong logic!, better condition the form data, and then reset accordingly.

        setTimeout(() => {
            form.reset();

            //debug
            //console.log('Search form reset.');
        }, 100);

how about this:

const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault(); // prevent default behavior if needed

    const form = event.currentTarget;
    const formData = new FormData(form);


if (formData or "some other logic") { // condition like this, the timer is uncertain, sometimes data may take more than 100ms!
    form.reset();
}
return;
};