Getting Error Form submission canceled because the form is not connected

Question

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       lt form method  post  gt  lt input type  submit    gt  lt input type  hidden  name  layout    gt  lt  form gt    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    Why did this happened suddenly  Without any deprecation warning  What is the workaround for this code  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  amp  Edge   both without any message

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

A thing to look out for if you see this in React  is that the  lt form gt  still has to render in the DOM while it s submitting   i e  this will fail    this state submitting          lt div gt Form is being submitted lt  div gt          lt form onSubmit      gt this setState  submitting  true       gt            lt button     gt        lt  form gt      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    lt form onSubmit           gt      this state submitting          lt div gt Form is being submitted lt  div gt          lt button     gt       lt  form gt

User · Answer

I noticed that I was getting this error  because my HTML code did not have  lt body gt  tag  Without a  lt body gt   when document body appendChild form   statement did not have a body object to append

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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  amp  amp   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

User · Answer

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

User · Answer

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

User · Answer

add attribute type  button  to the button on who s click you see the error  it worked for me

User · Answer

alternatively include   event preventDefault    in your   handleSubmit event     see https   facebook github io react docs forms html

User · Answer

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

User · Answer

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

User · Answer

lt button type  quot button quot  gt my button lt  button gt   we have to add attribute above in our button element

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

Examples related to javascript

Examples related to jquery

Examples related to google-chrome

Examples related to jquery-1.7