reactjs form: with two submit buttons doing two different tasks for same form

I want to have two submit buttons for my form.

Both will use the same inputs and form validation, but will do different tasks

export default function Formtwosubmits() {

  function handlesubmit_task1(){


  }


  function handlesubmit_task2(){


  }


  return (
    <>
      <form onSubmit={handlesubmit_task1 if task 1 button pressed || handlesubmit_task2 if task2 button pressed } >
        <Button variant="contained" color="primary" type="submit">
          task 1
        </Button>

        <Button variant="contained" color="primary" type="submit">
          task 2
        </Button>
        .... here input fields
      </form>
    </>
  );
}

I am not able to undertand how to pass different handlesumit functions for different buttons

I have tried:

export default function Formtwosubmits() {

  function handlesubmit_task1(){


  }


  function handlesubmit_task2(){


  }


  return (
    <>
      <form >
        <Button variant="contained" color="primary" type="submit" onClick={handlesubmit_task1}>
          task 1
        </Button>

        <Button variant="contained" color="primary" type="submit" onClick={handlesubmit_task2}>
          task 2
        </Button>
        .... here input fields
      </form>
    </>
  );
}

putting onClick on the button. with type=submit but this does not check the form validation (like required etc), whereas with onSubmit i see the form validation is checked

How can i trigger form validation with onClick. even that can help me

Answer

Use a React ref on the form element to access the form fields in the submit handlers and attach the submit handlers to each button’s onClick handler.

function Formtwosubmits() {
  const formRef = useRef(); // (1) <-- React ref for form DOMNode

  function handlesubmit_task1(event) {
    event.preventDefault();
    const { value } = formRef.current.myInput; // (4) <-- access form inputs by name

    // ...anything you need to do with form fields
    console.log("handler 1", value);

    formRef.current.reset(); // (5) <-- reset form if necessary
  }
  
  function handlesubmit_task2(event) {
    event.preventDefault();
    const { value } = formRef.current.myInput;

    console.log("handler 2", value);

    formRef.current.reset();
  }

  return (
    <>
      <form ref={formRef}> // (2) <-- Attach ref to element
        <button
          variant="contained"
          color="primary"
          type="submit"
          onClick={handlesubmit_task1} // (3) <-- Attach submit handler 1
        >
          task 1
        </button>
        <button
          variant="contained"
          color="primary"
          type="submit"
          onClick={handlesubmit_task2} // (3) <-- Attach submit handler 2
        >
          task 2
        </button>
        .... here input fields
        <input name="myInput" type="text" />
      </form>
    </>
  );
}

Demo

Edit reactjs-form-with-two-submit-buttons-doing-two-different-tasks-for-same-form

Update

You can assign an id to each submit button and access the React Synthetic event’s nativeEvent to get to the underlying browser event and access the submitter value.

Create a submitHandler to receive the form’s onSubmit event and check the submitter value and proxy the onSubmit event to the proper handler based on id.

const handlers = {
  submit1: handlesubmit_task1,
  submit2: handlesubmit_task2,
}

const submitHandler = (e) => {
  const { id } = e.nativeEvent.submitter; // <-- access submitter id
  handlers[id](e); // <--proxy event to proper callback handler
};

function handlesubmit_task1(event) {
  event.preventDefault();
  const { value } = event.target.myInput;
  console.log("handler 1", value);
  event.target.reset();
}

function handlesubmit_task2(event) {
  event.preventDefault();
  const { value } = event.target.myInput;
  console.log("handler 2", value);
  event.target.reset();
}

<form onSubmit={submitHandler}>
  <button
    id="submit1" // <-- id 1
    variant="contained"
    color="primary"
    type="submit"
  >
    task 1
  </button>
  <button
    id="submit2" // <-- id 2
    variant="contained"
    color="primary"
    type="submit"
  >
    task 2
  </button>
  .... here input fields
  <input name="myInput" type="text" />
</form>

Edit reactjs-form-with-two-submit-buttons-doing-two-different-tasks-for-same-form (forked)