rising-crimson•7mo ago

How to disable the submit button after clicking it, and restore it when submits fails?

Hi, I'm using Ant Design to build a very complicated form. However when I click the submit button (both on edit and create pages), it's very slow. I want to make sure after user clicks save, it can disable the save button to avoid duplicated submissions. Is there any way to do that with Refine?

5 Replies

kapa.ai•7mo ago

Hi @Eric Hu. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Refine provides a saveButtonProps property that you can use to customize the save button in both <Edit> and <Create> components. This property contains the props needed by the "submit" button. When saveButtonProps.onClick is called, it triggers form.submit(). You can manually pass these props to your custom button. Here is an example of how you can use it:

import { Edit, Create } from "@refinedev/antd";  

const PostEdit: React.FC = () => {  
 return (  
 <Edit saveButtonProps={{ size: "small", disabled: true }}>  
 <p>Rest of your page here</p>  
 </Edit>  
 );  
};  

const PostCreate: React.FC = () => {  
 return (  
 <Create saveButtonProps={{ size: "small", disabled: true }}>  
 <p>Rest of your page here</p>  
 </Create>  
 );  
};

import { Edit, Create } from "@refinedev/antd";  

const PostEdit: React.FC = () => {  
 return (  
 <Edit saveButtonProps={{ size: "small", disabled: true }}>  
 <p>Rest of your page here</p>  
 </Edit>  
 );  
};  

const PostCreate: React.FC = () => {  
 return (  
 <Create saveButtonProps={{ size: "small", disabled: true }}>  
 <p>Rest of your page here</p>  
 </Create>  
 );  
};

In this example, the disabled prop is set to true, which will disable the button. You can set this prop to false when the submission fails to enable the button again. For more information, refer to the <SaveButton> documentation (https://refine.dev/docs/ui-integrations/ant-design/components/buttons/save-button/). Please note that the actual implementation of disabling the button after click and enabling it when submission fails depends on your application's state management and error handling logic. The provided information is based on the extracted content and may require additional steps not covered in the extracts. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

<@454649036289343500> kapa.ai is still learning and improving, please let us know how it did by reacting below

rising-crimson•7mo ago

@kapa.ai No, I don't want to disable the button entirely. But disable it after user clicks the save button, and before receiving any response from the server (validation)

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Refine provides a useForm hook that exposes saveButtonProps to be passed to the <SaveButton> component. This includes submitting the form action, button loading, and disable states. Here is an example of how you can use it:

import { Edit, useForm } from "@refinedev/antd";  
import { Form, Input } from "antd";  
  
const PostEdit: React.FC = () => {  
 const { formProps, saveButtonProps } = useForm<IPost>();  
  
 return (  
 <Edit saveButtonProps={saveButtonProps}>  
 <Form {...formProps} layout="vertical">  
 <Form.Item  
 label="Title"  
 name="title"  
 rules={[  
 {  
 required: true,  
 },  
 ]}  
 >  
 <Input />  
 </Form.Item>  
 </Form>  
 </Edit>  
 );  
};  
  
interface IPost {  
 id: number;  
 title: string;  
}

import { Edit, useForm } from "@refinedev/antd";  
import { Form, Input } from "antd";  
  
const PostEdit: React.FC = () => {  
 const { formProps, saveButtonProps } = useForm<IPost>();  
  
 return (  
 <Edit saveButtonProps={saveButtonProps}>  
 <Form {...formProps} layout="vertical">  
 <Form.Item  
 label="Title"  
 name="title"  
 rules={[  
 {  
 required: true,  
 },  
 ]}  
 >  
 <Input />  
 </Form.Item>  
 </Form>  
 </Edit>  
 );  
};  
  
interface IPost {  
 id: number;  
 title: string;  
}

In this example, saveButtonProps is passed to the <SaveButton> component. When the form is being submitted, the button will be in a loading state and will be disabled to prevent duplicate submissions. Once the submission is complete or fails, the button will be enabled again. For more information, refer to the <SaveButton> documentation (https://refine.dev/docs/ui-integrations/ant-design/components/buttons/save-button/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

<@454649036289343500> kapa.ai is still learning and improving, please let us know how it did by reacting below