Form clearing on submit in Next.js

[that-jeannie]

Ok, I may not understand the true purpose of the revalidatePath function.

I am trying to clear a form’s fields after the form is submitted, but using revalidatePath in a Server Actions file has no effect - nothing happens.

The actions are imported into the form, which is then imported into a page. Also, the form successfully sends the data to my Vercel Postgres store.

How can I get the form to actually reset (clear the fields) after submission?

/actions/actions.js file I’m testing with:

"use server"

import prisma from "/lib/prisma"
import { revalidatePath } from "next/cache";

export async function createRando(formData) {
    await prisma.InternetRando.create({
        data: {
            rando_name: formData.get('name'),
            rando_email: formData.get('email'),
            rando_message: formData.get('message'),
        }
    });

    revalidatePath('/contact', 'page')
}

Thanks for any guidance!

[amyegan]

Hi @that-jeannie! If I understand you correctly, the goal is to clear form data on the page rather than to rebuild a cached page for all visitors. In that case revalidatePath would not the right tool for the job.

You can find relevant info about forms and server actions in the Next.js docs. You can also find some potential solutions posted here: How to reset form input after server action mutation ? · vercel/next.js · Discussion #58448 · GitHub.