[javascript] 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)

This question is related to javascript jquery google-chrome jquery-1.7

The answer is


I see you are using jQuery for the form initialization.

When I try @KyungHun Jeon's answer, it doesn't work for me that use jQuery too.

So, I tried appending the form to the body by using the jQuery way:

$(document.body).append(form);

And it worked!


Adding for posterity since this isn't chrome related but this was the first thread that showed up on google when searching for this form submission error.

In our case we attached a function to replace the current div html with a "loading" animation on submission - since it occurred before the form was submitted there was no longer any form or data to submit.

Very obvious error in retrospect but in case anyone ends up here it might save them some time in the future.


<button type="button">my button</button>

we have to add attribute above in our button element


Depending on the answer from KyungHun Jeon, but the appendChild expect a dom node, so add a index to jquery object to return the node: document.body.appendChild(form[0])


I faced the same issue in one of our implementation.

we were using jquery.forms.js. which is a forms plugin and available here. http://malsup.com/jquery/form/

we used the same answer provided above and pasted

$(document.body).append(form);

and it worked.Thanks.


I was able to get rid of the message by using adding the attribute type="button" to the button element in vue.


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

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


A thing to look out for if you see this in React, is that the <form> still has to render in the DOM while it's submitting. i.e, this will fail

{ this.state.submitting ? 
     <div>Form is being submitted</div> :
     <form onSubmit={()=>this.setState({submitting: true}) ...>
         <button ...>
     </form>
}

So when the form is submitted, state.submitting gets set and the "submitting..." message renders instead of the form, then this error happens.

Moving the form tag outside the conditional ensured that it was always there when needed, i.e.

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

I noticed that I was getting this error, because my HTML code did not have <body> tag.

Without a <body>, when document.body.appendChild(form); statement did not have a body object to append.


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


I have received this error in react.js. If you have a button in the form that you want to act like a button and not submit the form, you must give it type="button". Otherwise it tries to submit the form. I believe vaskort answered this with some documentation you can check out.


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


You can also solve it, by applying a single patch in the jquery-x.x.x.js just add after " try { rp; } catch (m) {}" line 1833 this code:

if (r instanceof HTMLFormElement &&! r.parentNode) { r.style.display = "none"; document.body.append (r); r [p] (); }

This validates when a form is not part of the body and adds it.


I have found this problem in my React project.

The problem was,

  • I have set the button type 'submit'
  • I have set an onClick handler on the button

So, while clicking on the button, the onclick function is firing and the form is NOT submitting, and the console is printing -

Form submission canceled because the form is not connected

The simple fix is:

  • Use onSubmit handler on the form
  • Remove the onClick handler form the button itself, keep the type 'Submit'

I saw this message using angular, so i just took method="post" and action="" out, and the warning was gone.


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


Examples related to javascript

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax

Examples related to jquery

How to make a variable accessible outside a function? Jquery assiging class to th in a table Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Getting all files in directory with ajax Bootstrap 4 multiselect dropdown Cross-Origin Read Blocking (CORB) bootstrap 4 file input doesn't show the file name Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource how to remove json object key and value.?

Examples related to google-chrome

SessionNotCreatedException: Message: session not created: This version of ChromeDriver only supports Chrome version 81 SameSite warning Chrome 77 What's the net::ERR_HTTP2_PROTOCOL_ERROR about? session not created: This version of ChromeDriver only supports Chrome version 74 error with ChromeDriver Chrome using Selenium Jupyter Notebook not saving: '_xsrf' argument missing from post How to fix 'Unchecked runtime.lastError: The message port closed before a response was received' chrome issue? Selenium: WebDriverException:Chrome failed to start: crashed as google-chrome is no longer running so ChromeDriver is assuming that Chrome has crashed WebDriverException: unknown error: DevToolsActivePort file doesn't exist while trying to initiate Chrome Browser How to make audio autoplay on chrome How to handle "Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first." on Desktop with Chrome 66?

Examples related to jquery-1.7

Getting Error "Form submission canceled because the form is not connected" Check if any ancestor has a class using jQuery JQuery .on() method with multiple event handlers to one selector