nested form submission

I have 2 forms that use the useForm hook,

const form_A = useForm({...});
const form_B = useForm({...});

const form_A = useForm({...});
const form_B = useForm({...});

When form_A is submitted, I would also like form_B to be submitted. How would one programatically trigger the submission of form_B when the submission of form_B occurs?

2 Replies

kapa.ai•13mo ago

Hi @UsererOfName. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To programmatically submit a form in refine, you can use the submit function returned by the useForm or useStepsForm hooks. This function can be used to manually submit the form. In your case, you can call the submit function of form_B inside the onFinish function of form_A. The onFinish function is called when the form is submitted. Here is an example of how you can do it:

const form_A = useForm({
  // other options...
  onFinish: async (values) => {
    // handle form_A submission...
    
    // then submit form_B
    form_B.submit();
  },
});

const form_B = useForm({
  // other options...
});

const form_A = useForm({
  // other options...
  onFinish: async (values) => {
    // handle form_A submission...
    
    // then submit form_B
    form_B.submit();
  },
});

const form_B = useForm({
  // other options...
});

Please note that the submit function is also available in useStepsForm hook. So, if you are using useStepsForm instead of useForm, you can still use the same approach. For more information, you can refer to the useForm (https://refine.dev/docs/api-reference/antd/hooks/form/useForm) and useStepsForm (https://refine.dev/docs/api-reference/antd/hooks/form/useStepsForm) documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

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