Home/ Questions/Simple solutions for the form submission canceled because the form is not connected error
Next
Answered
Léo Besnard
  • 13
Asked: 2022-05-17T12:54:59+00:00 In:

Simple solutions for the form submission canceled because the form is not connected error

  • 13

. Advertisement .

..3..

. Advertisement .

..4..

Here is the program I run:

this.handleExcelExporter = function(href, cols) {
  var form = $('<form method="post"><input type="submit" /><input type="hidden" name="layout" /></form>').attr('action', href);
  $('input[name="layout"]', form).val(JSON.stringify(cols));
  $('input[type="submit"]', form).click();
  }

After I run, it returns an error:

Form submission canceled because the form is not connected

Does anyone have any suggestions for the problem below: form submission canceled because the form is not connected in the javascript – How to correct it?

the form is not connected
Share

2 Answers

  1. Best Answer
    Expert

    The cause: Conforming to HTML (Hypertext Markup Language) standards. The form submission will be failed if it is not related to the browsing contexts or document.

    After submitting the form, state.submitting is set, and instead of the form, the “submitting…” message is rendered, resulting in this error.

    Solution: You must make certain that the form is included in the document. The form can be appended to the body to avoid this problem.

    The form tag should be moved outside of the conditional to guarantee that it was always available when needed

    <form onSubmit={...} ...>
{ this.state.submitting ?
<div>Form is being submitted</div> :
<button ...>
}
</form>
    • 19

  2. If you see this error in React JS while you attempt to submit the form by pressing Enter, ensure that all buttons on the form that don’t submit the form have a type="button".

    You can submit the form if you only have one button by pressing Enter.

    References: https://dzello.com/blog/2017/02/19/demystifying-enter-key-submission-for-react-forms/ https://github.com/facebook/react/issues/2093

    • 13

Leave an answer

You must login to add an answer.

Need An Account,