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
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:
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:
----------------------<@454649036289343500> kapa.ai is still learning and improving, please let us know how it did by reacting below
magic-beige•8mo 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)
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:
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:
----------------------<@454649036289343500> kapa.ai is still learning and improving, please let us know how it did by reacting below