Getting Error "Form submission canceled because the form is not connected"

I have an old website with JQuery 1.7 which works correctly till two days ago. Suddenly some of my buttons do not work anymore and, after clicking on them, I get this warning in the console:

Form submission canceled because the form is not connected

The code behind the click is something like this:

 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();
 }

It seems that Chrome 56 doesn't support this kind of code anymore. Isn't it? If yes my question is:

1. Why did this happened suddenly? Without any deprecation warning?
2. What is the workaround for this code?
3. Is there a way to force chrome (or other browsers) to work like before without changing any code?

P.S. It doesn't work in the latest firefox version either (without any message). Also it does not work in IE 11.0 & Edge! (both without any message)

Quick answer : append the form to the body.

document.body.appendChild(form);

Or, if you're 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 it's 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

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

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

add attribute type="button" to the button on who's click you see the error, it worked for me.

You must ensure that the form is in the document. You can append the form to the body.