conscious-sapphire•2y ago

edit page submit

In Edit page, when I submit the data, the value of every field in the form is passing but I only want to submit those fields which I manually edited

6 Replies

kapa.ai•2y ago

Hi @alfaz_muhammed. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In refine, when you submit a form on the Edit page, it automatically sends all the field values to the server. However, if you want to only submit the fields that have been manually edited, you can achieve this by using the onFinish hook provided by refine. The onFinish hook lets you override the save button's default configuration and define what’s sent to the server. The hook accepts an object with properties of each record on the API, to which you can pass custom values. Here's an example:

onFinish({  
 firstName: "",  
 email: "",  
 skills: "",  
});

onFinish({  
 firstName: "",  
 email: "",  
 skills: "",  
});

In this example, only the firstName, email, and skills fields will be sent to the server when the form is submitted. You can use this hook to check which fields have been edited and only include those in the object you pass to onFinish. For more information, refer to this blog post (https://refine.dev/blog/dynamic-forms-in-react-hook-form) on dynamic forms in React Hook Form with refine. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

conscious-sapphireOP•2y ago

@kapa.ai how to check which fields are edited

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To check which fields have been edited, you would need to keep track of the initial form values and compare them with the current form values upon submission. Unfortunately, the provided extracts do not contain specific information or code examples on how to implement this in refine. However, you can generally achieve this by using the watch method from the useForm hook provided by React Hook Form, which is integrated into refine. The watch method allows you to watch specified input/inputs and returns their values. Here's a basic usage of the useForm hook:

const {  
 control,  
 handleSubmit,  
 watch,  
 formState: { errors },  
} = useForm({  
 mode: "onChange",  
 defaultValues,  
});

const {  
 control,  
 handleSubmit,  
 watch,  
 formState: { errors },  
} = useForm({  
 mode: "onChange",  
 defaultValues,  
});

You can use the watch method to keep track of the current form values. By comparing these values with the initial form values, you can determine which fields have been edited. For more detailed information, you may want to refer to the React Hook Form documentation (https://react-hook-form.com/get-started) and the refine documentation (https://refine.dev/docs/packages/documentation/react-hook-form/useForm). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

automatic-azure•2y ago

Hey @alfaz_muhammed, You can check out this: https://refine.dev/docs/faq/#how-can-i-change-the-form-data-before-submitting-it-to-the-api

edit page submit

Did you find this page helpful?