I'm using Redux-Form and I'm trying to get the form values when the user clicks submit.

These are the outer form props. As you can see, there are submittion functions:

• onSubmit
• onSubmitSuccess
• onSubmitFail

onSubmitSucess and onSubmitFail are never called. onSubmit is called but with no arguments.

All I want is to get the form values so I can post them to an API.

How can I do that?

EDIT (code)

AutoFormInternal.js

class AutoFormInternal extends Component {

    render() {

        let {
            ponentFactory,
            fields,
            fieldMetadata,
            layout,
            handleSubmit,
            submitting
        } = this.props;

        let model = this.props.values;
        let fieldMetadataEvaluated = metadataEvaluator.evaluate(fieldMetadata, model, '', fields);

        let groupComponent = ponentFactory.buildGroupComponent({
            ponent: layoutponent,
            layout: layout,
            fields: fieldMetadataEvaluated,
            ponentFactory: ponentFactory
        });

        return (
            <div className="meta-form">
                <form onSubmit={handleSubmit}>
                    { groupComponent }
                    <ButtonToolbar>
                        <Button type="submit" bsStyle="primary" disabled={submitting}>Submit</Button>
                        <Button disabled={submitting}>Cancel</Button>
                    </ButtonToolbar>
                </form>
            </div>
        )
    }
}

AutoFormInternal.propTypes = {
    fields: PropTypes.object.isRequired,
    handleSubmit: PropTypes.func.isRequired,
    resetForm: PropTypes.func.isRequired,
    submitting: PropTypes.bool.isRequired,
    ponentFactory: PropTypes.object.isRequired,
    entity: PropTypes.object.isRequired,
    layout: PropTypes.object
};

export default reduxForm({
    form: 'simple'
})(AutoFormInternal);

AutoForm.js

class AutoForm extends Component {

    render() {

        let {entity, layout} = metadataProvider.getEntityAndLayout(this.props.schema, this.props.entityName, this.props.layoutName);
        let ponentFactory = this.propsponentFactory;
        let fieldMetadata = metadataProvider.getFields(this.props.schema, entity, layout, f => {
            fponentFactory = ponentFactory;
        });
        let fields = metadataProvider.getReduxFormFields(fieldMetadata);
        let validate = (values) => {
            return metadataValidator.validate(fieldMetadata, values);
        }

        return <AutoFormInternal
            fields={fields}
            fieldMetadata={fieldMetadata}
            entity={entity}
            layout={layout}
            validate={validate}
            ponentFactory={ponentFactory}
            onSubmit={() => console.log('submit')}
            onSubmitSuccess={() => console.log('submit success')}
            onSubmitFail={() => console.log('submit fail')}
             />
    }

}

AutoForm.propTypes = {
    ponentFactory: PropTypes.object.isRequired,
    schema: PropTypes.object.isRequired,
    entityName: PropTypes.string.isRequired,
    layoutName: PropTypes.string.isRequired
};

export default AutoForm;

I'm using Redux-Form and I'm trying to get the form values when the user clicks submit.

These are the outer form props. As you can see, there are submittion functions:

• onSubmit
• onSubmitSuccess
• onSubmitFail

onSubmitSucess and onSubmitFail are never called. onSubmit is called but with no arguments.

All I want is to get the form values so I can post them to an API.

How can I do that?

EDIT (code)

AutoFormInternal.js

class AutoFormInternal extends Component {

    render() {

        let {
            ponentFactory,
            fields,
            fieldMetadata,
            layout,
            handleSubmit,
            submitting
        } = this.props;

        let model = this.props.values;
        let fieldMetadataEvaluated = metadataEvaluator.evaluate(fieldMetadata, model, '', fields);

        let groupComponent = ponentFactory.buildGroupComponent({
            ponent: layout.ponent,
            layout: layout,
            fields: fieldMetadataEvaluated,
            ponentFactory: ponentFactory
        });

        return (
            <div className="meta-form">
                <form onSubmit={handleSubmit}>
                    { groupComponent }
                    <ButtonToolbar>
                        <Button type="submit" bsStyle="primary" disabled={submitting}>Submit</Button>
                        <Button disabled={submitting}>Cancel</Button>
                    </ButtonToolbar>
                </form>
            </div>
        )
    }
}

AutoFormInternal.propTypes = {
    fields: PropTypes.object.isRequired,
    handleSubmit: PropTypes.func.isRequired,
    resetForm: PropTypes.func.isRequired,
    submitting: PropTypes.bool.isRequired,
    ponentFactory: PropTypes.object.isRequired,
    entity: PropTypes.object.isRequired,
    layout: PropTypes.object
};

export default reduxForm({
    form: 'simple'
})(AutoFormInternal);

AutoForm.js

class AutoForm extends Component {

    render() {

        let {entity, layout} = metadataProvider.getEntityAndLayout(this.props.schema, this.props.entityName, this.props.layoutName);
        let ponentFactory = this.props.ponentFactory;
        let fieldMetadata = metadataProvider.getFields(this.props.schema, entity, layout, f => {
            f.ponentFactory = ponentFactory;
        });
        let fields = metadataProvider.getReduxFormFields(fieldMetadata);
        let validate = (values) => {
            return metadataValidator.validate(fieldMetadata, values);
        }

        return <AutoFormInternal
            fields={fields}
            fieldMetadata={fieldMetadata}
            entity={entity}
            layout={layout}
            validate={validate}
            ponentFactory={ponentFactory}
            onSubmit={() => console.log('submit')}
            onSubmitSuccess={() => console.log('submit success')}
            onSubmitFail={() => console.log('submit fail')}
             />
    }

}

AutoForm.propTypes = {
    ponentFactory: PropTypes.object.isRequired,
    schema: PropTypes.object.isRequired,
    entityName: PropTypes.string.isRequired,
    layoutName: PropTypes.string.isRequired
};

export default AutoForm;

• javascript
• reactjs
• redux
• redux-form

• Can you paste some code? The part with handleSubmit specifically. – Florent Commented Apr 26, 2016 at 17:38
• @Florent sure, hold on – Andre Pena Commented Apr 26, 2016 at 17:41
• @Florent Just did it. Thank you – Andre Pena Commented Apr 26, 2016 at 17:44
• onSubmit={values => console.log(values)} should work. If not, maybe you should inspect your store after interacting with the form. Your fields may not be properly bound. – Florent Commented Apr 26, 2016 at 17:48

1 Answer 1

You should pass the onSubmit function reference to the form's handleSubmit method as a parameter: <form onSubmit={handleSubmit(onSubmit)}>. Notice that the onSubmit function reference is not being called here, you're providing it as a "callback" for form submission.

Now when the form is submitted, it should call the onSubmit function, which should take 1 parameter, the values of the entire form as an object.

class AutoFormInternal extends Component {

render() {

    let {
        ponentFactory,
        fields,
        fieldMetadata,
        layout,
        handleSubmit,
        submitting,
        onSubmit // <-- You need to reference this function passed from the wrapper ponent in order to pass it to redux-form's provided handleSubmit function
    } = this.props;

    ... *snip* ...

    return (
        <div className="meta-form">
            <form onSubmit={handleSubmit(onSubmit)}> // <-- Here's where we pass onSubmit to redux-form's handleSubmit
                { groupComponent }
                <ButtonToolbar>
                    <Button type="submit" bsStyle="primary" disabled={submitting}>Submit</Button>
                    <Button disabled={submitting}>Cancel</Button>
                </ButtonToolbar>
            </form>
        </div>
    )
}
}

AutoFormInternal.propTypes = {
    fields: PropTypes.object.isRequired,
    handleSubmit: PropTypes.func.isRequired,
    onSubmit: PropTypes.func.isRequired,
    resetForm: PropTypes.func.isRequired,
    submitting: PropTypes.bool.isRequired,
    ponentFactory: PropTypes.object.isRequired,
    entity: PropTypes.object.isRequired,
    layout: PropTypes.object
};

export default reduxForm({
    form: 'simple'
})(AutoFormInternal);`

... *snip* ...

return <AutoFormInternal
        fields={fields}
        fieldMetadata={fieldMetadata}
        entity={entity}
        layout={layout}
        validate={validate}
        ponentFactory={ponentFactory}
        onSubmit={(formValues) => console.log(formValues)} // <-- formValues should be now be populated when the form is submitted
        onSubmitSuccess={() => console.log('submit success')}
        onSubmitFail={() => console.log('submit fail')}
         />