Best way to handle multiple form submit buttons

[neilwiborg]

I have a form that has multiple (two or more) submit buttons that each have different behavior. I'm not sure what the best way to determine which button was clicked in the form onSubmit handler is.

I thought of using a useState variable that gets set by each button's onClick handler, but I wasn't sure if there is a better way in react-hook-form to handle this. Any ideas?

[h-mack]

If each button has it's own separate submission logic, you can use both functions separately with handleSubmit().
handleSubmit() runs the validation on your form inputs and returns a promise (if the inputs are valid, you receive the form data).
Each button should be assigned the relevant submission function you want to run.
e.g. onClick={handleSubmit(onSubmitFunctionOne)} and onClick={handleSubmit(onSubmitFunctionTwo)}

If you want to be able to use the default form element submission behaviour, (by hitting "Enter" when focused in a form input field when applicable, triggering either a <button type="submit"> or <input type="submit"> element), you can either choose one of your various submission functions you want to run:
e.g. <form onSubmit={handleSubmit(onSubmitFunctionOne)}
Or have some logic to check the current formState and then pass which submission function you want to run based off that logic.
e.g. <form onSubmit={handleSubmit(stateCheckingLogicToPassDesiredSubmissionFunction)}>

Hard to give a more concrete suggestions without being able to see any of the code though. If you were able to create a code sandbox to demonstrate your issue that would make it easier to help.

[neilwiborg]

That's very helpful, thank you! I'm leaning towards using the form onSubmit reather than using the button's onClick events to handle the form submission. For the logic to pass the desired submission function, is there a preferred way to handle this? My idea was something like this:

const [submitType, setSubmitType] = useState<"typeOne" | "typeTwo">("typeOne");

<form onSubmit={handleSubmit((submitType === "typeOne") ? onSubmitFunctionOne : onSubmitFunctionTwo)}>
  <button type="submit" onClick={() => setSubmitType("typeOne")} />
  <button type="submit" onClick={() => setSubmitType("typeTwo")} />
</form>

I saw that I could also set a name on each button and use the event object to see what button triggered the event, but that didn't seem to play nice with TypeScript so useState() seemed like a good option.

[h-mack]

It seems from your code snippet that submitting the form by pressing "Enter" would always submit the form via onSubmitFunctionOne (or whatever the default value for the useState hook is set to).

In that case it would be the same as having:

<form onSubmit={handleSubmit(onSubmitFunctionOne)}>
  <button type="submit" />
  <button type="button" onClick={handleSubmit(onSubmitFunctionTwo)} />
</form>

If each button is only linked to one function, then you would know/be able to infer which button was clicked by which function was called, right?

[neilwiborg]

This is a good point, I could just use the form submission for the first submit and use the onClick event for the second button. I'll have to think about what I want to happen if the user presses enter, but you have given me some good ideas, thank you!

[k-wakamatsu-tms]

It seems from your code snippet that submitting the form by pressing "Enter" would always submit the form via onSubmitFunctionOne (or whatever the default value for the useState hook is set to).

In that case it would be the same as having:

<form onSubmit={handleSubmit(onSubmitFunctionOne)}>
  <button type="submit" />
  <button type="button" onClick={handleSubmit(onSubmitFunctionTwo)} />
</form>

If each button is only linked to one function, then you would know/be able to infer which button was clicked by which function was called, right?

@h-mack
How is it best to write the case where the two buttons have the same validation items, but there are differences such as whether fields are required or not? (Example: temporary save and submit buttons, etc.)

[h-mack]

@k-wakamatsu-tms
I think you would be able to achieve what you are after by utilising the getValues and handleSubmit methods belonging to the useForm hook.

For example:

function onSubmit() {
  //... perform desired submission logic

 // being wrapped in "handleSubmit", react-hook-form "handleSubmit" will handle checking whether required fields have 
 // required values or not for <input> elements that have the "required" attribute
}

function temporarySave() {
  const values = getValues();
  // ...use current field values how you want
  // e.g. save to state, or context, or a DB, etc.
}

<form onSubmit={handleSubmit(onSubmit)}>
  <button type="button" onClick={temporarySave}>Save Changes</button>
  <button type="submit">Submit</button>
 </form>