React.js: submit form programmatically does not tr

Question

I want to submit a React form after a click on a link.

To do so I need to submit the form programmatically if the link is clicked.

my problem is : onSubmit handler is not being fired after the form submit .

Here is a code snipped that I made for this purpose:

var MyForm = React.createClass({
  handleSubmit: function(e){
    console.log('Form submited');
     e.preventDefault();
  },
  submitForm : function(e){
    this.refs.formToSubmit.submit();
  },
  render: function() {
    return (
    <form ref="formToSubmit" onSubmit={this.handleSubmit}>
    <input name='myInput'/>
    <a onClick={this.submitForm}>Validate</a>
    </form>);
  }
});

ReactDOM.render(
  <MyForm name="World" />,
  document.getElementById('container')
);

The handleSubmit is not invoked and the default behavior is executed (the form being submitted). Is this a ReactJs bug or a normal behavior? Is there a way to get the onSubmit handler invoked ?

Answer 1

This has nothing to do with React. It's a "feature" of the DOM API: .submit() method does not actually fire submit event, and it doesn't trigger input validations either. See http://codetheory.in/javascript-fire-onsubmit-by-calling-form-submit/.

Possible workaround is, as suggested, create a submit button, and programmatically call .click() on it. Or, you could programmatically create a submit event with new Event() and dispatch it using .dispatchEvent(). However, new Event() is not available in IE.