エラー「フォームが接続されていないため、フォームの送信がキャンセルされました」が発生する

156

私は2日前まで正しく動作するJQuery 1.7の古いウェブサイトを持っています。突然、一部のボタンが機能しなくなり、ボタンをクリックした後、コンソールに次の警告が表示されます。

フォームが接続されていないため、フォームの送信はキャンセルされました

クリックの背後にあるコードは次のようなものです：

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

Chrome 56はこの種のコードをサポートしていないようです。だよね？はいの場合、私の質問は次のとおりです。

  1. なぜこれが突然起こったのですか？非推奨の警告はありませんか？
  2. このコードの回避策は何ですか？
  3. コードを変更せずに、Chrome（または他のブラウザ）を以前と同じように強制する方法はありますか？

PS それは最新のfirefoxバージョンでも機能しません（メッセージなし）。また、IE 11.0およびEdgeでは機能しません。（どちらもメッセージなし）

javascript  jquery  google-chrome  jquery-1.7 
— マフムード・モラベジ
ソース
承認された回答に修正を追加して、フォームがjQueryオブジェクトであるという事実に一致させました。これは、jQuery .submit()ハンドラーにも影響することに注意してください（.click()上記のメソッドに加えて）。
— Ryanm

回答:

185

クイックアンサー：フォームを本文に追加します。

document.body.appendChild(form);

または、上記のjQueryを使用している場合： $(document.body).append(form);

詳細：HTML標準によれば、フォームがブラウジングコンテキスト（ドキュメント）に関連付けられていない場合、フォームの送信は中止されます。

HTML SPEC 4.10.21.3.2を参照

Chrome 56では、この仕様が適用されました。

Chromeコードの違いは@@ -347,9 +347,16 @@を参照

PSあなたの質問＃1について。私の意見では、ajaxとは異なり、フォームの送信によりページが瞬時に移動します。
したがって、「非推奨の警告メッセージ」を表示することはほとんど不可能です。
また、この重大な変更が機能変更リストに含まれていないことも受け入れられないと思います。Chrome 56の機能-www.chromestatus.com/features#milestone%3D56

— チョンフン・ジョン
ソース
4
一部のユーザーからこのバグが報告されました。また、一部のユーザーはアップグレードされたバージョンを持っていなかったため、問題なくフォームを送信できました。バグをより矛盾させます。ご回答有難うございます！
— Ironicnet 2017
提案されたソリューションは、元の質問のように、jQueryの使用と組み合わせて機能しませんでした。これは代わりに機能しました： $(document.body).append(form);
— Chris
1
@Chrisフォーム変数はjQueryオブジェクトであり、実際のDOMフォーム要素ではないため、受け入れた回答を編集しました。を使用form[0]していたため、「「ノード」で「appendChild」を実行できませんでした。パラメータ1のタイプが「ノード」ではありません。」というエラーが発生しました。Chromeで。したがって、単にに変更しdocument.body.appendChild(form[0])ます。
— ryanm 2017年
@ryanm、私は次の行を寄稿したので、単なる編集者です$(document.body).append(form);。承認された回答にソリューションを追加するか、編集するか、@ KyungHun Jeonに彼の代わりにソリューションを採用するかどうか尋ねます。
— Chris
@クリスありがとう！質問がjQueryにあるため、答えもそうであるはずです（混乱を招く可能性があります）が、私の編集は拒否されたように見えます。それから他の通行人のためのメモはそれがdocument.body.appendChild(form[0])（少し速い）OR であるかもしれないということ$(document.body).append(form)です。
— ryanm
50

Enterを押してフォームを送信しようとしたときにReact JSでこのエラーが発生した場合は、フォームを送信しないフォーム内のすべてのボタンにがあることを確認してくださいtype="button"。

Enterキーbuttonをtype="submit"押して1つしか持っていない場合は、期待どおりにフォームが送信されます。

参照：
https : //dzello.com/blog/2017/02/19/demystifying-enter-key-submission-for-react-forms/ https://github.com/facebook/react/issues/2093

— vaskort
ソース
6
また、Reactで注意すべき点は、<form>クリックされた後もDOMでレンダリングする必要があることです。つまり、これは失敗します `{this.state.submitting？<div>フォームが送信されています</ div>：<form onSubmit = {（）=> this.setState（{submitting：true}）...> <button ...> </ form>} `したがって、フォームが送信され、state.submitting設定され、フォームの代わりに「submitting ...」メッセージが表示されると、このエラーが発生します。formタグをコンディショナルの外に移動すると、必要なときに常にそこにあることが保証されます。
— マイクルーリン、
知っておくといい。form要素全体をに変更する必要はないと思いますdiv。form要素を置き換えるのではなく、のコンテンツを変更するだけで、期待どおりに機能すると思います。
— vaskort 2018年
マックス・ウィリアムズが言ったように、それは競合状態です-ブラウザーはフォームがそこにあるかどうかをチェックしていますが、フォームはすでになくなっています。
— pianoJames
preventDefault（）により、Chromeからこのアラートが発生します
— imbatman
— CMP
12

属性type = "button"をボタンに追加します。クリックするとエラーが表示されます。これでうまくいきました。

— タイヤブ・メハール
ソース
私にとってはうまく機能している：thumbsup：
— cederlof
11

フォームがドキュメント内にあることを確認する必要があります。本体にフォームを追加できます。

— リウ・タオ
ソース
7
私はこれを持っていて、フォームの包含要素を削除するonclickがリモートフォームの送信ボタンに追加されたことがわかりました。そのため、送信されるフォームと削除されるフォームの間には基本的に競合状態がありました。
— マックスウィリアムズ
4
@Max Williamsに感謝します。あなたのコメントにより、私は受け入れられた回答よりも順調に戻ってきました。
— JirkaV 2018年
11

または、event.preventDefault（）;を含めます。あなたのhandleSubmit（event）{

https://facebook.github.io/react/docs/forms.htmlを参照してください

— ジョンコード
ソース
2
外部リソースへのリンクを推奨しますが、リンクの前後にコンテキストを追加して、他のユーザーがそれが何であるか、なぜそこにあるのかを理解できるようにしてください。ターゲットサイトにアクセスできない場合や、完全にオフラインになる場合に備えて、重要なリンクの最も関連性の高い部分を常に引用してください。良い答えを書く方法を
— Peter Reid
àntdフォームを使用する。これは役に立ちました。
— エデュアルド
8

フォームの初期化にjQueryを使用しているようですね。

@KyungHun Jeonの答えを試してみると、jQueryを使用することもできません。

そこで、jQueryの方法を使用してフォームを本文に追加してみました。

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

そしてそれはうまくいった！

— リズキ・プラタマ
ソース
6

これをReactで見た場合に注意すべきことは、<form>送信中にDOMでレンダリングする必要があるということです。つまり、これは失敗します

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

そのため、フォームが送信され、state.submitting設定され、フォームの代わりに「submitting ...」メッセージが表示されると、このエラーが発生します。

formタグをコンディショナルの外に移動すると、必要なときに常にそこにあることが保証されます。

<form onSubmit={...} ...>
  { this.state.submitting ? 
     <div>Form is being submitted</div> :
     <button ...>
  }
</form>
— マイク・ルーリン
ソース
レースコンディション！
— pianoJames
2

私たちの実装の1つで同じ問題に直面しました。

私たちはjquery.forms.jsを使用していました。これはフォームプラグインであり、ここから入手できます。http://malsup.com/jquery/form/

上記と同じ回答を使用して貼り付けました 

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

そしてそれは働いた。ありがとう。

— アビナフ・チャウラ
ソース
1

KyungHun Jeonからの回答にもよりますが、appendChildはdomノードを想定しているため、jqueryオブジェクトにインデックスを追加してノードを返します。 document.body.appendChild(form[0])

— moti irom
ソース
2
つまりdocument.body.appendChild(form[0])？
— エフェダー2017
1

これはChrome関連ではないので後世のために追加しますが、これはこのフォーム送信エラーを検索したときにGoogleに表示された最初のスレッドでした。

今回のケースでは、送信時に現在のdiv htmlを「読み込み中」のアニメーションに置き換える関数をアタッチしました-フォームが送信される前に発生したため、送信するフォームやデータがなくなりました。

振り返ってみると非常に明らかなエラーですが、誰かがここに到着した場合に備えて、将来的にそれらを節約できる可能性があります。

— マットH
ソース
1

私はreact.jsでこのエラーを受け取りました。フォームにボタンのように機能させ、フォームを送信しないボタンがある場合は、type = "button"を指定する必要があります。それ以外の場合は、フォームの送信を試みます。私はvaskortがあなたがチェックできるいくつかのドキュメントでこれに答えたと思います。

— イザヤラーセン
ソース
警告です：フォームが接続されていないため、フォームの送信はキャンセルされました。追加するのを忘れてすみません。
— Isaiah Larsen
1
確認できます。Form submission canceled because the form is not connectedフォームの[キャンセル]ボタンを押すたびに、React でも同じ警告が表示されました。type="button"「キャンセル」ボタンに追加した後、警告が表示されなくなりました。ありがとう！
— ベン
0

「try {rp;} catch（m）{}」行1833の後に次のコードを追加するだけで、jquery-xxxjsに単一のパッチを適用することで、このコードを解決することもできます。

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

これは、フォームが本文の一部でない場合に検証し、それを追加します。

— ゲイタン
ソース
0

HTMLコードに<body>タグがなかったため、このエラーが発生していることに気付きました。

なしの<body>場合、when document.body.appendChild(form);ステートメントには追加するbodyオブジェクトがありませんでした。

— グレノ
ソース
-1

Angularを使用してこのメ​​ッセージを見たので、method = "post"とaction = ""を取り出しただけで、警告は出ていません。

— Heavyrick
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.