React.js: submitting a form programmatically does not raise an onSubmit event

Question

I want to submit a React form after clicking on the link.

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

My problem: the onSubmit handler does not start after the form is onSubmit .

Here is the code 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') ); 

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

Answer 1

Your current onSubmit is related to onSubmit React SyntheticEvent , and not as a source dispatch event. This explains why this.refs.formToSubmit.submit(); does not start your handler. As far as I know, trying to manually run this SyntheticEvent is not recommended or worth pursuing.

I believe the idiomatic way to achieve this is to structure your JSX / HTML to use a <button> or <input> type submit. Any of these will call your handleSubmit handler. In my opinion, this will reduce complexity, consolidate your handlers, and seem to be your best solution.

eg.

• <input type="submit" value="Validate" />
• <button type="submit">Validate</button>

Answer 2

You should not expect the ref form to add an extra callback to submit for you by default. This will be a poor structure design when working with programmatically installed elements, such as the DOM refs element.

You should use ref to create all the events you need in any order, and not rely on the ineffable internal implementation of ref [when instantiating the form element].

It works:

 this.refs.formToSubmit.onSubmit(); this.refs.formToSubmit.submit(); 

The actual submit should always be the last one.

Answer 3

You should use an input tag of type submit instead of an anchor tag, since the anchor tag does not raise a send event.

 render: function() { return (<form ref="formToSubmit" onSubmit={this.handleSubmit}> <input name='myInput'/> <input onClick={this.submitForm} type="submit" value="Validate" /> </form>); 

}

Answer 4

I had the same problem, but I could not fix it. No matter what I did, document.querySelector('form').submit() does not start the onSubmit handler. I tried to enable the invisible <input type="submit"> , but still .submit() did not run it. So I just changed the contents of the invisible submit ( style="display:none" ) and then executed .click() on that invisible submit button, which surprisingly works even with display:none . I tested only in Firefox.