apparent-cyan
apparent-cyan4w ago

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
kapa.ai
kapa.ai4w ago
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
kapa.ai4w ago
<@490961337896402944> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
apparent-cyan
apparent-cyanOP4w ago
@kapa.ai I am making use of const {mutate: register} = useRegister();
kapa.ai
kapa.ai4w 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
kapa.ai4w ago
<@490961337896402944> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
apparent-cyan
apparent-cyanOP4w ago
bruh @contributor is this actually possible because kapa is making stuff up