Passing Variables on Form Submit?
Hello!
I'd like to pass the ID of the user (as well as other variables) alongside a form submission.
I've been using an empty Form.Item temporarily, but it's been bothering me immensely (as well as giving me issues with, for example, edit forms with a field of the same name).
How could I add additional entries to the data a user submits in their form?
9 Replies
Hi @avangeous. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
You can modify the form data before it is sent to the API by using the
onFinish
function from the useForm
hook provided by Refine. This function is called when the form is submitted and it receives the form data as its argument. You can then modify this data as needed before sending it to the API.
Here's an example of how you can do this:
In this example, the onFinishHandler
function is modifying the form data to include an id
field before it is sent to the API. You can add as many additional entries as you need in this way.
For more information, you can refer to the useForm documentation (https://refine.dev/docs/packages/documentation/react-hook-form/useForm).
Please note that this is a general example and you might need to adjust it according to your specific needs and the structure of your form and API.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@1122927158348763206> kapa.ai is still learning and improving, please let us know how it did by reacting below
secure-lavender•14mo ago
@kapa.ai Is there a way for me to set a default value in a form input, if formProp's initialValue for the item is empty?
Let me check the knowledge base for you. One moment! :books:
----------------------
Yes, you can set a default value for a form input in Refine. This can be done by using the
defaultValue
property in the hooks provided by Refine such as useAutocomplete
, useCheckboxGroup
, useSelect
, and useRadioGroup
.
For example, in useAutocomplete
, you can set a default value like this:
In useCheckboxGroup
, useSelect
, and useRadioGroup
, you can also set a default value:
In useModalForm
, you can set initial values for the form:
These hooks will ensure that the default value is included in the options, even if it's not present in the current visible options.
For more information, you can refer to the following documentation:
- useAutocomplete
(https://refine.dev/docs/api-reference/mui/hooks/useAutocomplete)
- useCheckboxGroup
(https://refine.dev/docs/api-reference/antd/hooks/field/useCheckboxGroup)
- useSelect
(https://refine.dev/docs/api-reference/antd/hooks/field/useSelect)
- useRadioGroup
(https://refine.dev/docs/api-reference/antd/hooks/field/useRadioGroup)
- useModalForm
(https://refine.dev/docs/api-reference/mantine/hooks/form/useModalForm)
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@1122927158348763206> kapa.ai is still learning and improving, please let us know how it did by reacting below
secure-lavender•14mo ago
@kapa.ai It seems like it's still overwrittened when the formProps' initialValue has a null value for the value.
Let me check the knowledge base for you. One moment! :books:
----------------------
If the
initialValue
from formProps
is null
, it will override the defaultValue
you set. This is because initialValue
has a higher precedence than defaultValue
.
If you want to ensure that a default value is used even when initialValue
is null
, you could handle this in your component by checking if initialValue
is null
and then setting it to your desired default value.
Here's an example of how you can do this:
Please note that this is a general example and you might need to adjust it according to your specific needs and the structure of your form and API.
For more information, you can refer to the useForm 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:
----------------------<@1122927158348763206> kapa.ai is still learning and improving, please let us know how it did by reacting below
secure-lavender•14mo ago
Did a non-null check and just set it.