0

I'm building an application with dynamic forms (redux-form). I would like when user click on submit button to print values. Note that my submit button is placed in my application header (outside the form). To achieve this, I'm following this tutorial from Redux-form. When I press the "Save" button, I got this error in my console : (0 , _reduxForm.submit) is not a function(…).

My code :

Submit component

import React from 'react' import {connect} from 'react-redux' import {submit} from 'redux-form' const RemoteSubmitButton = ({dispatch}) => // How to get 'form' prop here ? <button type="submit" onClick={() => dispatch( submit() ) }>Save</button> export default connect()(RemoteSubmitButton) 

Main component

// Import librairies import Submit from 'submitBtn' export default class extends Component { ... render(){ return ( // html code <Submit form="newuser" /> // form prop gonna be dynamic ) } } 

submit.js

import {SubmissionError} from 'redux-form' const sleep = ms => new Promise(resolve => setTimeout(resolve, ms)) function submit(values) { return sleep(1000) // simulate server latency .then(() => { window.alert(`You submitted:\n\n${JSON.stringify(values, null, 2)}`) }) } export default submit 

new.js (New User)

//Import librairies import submit from 'submit' class UserForm extends Component { render() { const {error, resetForm, handleSubmit} = this.props return (<form onSubmit={ handleSubmit }> <!-- Generate dynamic fields --> </form>) } } let FormWrapper = reduxForm({form: 'newuser', onSubmit: submit})(UserForm) const selector = formValueSelector('newuser') // <-- same as form name FormWrapper = connect(state => state.form)(FormWrapper) 

Can you tell me what I'm doing wrong? or What can I do to make it work please ?

2
  • Can you confirm what version of redux-form you are using? What you are doing certainly seems correct. Commented Nov 9, 2016 at 22:00
  • @Ashley'CptLemming'Wilson I use v6.1.1 Commented Nov 9, 2016 at 22:04

1 Answer 1

1

The submit action was added in v6.2.0 according to the release notes.

You need to upgrade your version of redux-form in order for this to work.

Edit:

In order to submit the form, you need to use the form prop in your RemoteSubmitButton component:

import React from 'react' import {connect} from 'react-redux' import {submit} from 'redux-form' const RemoteSubmitButton = ({ dispatch, form }) => // Destructure the props here <button type="submit" onClick={() => dispatch( submit(form) ) }>Save</button> export default connect()(RemoteSubmitButton) 
Sign up to request clarification or add additional context in comments.

5 Comments

I've upgraded the lib with no luck. When I specify to form an id and pass its value to submit button as form props it works. But I can do that in my case because I have many forms that use the same button.
I'm not too sure I follow. Are you saying you want a single submit button that can be used for multiple forms?
Exacty, but its not really important... I've added a prop to <Submit form='myForm' /> but I don't know how can I get its value from the body of submit component (Please see my updated code).
I've updated my answer with the form prop passed to the submit action. Is this what you mean?
Can we send paramater on submit action ?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.