Submitting form programatically

I have a Form called question1 that looks like this:

<Formsy.Form ref="question1" onSubmit={this.onSubmit} onSuccess={this.onSuccess} onValid={this.onValid} onInvalid={this.onInvalid}>
    <RadioButtonGroup name='user_type' options={options} class={classes} validationError="This is a required field." required />
</Formsy.Form>

Notice that I don’t have a submit button. This is intentional because I have an app.jsx parent component that includes a footer navigation bar that contains previous and next buttons for navigating through a questionnaire. Each question is a separate form, starting with question1 above.

I’m using RefluxJS for communicating actions between question1.jsx and app.jsx so that when app.jsx calls the submitQuestion1 action (as a result of the user clicking the Next button), question1.jsx listens on that action and calls its own custom submit method, which actually does the form submission as shown here:

/**
 * Question 1
 * Renders Question 1
 *
 * @prop null
 */
'use strict';

var $ = require('jquery');
var is = require('is_js');
var React = require('react');
var Reflux = require('reflux');
var Utilities = require('utilities');
var Actions = require('actions');
var Store = require('store');
var Formsy = require('formsy-react');

// Components
var RadioButtonGroup = require('../../components/radio-button-group/radio-button-group');

var Question1 = React.createClass({

  mixins: [
    Reflux.listenTo(Actions.submitQuestion1, "submit"),
  ],

  onSubmit: function (data) {
    console.log("This is not called... why?");
  },

  onSuccess: function (e) {

  },

  onValid: function (e) {
    this.setState({
      canSubmit: true
    });

    // Validate the Next Button
    Actions.enableNextButton();
  },

  onInvalid: function (e) {

  },

  submit: function () {
    if (this.state.canSubmit) {

      // Submit the Form
      $(this.refs.question1.getDOMNode()).submit();
    }
  },

  render: function () {

    var options = [
      {
        title: 'Mine',
        value: 'A'
      },
      {
        title: 'Child',
        value: 'P'
      }
    ];

    return (
      <div className='question1'>
        <Formsy.Form ref="question1" onSubmit={this.onSubmit} onSuccess={this.onSuccess} onValid={this.onValid} onInvalid={this.onInvalid}>
          <RadioButtonGroup name='user_type' options={options} class={classes} validationError="This is a required field." required />
        </Formsy.Form>
      </div>
    );
  }

});

This line $(this.refs.question1.getDOMNode()).submit(); technically works, it submits the form, but my onSubmit function is not called even though it is specified here: <Formsy.Form ref="question1" onSubmit={this.onSubmit} onSuccess={this.onSuccess} onValid={this.onValid} onInvalid={this.onInvalid}>.

Does Formsy support programmatic submission of forms?

[christianalfoni]

Hi @mull,

This is probably the wiring of React I believe, since you trigger a native event doing that. But you can do this:

testSubmit() {
  this.refs.form.submit(); // Point directly to the form component
},

render() {
  return (
    <Formsy.Form ref="form">
      {/* some inputs */}
    </Formsy.Form
  );
}

Does that solve your challenge?

[eriklharper]

Seems silly, but I got this to work by adding an invisible submit button and then triggering a click on it in my submit function:

Form:

<Formsy.Form id="question1" ref="question1" onSubmit={this.onSubmit} onSuccess={this.onSuccess} onValid={this.onValid} onInvalid={this.onInvalid}>
    <RadioButtonGroup name='user_type' options={options} class={classes} validationError="This is a required field." required />
    <button style={{display:'none'}} ref="question1button" type="submit" disabled={!this.state.canSubmit}>Submit</button>
</Formsy.Form>

Submit Function:

submit: function () {
    if (this.state.canSubmit) {

        // Submit the Form
        $(this.refs.question1button.getDOMNode()).click();
    }
}