Multiple submit buttons to different api endpoints

[albinbrengesjo]

Hi,

I am quite new into hook form. Haven't found any solutions for my problem though.
I have a form where I want to submit the form, with exactly same data but with two separate submit buttons. On to save draft, one for saving the data. How am I supposed to structure my form?

As far as I have come there seems to be no submit at all if I don't provide an "onSubmit" property to the main form element. I have multiple forms using the same template and therefore I have to provide the submission URL's (one for saving and one for sending) dynamically for each form.

I guess my basic question is how I should structure a form with two submit-buttons. Can anyone please help out?
And if that is possible, is there any way for me to use validation for one of the buttons, but not the other?

Thank you!

[Moshyfawn]

In general, for multiple different submit actions you'd call handleSubmit onClick of different buttons passing different onSubmit callbacks to each of them.

const { handleSubmit } = useForm()

return (
  <section>
    <button onClick={handleSubmit(onSaveAsDraft)}>Save as Draft</button>
    <button onClick={handleSubmit(onSubmit)}>Submit</button>
  </section>
)

[albinbrengesjo]

Oh, thanks.

My problem was that I used "wrong" handleSubmit further down in my sub components (submit buttons) and not the one containing the right handleSubmit from the "top-context". Of course I have to use the handleSubmit coming from right context.

Thanks.

[TmcTrevor]

Hello , I wanna know if its possible to work with this code in the example, along side doing the form validation , in my case when i don't specify that the button is type submit and add the required attribut , it always show that my fields are empty

[rfdomingues98]

Hey there, Im curious, did you ever get an answer to this?
Does anyone know how can we validate with different schemas based on which submit button was pressed?

[thomasters17]

I am also curious to know about the above. I need the form validation functionality to work. I read about using e.submitter.name to get the name of the button that submitted the form but this isnt working for me. Would be great to get something working.

[sega057]

@rfdomingues98 I answered this question in https://github.com/orgs/react-hook-form/discussions/2944