Next.js Discord

Discord Forum

Reset form field value on successful submit (don't on errors) server actions

Unanswered
Nebelung posted this in #help-forum
Open in Discord
NebelungOP
Hey 🤖🤖🤖🤖
Currently the code resets the password fields of the form on every submit. I want to reset only on succesfull submit but i don't know hooooow...

My password form
'use client';
export default function PasswordForm() {
  const initialState = { message: '', error: false };
  const { pending } = useFormStatus();
  const [state, formAction] = useFormState(
    updatePasswordInAccountForm,
    initialState
  );
  const formRef = useRef<HTMLFormElement>(null);

  return (
    <Card
      title="Update password"
      description="Please enter your new password."
      footer={
        <div >
          <Button
            variant="slim"
            type="submit"
            loading={pending}
            form="passwordUpdateForm"
          >
            Update Password
          </Button>
        </div>
      }
    >
      <div >
        <form
          noValidate={true}
          id="passwordUpdateForm"
          className="mb-4"
          ref={formRef}
          action={async (formData) => {
            await formAction(formData);
            formRef.current?.reset();
          }}
        >
          <div >
            <div >
              <label htmlFor="password">New Password</label>
              <input
                id="password"
                placeholder="Password"
                type="password"
                name="password"
                autoComplete="current-password"
                
              />
              <label htmlFor="passwordConfirm">Confirm New Password</label>
              <input
                id="passwordConfirm"
                placeholder="Password"
                type="password"
                name="passwordConfirm"
                autoComplete="current-password"
              />
            </div>
          </div>
        </form>
      </div>
    </Card>
  );
}

6 Replies

NebelungOP
And the server action looks like this:
export async function updatePasswordInAccountForm(
  prevState: any,
  formData: FormData
) {
  const password = String(formData.get('password')).trim();
  const passwordConfirm = String(formData.get('passwordConfirm')).trim();

  if (password !== passwordConfirm) {
    return { error: true, message: 'Passwords do not match.' };
  }

  const supabase = createClient();

  const { error, data } = await supabase.auth.updateUser({ password });

  if (error) {
    return { error: true, message: error.message };
  }

  if (data.user) {
    return { success: true, message: 'Your password has been updated.' };
  }

  // Fallback error message
  return { error: true, message: 'Hmm... Something went wrong.' };
}
NebelungOP
Please 💌
jason
You can use the value state from the useFormState hook to keep track of successes which you are by returning success in your server action.

You could use useEffect and have put state.success in the dependency array.

If success -> reset form
American black bear
Thanks @jason I had this issue also and this is a nice solution.

Is it not weird that there is no recommended way of doing this?
NebelungOP
Thank you @jason . It solved the problem 🙂