vicious-gold•10mo ago

Issue with onSubmit Function Not Triggering

Hi everyone, I am building an admin panel for news website with refine, I am a beginner, my project involves a form, I have a page to create an article (with title, body of the article, multiple categories, images and videos ) so administrator will be able to create the content and post it later on the frontend part of the website, I have an issue issue with the onSubmit function not triggering when I submit the form. - I've implemented the form using the @refinedev/react-hook-form library. - I have a component for the form where I'm using the handleSubmit function. However, when I submit the form, nothing happens, and the onSubmit function doesn't seem to execute. I am unable to find the issue, I am including screenshots of relevant code, If any other files might be relevant please tell me any kind of advice will be a big help Thanks

3 Replies

kapa.ai•10mo ago

Hi @anukacim. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry to hear that you're having trouble with the onSubmit function in your form. Based on the information you've provided and the extracts I have, here are a few things you can check: 1. Check your handleSubmit function: The handleSubmit function from the useForm hook is used to handle form submissions. Make sure you're passing the right function to handleSubmit. Here's an example of how it should look:

const {  
 handleSubmit,  
} = useForm();  

const handleSubmission = (data) => console.log(data);  

<form onSubmit={handleSubmit(handleSubmission)}>  
 ...
</form>

const {  
 handleSubmit,  
} = useForm();  

const handleSubmission = (data) => console.log(data);  

<form onSubmit={handleSubmit(handleSubmission)}>  
 ...
</form>

In this example, handleSubmission is the function that will be executed when the form is submitted. Make sure you're passing a function that handles your form data correctly to handleSubmit. source (https://refine.dev/blog/react-hook-form-validation-examples/) 2. Check your onFinish function: The onFinish function from the useForm hook is used to handle what happens after the form is submitted. Make sure you're using it correctly. Here's an example:

const {  
 refineCore: { onFinish },  
 handleSubmit,  
} = useForm();  

const handleSubmitPostCreate = (values) => {  
 const { name, surname } = values;  
 const fullName = `${name} ${surname}`;  
 onFinish({  
 ...value,  
 fullName,  
 });  
};  

<form onSubmit={handleSubmit(handleSubmitPostCreate)}>  
 ...
</form>

const {  
 refineCore: { onFinish },  
 handleSubmit,  
} = useForm();  

const handleSubmitPostCreate = (values) => {  
 const { name, surname } = values;  
 const fullName = `${name} ${surname}`;  
 onFinish({  
 ...value,  
 fullName,  
 });  
};  

<form onSubmit={handleSubmit(handleSubmitPostCreate)}>  
 ...
</form>

In this example, handleSubmitPostCreate is the function that will be executed when the form is submitted. It uses the onFinish function to handle what happens after the form is submitted. source (https://refine.dev/docs/faq/) 3. Check your form structure: Make sure your form structure is correct and that the onSubmit event is correctly placed on the form element. If you're still having trouble, it would be helpful to see the code for your form and the functions you're passing to handleSubmit and onFinish. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

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

rare-sapphire•10mo ago

Hello @anukacim I think bot's answer should be sufficient. let us know if it isn't.