do not reset fields on submit

How can I stop refine from resetting all fields on submit at the login and register forms

6 Replies

Hi @BlackBearFTW. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To prevent refine from resetting all fields on submit, you can use the autoResetForm property. By default, this property is set to true, which means the form will reset after a successful submit. You can set it to false to stop this behavior. Here's how you can configure it:

const modalForm = useModalForm({  
  autoResetForm: false,  
});

const modalForm = useModalForm({  
  autoResetForm: false,  
});

This configuration will ensure that the form does not reset automatically after submission. You can find more details about this property in the documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form/#autoresetform). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

<@490961337896402944> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

genetic-orange•4d ago

@kapa.ai I am making use of const {mutate: register} = useRegister();

kapa.ai•4d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To prevent the form fields from resetting when using the useRegister hook, you need to modify the form submission logic to avoid calling e.currentTarget.reset() after the register mutation. Here's an example based on the provided knowledge sources:

import React from "react";
import { useRegister } from "@refinedev/core";

export const RegisterPage = () => {
    const { mutate: register } = useRegister();

    const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();

        // get form data
        const formData = Object.fromEntries(
            new FormData(e.currentTarget).entries(),
        );

        // call register mutation
        register(formData);

        // Do not reset form data
        // e.currentTarget.reset(); // Remove or comment out this line
    };

    return (
        <div>
            <h1>Register</h1>
            <form onSubmit={(e) => onSubmit(e)}>
                <input
                    type="email"
                    placeholder="email"
                />
                <button type="submit">Submit</button>
            </form>
        </div>
    );
};

import React from "react";
import { useRegister } from "@refinedev/core";

export const RegisterPage = () => {
    const { mutate: register } = useRegister();

    const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();

        // get form data
        const formData = Object.fromEntries(
            new FormData(e.currentTarget).entries(),
        );

        // call register mutation
        register(formData);

        // Do not reset form data
        // e.currentTarget.reset(); // Remove or comment out this line
    };

    return (
        <div>
            <h1>Register</h1>
            <form onSubmit={(e) => onSubmit(e)}>
                <input
                    type="email"
                    placeholder="email"
                />
                <button type="submit">Submit</button>
            </form>
        </div>
    );
};

By removing or commenting out the e.currentTarget.reset(); line, the form fields will not reset after submission. This approach allows you to maintain the form state as needed. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

<@490961337896402944> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

genetic-orange•4d ago

bruh @contributor is this actually possible because kapa is making stuff up