How to create several submit buttons in a react.js form?

Question

I am trying to create a form in react.js where the user can click on two different button to execute two different actions. In my case, the form should allow the user to select a document and either replace the current document (1st button) or to be appended to it (2nd button). Is it possible to achieve this in a single form ?

I thought i could detect which button was applied using the 'event' parameter in the onSubmit function, but didn't success at it. I also thought about recreating a pseudo-form using references to inputs and normal buttons, but I would prefer not to use such a hack if a cleaner solution exists.

Thank you in advance for your help!

Note: I have found some questions related to multiple submit buttons (here and here for example), but none of them deal with react.js solutions.

Chaim

Answer 1

Try this. It will process a regular submit (via the button or pressing enter) using "handleSubmit" function, and the alternative submit (via the other button) using "handleAlternate".

Functional component:

const Example = () => {

  const handleSubmit = (event) => {
    event.preventDefault();
    ....
  }
  
  const handleAlternate = (event) => {
    event.preventDefault();
    ...
  }

  return (
    <form onSubmit={handleSubmit}>
      ...
      <button type="submit">Submit</button>
      <button onClick={handleAlternate}>Alternate</button>
    </form>
  )

}

Class component:

class Example extends React.Component {

  handleSubmit(event) {
    event.preventDefault();
    ....
  }

  handleAlternate(event) {
    event.preventDefault();
    ...
  }

  render() {
    <form onSubmit={this.handleSubmit.bind(this)}>
      ...
      <button type="submit">Submit</button>
      <button onClick={this.handleAlternate.bind(this)}>Alternate</button>
    </form>
  }

}

And as Alexis pointed out, it might be more correct (but less readable IMO) to actually declare the second button's type, as the default would be for a form button to submit:

<form onSubmit={handleSubmit}>
  ....
  <button>Submit</button>
  <button type="button" onClick={handleAlternate}>Alternate</button>
</form>

Quassia

Indeed, it works perfectly. I was convinced it wouldn't. – Fluidics

Note that the type of a button is "submit" by default. What you would need to do is define the other (the one with onClick=...) to be a standard button with type="button" (I know it looks counter intuitive.) The Button Tag (MDN) – Phosgenite

It is not a submit button, it is just a regular button – Subito

Alternate button doesn't check required fields – Travail

would you please update solution for React with functional component? – Presocratic

@Becauseihatemyself sure - done - there's no magic in this code, its just standard form button handling really. – Quassia

@AlexisWilke yes you are technically/syntactically right! I still think I prefer an explicit declaration of the submit type (and implicit standard button) rather than an implicit submit type (because of the W3C specification) and explicit button type. Either would work here, but I do prefer readability. – Quassia

Answer 2

It seems to me that you shouldn't use onSubmit event. onSubmit is created to handle sending a form via POST request to the server, but your use case seems to be different.

I would use <button> element and onClick handler instead.

Fauver

Do you mean that as long as the form content is processed by the component itself, using onSubmit (or even <Form> structure) is not required / desirable? – Chaim

@Chaim yes, I mean exactly that. – Fauver