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 = $('<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:

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 & Edge! (both without any message)

score 211 · Accepted Answer · edited Oct 28 '22 at 07:21

211

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

edited Oct 28 '22 at 07:21

Soviut

88,194
49
192
260

answered Feb 07 '17 at 04:39

KyungHun Jeon

2,145
1
9
8

5

Just had this bug reported by some users. Also, some other users didn't had the upgraded version, so they could submit the form without problems. Making the bug more inconsistent. Thanks for your answer! – Ironicnet Feb 08 '17 at 18:30
The proposed solution didn't work for me in combination with the use of jQuery, as in the original question. This worked instead: `$(document.body).append(form);` – Chris Feb 20 '17 at 07:51
1

@Chris I just edited the accepted answer, since the form variable is a jQuery object, not the actual DOM form element. As it was using `form[0]`, it would produce an error "Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'." in Chrome. Thus, just change to `document.body.appendChild(form[0])`. – ryanm Mar 02 '17 at 16:35
@ryanm, I am just an editor as I contributed the following line `$(document.body).append(form);`. You're welcome add your solution to the accepted answer by editing it or asking @KyungHun Jeon if he want's to adopt your solution instead of his. – Chris Mar 03 '17 at 12:09
@Chris thanks! I figured since the question was in jQuery, the answer should be too (can be confusing), but my edit looks like it was rejected. Just a note then for other passers by that it can be `document.body.appendChild(form[0])` (slightly faster) OR `$(document.body).append(form)`. – ryanm Mar 06 '17 at 23:37

vaskort · Answer 2 · 2019-09-17T11:36:59.327

117

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

edited Sep 17 '19 at 11:36

answered Dec 16 '17 at 18:00

vaskort

2,591
2
20
29

9

also a thing to look out for in React, the `
` still has to render in the DOM after it's clicked. i.e, this will fail ` { this.state.submitting ?
Form is being submitted
:
this.setState({submitting: true}) ...>
} ` 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. – Mike Ruhlin Oct 18 '18 at 16:22
Nice to know. I guess you don't have to change the whole `form` element to a `div`. I believe that if you just change the contents of the `form` instead of replacing the element it it will work as expected. – vaskort Oct 20 '18 at 10:58
So, like Max Williams said, it's a race condition - the browser is checking if the form is there, but the form is already gone. – pianoJames Nov 16 '18 at 03:25
preventDefault() causes this alert from Chrome – imbatman Jun 20 '19 at 09:07
First link is broken: https://web.archive.org/web/20170410070341/http://dzello.com/blog/2017/02/19/demystifying-enter-key-submission-react-forms-multiple-buttons/ – cmp Sep 16 '19 at 19:02
1

Thanks a lot! I have been trying to load a new page after axios.post request and clicking the button would just refresh the page before the requests could happen! – Catalina T. Feb 05 '20 at 05:56
I know this fact and I *still* miss it from time to time. Thanks! – Andrew Smith May 13 '21 at 00:43

score 29 · Answer 3 · answered Jan 25 '19 at 12:04

29

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

answered Jan 25 '19 at 12:04

Tayyab Mehar

321
3
7

score 21 · Answer 4 · answered Jun 13 '17 at 14:29

21

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

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

answered Jun 13 '17 at 14:29

joncode

221
2
2

2

Links to external resources are encouraged, but please add context around the link so your fellow users will have some idea what it is and why it’s there. Always quote the most relevant part of an important link, in case the target site is unreachable or goes permanently offline. See [how to write a good answer](https://stackoverflow.com/help/how-to-answer) – Peter Reid Jun 13 '17 at 14:36
Using `àntd` forms. This helped. – Eduard Aug 28 '19 at 15:44

score 12 · Answer 5 · answered Jan 29 '21 at 02:10

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'

Liu Tao · Answer 6 · 2017-02-08T02:09:24.007

11

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

edited Feb 08 '17 at 02:09

answered Feb 06 '17 at 03:20

Liu Tao

111
4

8

I had this and it turned out there was an onclick added to the remote form submit button, which removed the form's containing element. So there was basically a race condition between the form being submitted and the form being removed. – Max Williams Nov 02 '17 at 12:18
4

Thanks @Max Williams, your comment put me back on track more than the accepted answer. – JirkaV Jan 26 '18 at 09:25

Rizki Pratama · Answer 7 · 2017-02-10T03:12:05.617

9

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!

edited Feb 10 '17 at 03:12

answered Feb 10 '17 at 02:40

Rizki Pratama

551
4
23

if you couldn't find the form try this $(document.body).append($('form')); – Ariwibawa Feb 24 '21 at 05:01

score 7 · Answer 8 · answered Sep 01 '20 at 07:03

7

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

we have to add attribute above in our button element

answered Sep 01 '20 at 07:03

Balanagu Yashwanth

299
4
7

score 6 · Answer 9 · answered Oct 18 '18 at 16:26

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>

score 2 · Answer 10 · answered Mar 17 '17 at 07:56

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.

score 2 · Answer 11 · answered Jun 23 '20 at 09:42

2

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

answered Jun 23 '20 at 09:42

Pasham Akhil Kumar Reddy

437
5
9

score 2 · Answer 12 · answered Jun 16 '21 at 19:53

An example of Mike Ruhlin's answer, I was redirecting with react-router-dom Redirect on form submission.

Placing e.preventDefault() into my submit function removed the warning for me

const Form = () => {

    const [submitted, setSubmitted] = useState(false);
    const submit = e => {
      e.preventDefault();
      setSubmitted(true);
    }

    if (submitted) {
        return <Redirect push to={links.redirectUrl} />
    };

    return (
          <form onSubmit={e => submit(e)}>
          ...
          </form>

    );
};

export default Form;

moti irom · Answer 13 · 2017-02-12T09:13:03.193

1

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

edited Feb 12 '17 at 09:13

answered Feb 09 '17 at 12:35

moti irom

51
7

2

You mean `document.body.appendChild(form[0])` ? – efeder Feb 09 '17 at 17:53

score 1 · Answer 14 · answered Jan 05 '19 at 15:47

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.

score 1 · Answer 15 · answered Oct 04 '19 at 20:48

1

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.

answered Oct 04 '19 at 20:48

Isaiah Larsen

11
2

It's a warning: Form submission canceled because the form is not connected. Sorry for forgetting to add that. – Isaiah Larsen Oct 07 '19 at 14:44
1

I can confirm this. I got the same warning in React, `Form submission canceled because the form is not connected` whenever I pressed my form's "Cancel" button. After adding `type="button"` to my "Cancel" button, I no longer receive the warning. Thanks! – Ben Nov 02 '19 at 11:09

Mbugua_J · Answer 16 · 2022-06-14T13:11:54.133

1

if using react and something like formik, the issue seems to be in the onClick handlers in the submit button

edited Jun 14 '22 at 13:11

answered Jun 14 '22 at 12:59

Mbugua_J

47
8

score 0 · Answer 17 · answered Feb 07 '18 at 18:06

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.

score 0 · Answer 18 · edited Jul 23 '20 at 17:44

0

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.

edited Jul 23 '20 at 17:44

Roberto Caboni

7,252
10
25
39

answered Jul 23 '20 at 16:02

Gleno

85
4

score 0 · Answer 19 · answered May 12 '23 at 14:57

The <form> must be there existing in the DOM in first load, not 'display: none' or conditionally available only in the DOM. If the form (like a modal window) the logic must be 'visibility: hidden' instead of 'display: none' on your CSS, or else when that form send a 'POST' or 'GET', etc.. that error will appear. In my personal experience. I'm using Svelte.

score -1 · Answer 20 · answered Mar 03 '17 at 01:55

-1

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

answered Mar 03 '17 at 01:55

heavyrick

384
7
16

score -1 · Answer 21 · edited Oct 31 '22 at 16:25

-1

Your button has to be in the context of Form tag
button type="submit"
I was also facing the same issue , I removed onClick={onSubmit} form the button tag (I used Formik here)

edited Oct 31 '22 at 16:25

Tyler2P

2,324
26
22
31

answered Oct 28 '22 at 07:42

KarthigaSubbiah

1
1

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

21 Answers21

Linked

Related