12

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.

Community
  • 1
  • 1
anmorand
  • 121
  • 1
  • 1
  • 6

2 Answers2

17

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>
Andy Lorenz
  • 2,905
  • 1
  • 29
  • 29
  • Indeed, it works perfectly. I was convinced it wouldn't. – Tim Fletcher Jan 01 '17 at 19:41
  • 2
    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)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) – Alexis Wilke Feb 23 '19 at 00:02
  • 2
    It is not a submit button, it is just a regular button – SomeDevloperName Dec 11 '19 at 12:01
  • Alternate button doesn't check required fields – Dimuth Ruwantha Apr 27 '20 at 11:36
  • would you please update solution for React with functional component? – Rajanboy May 25 '22 at 01:29
  • @Becauseihatemyself sure - done - there's no magic in this code, its just standard form button handling really. – Andy Lorenz May 25 '22 at 07:41
  • @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. – Andy Lorenz May 25 '22 at 07:49
-1

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.

Konstantin Solomatov
  • 10,252
  • 8
  • 58
  • 88