React JS Multiple submit Buttons react-hook-form

Question

im using react-hook-form for form validation and submission ,everything work's fine with single submit type button, now i need to have three buttons , "Save Draft" ,"Preview Data Values in Page" ,and "Submit for approval " ,i can opt-out for a Mode Selection radio Buttons ,But wanted to have three button submit function, which needs form data . adding onchnage for input fields will work ,but form validation needs to write again .

  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => alert(JSON.stringify(data));
  function NeedTohaveFormDataHere1(Data) {

   } function NeedTohaveFormDataHere2(Data) {

   }
    return (  <form onSubmit={handleSubmit(onSubmit)}>
     <Headers />

  <input name="firstName" ref={register} placeholder="First name" />

  <input name="lastName" ref={register} placeholder="Last name" />

  <select name="category" ref={register}>
    <option value="">Select...</option>
    <option value="A">Category A</option>
    <option value="B">Category B</option>
  </select>
  <button onClick={NeedTohaveFormDataHere1}>
   Save Draft
  </button > 
  <button onClick={NeedTohaveFormDataHere2}>
    Preview
  </button>  
  <input type="submit" />
</form>
 );
 }
 

onSubmit function will get form data ,how to get form data in other two button functions ?

sloved .. with

  <button onClick={handleSubmit(NeedTohaveFormDataHere1)}>
   Save Draft
  </button > 
  <button onClick={handleSubmit(NeedTohaveFormDataHere2)}>
    Preview
  </button> 

Answer 1

I had the same problem and i resolved in this way:

I have two buttons, the firs bottom save and validate normally, and the second one only validate and call a custom function. I think you have the same. button for save and button for draft

<form id="example-form" onSubmit={handleSubmit(handleOnSave)}>
  <IconButtonTooltip
              disabled={false}
              form={"example-form"}
              onClick={() => void 0}
              title={only save}
            >
              <SaveIcon className={classes.icon} data-testid={""} />
</IconButtonTooltip>

<IconButtonTooltip
              disabled={false}
              form={"example-form"}
              onClick={handleSubmit(handleOnSingAndSave)}
              title={save and sign}>
              <SignatureIcon className={classes.icon} data-testid={""} />
</IconButtonTooltip>
</form>

const handleOnSingAndSave  = () => {
do things
}

It works for me!

Answer 2

You can use handleSubmit in multiple place.

const handleSubmitDraft=()=>{
  handleSubmit(aync(data)=>{...})()

}
const handleSubmitPreview=()=>{
  handleSubmit((data)=>{...})()
}

<button onClick={handleSubmitDraft}>
   Save Draft
</button > 
<button onClick={handleSubmitPreview}>
    Preview
</button> 

Answer 3

if you have to handle the multiple submit buttons in react-hook-form

1. remove your submit method from the form tag and add it to your button click

2. move your submit buttons outside the form tag

const { handleSubmit } = useForm();

<form>
 <input />
 <input />
</form>

<button onClick={handleSubmit((d) => console.log(d))} > Save </button>
<button onClick={handleSubmit((d) => console.log(d))} > Draft </button>