React - Trigger form submit using useRef

Question

Good day, so I am trying to perform an intermediate function before a form action="POST" takes place. Ive tried two things firstly onSubmit={functionName} but the form always performs the action even if in the onSubmit function I return false. Secondly ive been trying to useRef instead to dispatch the submit event programtically but nothing happens? I essentially have to do a server side call to get a config for the form values that gets posted, unfortunately the external API I use needs the form to be submitted in this way. Please any help would be greatly appreciated.

Attempt 1:

const performSubmit =() => {
 //Using onSubmit and then only performing the return after the axios call is done
 axiosCallFunction.then((res) => {
   setConfig(res.data)
   return true
 }).catch((error)) => {
   //Dont submit form
   return false
 })
}

return (
<form name="form" onSubmit={performSubmit} id="x1" method="POST" action="https://url.aspx" target="_top">
    <input value={config.param}/>
    <button type="submit"> Submit</button>
</form>)

Attempt 2

const formEl = useRef();

const performSubmit =() => {
 //Currently not calling the submit on the form
 formEl.current.dispatchEvent(new Event("submit"))
}

return (
<form name="form" ref={formEl} id="x1" method="POST" action="https://url.aspx" target="_top">
    <input value={config.param}/>
    <button onClick={performSubmit} />
</form>)

Essentially want to do some call to a server and get results back before I submit the form or perform the action for the form.

score 14 · Accepted Answer · answered Jul 21 '20 at 13:52

14

Have you tried:

formEl.current && formEl.current.submit();

?

answered Jul 21 '20 at 13:52

foxxycodes

233
2
6

score 4 · Answer 2 · answered May 24 '22 at 17:31

Starting from React 17 you have to add cancelable and bubbles properties to your event. Otherwise, the solution from the accepted answer won't work. It's caused by some changes in event delegation.

formEl?.current.dispatchEvent(
  new Event("submit", { cancelable: true, bubbles: true })
);

I found the answer here.

score 2 · Answer 3 · answered Jun 18 '23 at 11:39

2

works with me

  const fromRef = useRef<HTMLFormElement>()

form:

<form ref={fromRef} onSubmit={handleSubmit(onSubmit)}>

btn:

  <Button onClick={() => {
      fromRef.current.requestSubmit()

    }} colorScheme='blue'>Save</Button>

answered Jun 18 '23 at 11:39

Jawad Fadel

550
6
12

score 0 · Answer 4 · answered Jul 21 '20 at 14:03

0

pass the event then prevent its default action

const performSubmit =(e) => {

 // stop the form from actually submitting
 e.preventDefault();

 //Using onSubmit and then only performing the return after the axios call is done
 axiosCallFunction.then((res) => {
   setConfig(res.data)
   return true
 }).catch((error)) => {
   //Dont submit form
   return false
 })
}

pass the event

return (
<form name="form" onSubmit={(e) => performSubmit(e)} id="x1" method="POST" action="https://url.aspx" target="_top">
    <input value={config.param}/>
    <button type="submit"> Submit</button>
</form>)

answered Jul 21 '20 at 14:03

Qchmqs

1,803
2
20
29

Thanks for the response, for some reason e.preventDefault() no longer triggers the action on the form even after the return true. – J.Naude Jul 21 '20 at 15:00
yes, I thought you wanted to handle everything manually. – Qchmqs Jul 22 '20 at 08:26

score 0 · Answer 5 · answered Jan 31 '22 at 09:47

0

Try

form?.current.dispatchEvent(new Event("submit"));

answered Jan 31 '22 at 09:47

Asce4s

819
3
10
16

React - Trigger form submit using useRef

5 Answers5