1. ホーム
  2. Web プログラミング
  3. ジャバスクリプト

[解決済み】"フォームが接続されていないため、フォームの送信がキャンセルされました "というエラーの取得について

2021-12-28 19:16:16

質問内容

JQuery 1.7を使用したWebサイトがあり、以前は正常に動作していたのですが、最近一部のボタンが動作せず、クリックするとエラーが表示されます。

Form submission canceled because the form is not connected

ボタンをクリックするコードは以下の通りです。

 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はもうこの種のコードをサポートしていないようです。また、最新のfirefoxとIE 11.0 & Edgeでも動作しません。(何のメッセージもなく)

解決方法は?

即答:フォームをボディに追加する。

document.body.appendChild(form);

あるいは、上記のようにjQueryを使っている場合。 $(document.body).append(form);

詳細 HTML 標準によると、フォームが閲覧中のコンテキスト(ドキュメント)と関連付けられていない場合、フォームの送信は中断されます。

HTML SPEC 4.10.21.3.2参照

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

クロームコード差分 を参照 @@ -347,9 +347,16 @@。

追伸:質問その1について。私の意見では、ajaxとは異なり、フォーム送信は即座にページ移動を引き起こします。
そのため、「非推奨の警告メッセージ」を表示することは、ほとんど不可能です。
また、この重大な変更が機能変更リストに含まれていないのは容認できないことだと思います。Chrome 56の機能 www.chromestatus.com/features#milestone%3D56