Redux-form: Form submission canceled because the form is not connected

Created on 13 Mar 2017 · 8Comments · Source: redux-form/redux-form

The WARNING: "Form submission canceled because the form is not connected" appears on the console when the user clicks in a cancel button that has the following code:

  handleCancel = (evt) => {
    this.props.reset();
    this.props.router.replace('/');
  }

What is the right way to CANCEL the form submission and navigating away from the page that has a redux-form?

I am using:

redux-form: ^6.5.0
react-router: ^3.0.2
semantic-ui-react: ^0.66.0
apollo-client: ^0.8.7

When the user clicks in the submit button, everything works fine (data is mutate using Apollo Client and navigating away from the page that has the form): no warning is shown

Source

marciobueno1

Most helpful comment

That's pretty strange. My guess is that you have:

<button onClick={this.handleCancel}>Cancel</button>

and it should be

<button type="button" onClick={this.handleCancel}>Cancel</button>
        ^^^^^^^^^^^^^

I think that most browsers default a <button/> to be a submit button, so you are both trying to submit the form and navigate away.

Another option is to call evt.preventDefault() in your handleCancel() function.

erikras on 13 Mar 2017

👍125 🎉37 ❤15 😄10 🚀7 👀2 😕1

All 8 comments

That's pretty strange. My guess is that you have:

<button onClick={this.handleCancel}>Cancel</button>

and it should be

<button type="button" onClick={this.handleCancel}>Cancel</button>
        ^^^^^^^^^^^^^

I think that most browsers default a <button/> to be a submit button, so you are both trying to submit the form and navigate away.

Another option is to call evt.preventDefault() in your handleCancel() function.

erikras on 13 Mar 2017

👍125 🎉37 ❤15 😄10 🚀7 👀2 😕1

Thank you, so much, @erikras!!!

I am using a Button from 'semantic-ui-react', and both solution works, using evt.preventDefault() OR using putting the type'button'

                <Button
                  secondary
                  disabled={submitting}
                  floated='right'
                  icon size='small'
                  labelPosition='left'
                  onClick={this.handleCancel}
                  type='button'
                >
                  <Icon name='cancel' />Cancelar
                </Button>

Are there one preferred solution?

marciobueno1 on 14 Mar 2017

🎉3 👍1

I have the same warning in my UI that is done in Angularjs. But the context is different. I get this warning when I click on the 'a' tag to download a report from a dashboard. There are two tags, 1 for excel sheet, and the second one to download as pdf.
I have copied the code below. export is the function triggered when those icons are clicked.

$scope.export = function (format) {
            var form = document.createElement("form");
            form.setAttribute("target","_blank");
            form.setAttribute("role","form");
            form.setAttribute("method","post");
            form.setAttribute("action","/reportServer"+format.charAt(0).toUpperCase()+format.substr(1));
            var formatInput = document.createElement("input");
            formatInput.setAttribute("name","format");
            formatInput.value = format;
            form.appendChild(formatInput);
            var queryInput = document.createElement("input");
            queryInput.setAttribute("name","queryData");
            var queryData = getReportQuery();
            queryInput.value = angular.toJson(queryData);
            form.appendChild(queryInput);
            var parametersInput = document.createElement("input");
            parametersInput.setAttribute("name","parameters");
            parametersInput.value = $scope.report.distributions.join();
            form.appendChild(parametersInput);
            var fieldsInput = document.createElement("input");
            fieldsInput.setAttribute("name","fields");
            fieldsInput.value = $scope.report.fields.join();
            form.submit();
        };