harsh-harlequin•2y ago

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

kapa.ai•2y ago

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:

import React from "react";  
import { useForm } from "@refinedev/react-hook-form";  
import { FieldValues } from "react-hook-form";  
  
export const UserCreate: React.FC = () => {  
 const {  
 refineCore: { onFinish },  
 register,  
 handleSubmit,  
 } = useForm();  
  
 const onFinishHandler = (data: FieldValues) => {  
 onFinish({  
 ...data,
 id: 'yourUserId', // Add additional entries here
 });  
 };  
  
 return (  
 <form onSubmit={handleSubmit(onFinishHandler)}>  
 <label>Name: </label>  
 <input {...register("name")} />  
 <br />  
  
 <label>Surname: </label>  
 <input {...register("surname")} />  
 <br />  
  
 <button type="submit">Submit</button>  
 </form>  
 );  
};

import React from "react";  
import { useForm } from "@refinedev/react-hook-form";  
import { FieldValues } from "react-hook-form";  
  
export const UserCreate: React.FC = () => {  
 const {  
 refineCore: { onFinish },  
 register,  
 handleSubmit,  
 } = useForm();  
  
 const onFinishHandler = (data: FieldValues) => {  
 onFinish({  
 ...data,
 id: 'yourUserId', // Add additional entries here
 });  
 };  
  
 return (  
 <form onSubmit={handleSubmit(onFinishHandler)}>  
 <label>Name: </label>  
 <input {...register("name")} />  
 <br />  
  
 <label>Surname: </label>  
 <input {...register("surname")} />  
 <br />  
  
 <button type="submit">Submit</button>  
 </form>  
 );  
};

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: ----------------------

kapa.ai•2y ago

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

harsh-harlequinOP•2y 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?

kapa.ai•2y ago

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:

const { autocompleteProps } = useAutocomplete<ICategory>({  
 resource: "categories",  
 defaultValue: 11,  
});

const { autocompleteProps } = useAutocomplete<ICategory>({  
 resource: "categories",  
 defaultValue: 11,  
});

In useCheckboxGroup, useSelect, and useRadioGroup, you can also set a default value:

const { selectProps } = useCheckboxGroup({  
 resource: "languages",  
 defaultValue: [1, 2],  
});  

const { selectProps } = useSelect({  
 defaultValue: 1, // or [1, 2]  
});  

const { selectProps } = useRadioGroup({  
 resource: "languages",  
 defaultValue: 1,  
});

const { selectProps } = useCheckboxGroup({  
 resource: "languages",  
 defaultValue: [1, 2],  
});  

const { selectProps } = useSelect({  
 defaultValue: 1, // or [1, 2]  
});  

const { selectProps } = useRadioGroup({  
 resource: "languages",  
 defaultValue: 1,  
});

In useModalForm, you can set initial values for the form:

const modalForm = useModalForm({  
 initialValues: {  
 title: "Hello World",  
 },  
});

const modalForm = useModalForm({  
 initialValues: {  
 title: "Hello World",  
 },  
});

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: ----------------------

kapa.ai•2y ago

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

harsh-harlequinOP•2y ago

@kapa.ai It seems like it's still overwrittened when the formProps' initialValue has a null value for the value.

kapa.ai•2y ago

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:

import { useForm } from "@refinedev/react-hook-form";  

const { initialValues, ... } = useForm({  
 ...,  
 refineCoreProps: {  
 resource: "posts",  
 redirect: false,  
 // You can define all properties provided by refine useForm  
 },  
});  

// Check if initialValue is null and set it to a default value
const defaultValue = initialValues?.yourField === null ? 'yourDefaultValue' : initialValues?.yourField;

// Use defaultValue in your form field

import { useForm } from "@refinedev/react-hook-form";  

const { initialValues, ... } = useForm({  
 ...,  
 refineCoreProps: {  
 resource: "posts",  
 redirect: false,  
 // You can define all properties provided by refine useForm  
 },  
});  

// Check if initialValue is null and set it to a default value
const defaultValue = initialValues?.yourField === null ? 'yourDefaultValue' : initialValues?.yourField;

// Use defaultValue in your form field

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: ----------------------

kapa.ai•2y ago

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

harsh-harlequinOP•2y ago

Did a non-null check and just set it.

if(formProps?.initialValues?.value === null) formProps.initialValues.value = newValue

if(formProps?.initialValues?.value === null) formProps.initialValues.value = newValue

Passing Variables on Form Submit?

Did you find this page helpful?