Multiple react form inputs disables the onSubmit

Question

I have this very simple example that works as expected: https://jsfiddle.net/x1suxu9h/

var Hello = React.createClass({
  getInitialState: function() {
    return { msg: '' }
  },
  onSubmit: function(e) {
    e.preventDefault();
    this.setState({ msg: 'submitted' })
  },
  render: function() {
    return (
      <form onSubmit={this.onSubmit}>
        <input type="text" />
        <div>{this.state.msg}</div>
      </form>
    )
  }
});

However, when adding another form field, the onSubmit is not triggered anymore when pressing the enter key: https://jsfiddle.net/nyvt6506/

var Hello = React.createClass({
  getInitialState: function() {
    return { msg: '' }
  },
  onSubmit: function(e) {
    e.preventDefault();
    this.setState({ msg: 'submitted' })
  },
  render: function() {
    return (
      <form onSubmit={this.onSubmit}>
        <input type="text" />
        <input type="text" />
        <div>{this.state.msg}</div>
      </form>
    )
  }
});

Am I missing the obvious here?

Possible duplicate of [Submitting a form by pressing enter without a submit button](http://stackoverflow.com/questions/477691/submitting-a-form-by-pressing-enter-without-a-submit-button) — Fabian Schultz, Nov 03 '16 at 11:55
It's not a React based problem. https://www.w3.org/TR/html5/forms.html#implicit-submission / http://stackoverflow.com/questions/477691/submitting-a-form-by-pressing-enter-without-a-submit-button / http://stackoverflow.com/questions/925334/how-is-the-default-submit-button-on-an-html-form-determined — thirtydot, Nov 03 '16 at 11:56

score 11 · Accepted Answer · answered Nov 03 '16 at 11:55

Normally just pressing enter while focusing a form element doesn't submit it, you would use something to specifically submit it (like a submit button or an event handler to submit it upon pressing enter)

However, by default, if there's only ONE text input in the whole form then pressing enter submits it (it's some HTML specification). However, it's good to manually handle form submission.

So if you add this:

<button type='submit' />

to your form, whether there's one or two or 50 text inputs it will still submit

*Spot on*. note to future readers: if you preventDefault on click event for the button, the submithandler won’t trigger when pressing enter either: https://jsfiddle.net/3mL50u9c/ :/ — David Hellsing, Nov 03 '16 at 12:04

score 2 · Answer 2 · answered Nov 05 '16 at 12:08

2

Including an input of type "submit" will suffice for the form submission

<input type="submit">

answered Nov 05 '16 at 12:08

SunDontShine

128
2
13

score 1 · Answer 3 · answered Nov 03 '16 at 12:00

You can use onKeyPress instead of onSubmit as a workaround, something like this

var Hello = React.createClass({
  getInitialState: function() {
    return { msg: '' }
  },
  onSubmit: function(e) {
    e.preventDefault();
    console.log(e.currentTarget); // <-- Form
    this.setState({ msg: 'submitted' })
  },
  onKeyPress: function(e) {
    if(e.key === 'Enter')
        this.onSubmit(e);
  },
  render: function() {
    return (
        <form onKeyPress={this.onKeyPress}>
        <input type="text" />
        <input type="text" />
        <div>{this.state.msg}</div>
      </form>
    )
  }
});

jsfiddle

Multiple react form inputs disables the onSubmit

3 Answers3