Reputation: 9042

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:

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)

Upvotes: 223

Answers (23)

Hao Zonggang

Reputation: 73

In my case, I put a form inside the DropdownMenu.Item of Radix Primitives' Dropdown Menu component, I was able to solve this by applying asChild={true} to it.

<DropdownMenuItem asChild={true}>
    <form>
    ...
    </form>
</DropdownMenuItem>

Upvotes: 0

jay-danger

Reputation: 663

In case this helps anyone else: in my case (ReactJS with C# MVC backend), the issue ended up being a missing anti-forgery token. The server built a new viewmodel and redirected to the same page but with no anti-forgery token. Once it was added, the issue was solved.

Upvotes: 0

mike_s

Reputation: 171

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.

Upvotes: 0

KarthigaSubbiah

Reputation: 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)

Upvotes: -1

KyungHun Jeon

Reputation: 2165

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

Upvotes: 213

Mbugua_J

Reputation: 75

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

Upvotes: 1

Sam

Reputation: 2351

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;

Upvotes: 2

Sadat Jubayer

Reputation: 249

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'

Upvotes: 16

Balanagu Yashwanth

Reputation: 329

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

we have to add attribute above in our button element

Upvotes: 7

Gleno

Reputation: 83

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.

Upvotes: 0

Pasham Akhil Kumar Reddy

Reputation: 447

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

Upvotes: 2

Isaiah Larsen

Reputation: 11

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.

Upvotes: 1

vaskort

Reputation: 2861

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

Upvotes: 141

Tayyab Mehar

Reputation: 361

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

Upvotes: 33

Matt H

Reputation: 740

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.

Upvotes: 1

Mike Ruhlin

Reputation: 3556

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>

Upvotes: 6

Gaytan

Reputation: 127

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.

Upvotes: 0

joncode

Reputation: 261

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

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

Upvotes: 25

Abhinav Chawla

Reputation: 29

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.

Upvotes: 2

heavyrick

Reputation: 394

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

Upvotes: -1

moti irom

Reputation: 51

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

Upvotes: 1