javascript – Getting Error Form submission canceled because the form is not connected

javascript – Getting Error Form submission canceled because the form is not connected

Quick answer : append the form to the body.

document.body.appendChild(form);

Or, if youre using jQuery as above: $(document.body).append(form);

Details :
According to the HTML standards, if the form is not associated to the browsing context(document), the form submission will be aborted.

HTML SPEC see 4.10.21.3.2

In Chrome 56, this spec was applied.

Chrome code diff see @@ -347,9 +347,16 @@

P.S about your question #1. In my opinion, unlike ajax, form submission causes instant page move.
So, showing deprecated warning message is almost impossible.
I also think its unacceptable that this serious change is not included in the feature change list. Chrome 56 features – www.chromestatus.com/features#milestone%3D56

if you are seeing this error in React JS when you try to submit the form by pressing enter, make sure all your buttons in the form that do not submit the form have a type=button.

If you have only one button with type=submit pressing Enter will submit the form as expected.

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

javascript – Getting Error Form submission canceled because the form is not connected

alternatively include
event.preventDefault();
in your
handleSubmit(event) {

see https://facebook.github.io/react/docs/forms.html

Leave a Reply

Your email address will not be published.