[解決済み】"フォームが接続されていないため、フォームの送信がキャンセルされました "というエラーの取得について
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
関連
-
[解決済み】Uncaught SyntaxError: JSONの位置0に予期しないトークンuがあります。
-
[解決済み】JavaScriptでインラインIF文の書き方は?
-
[解決済み】 `string.split is not a function` というエラーの原因は何ですか?
-
[解決済み] とは何ですか! (not not)演算子とは何ですか?
-
[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか?
-
[解決済み] イベントを発生させた要素のIDを取得する
-
[解決済み] JSLintが突然レポートする。"use strict" の関数形式を使用する
-
[解決済み] JavaScriptでクライアントのタイムゾーン(およびオフセット)を取得する
-
[解決済み] デベロッパーツールを使って、Chromeのボタンや要素で実行されるコードを調べる方法
-
[解決済み】フォームのhiddenフィールドにjQueryの".val() "を使って値を設定してもうまくいかない。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
JavaScriptにおけるマクロタスクとミクロタスクの詳細
-
vue3.0プロジェクトのアーキテクチャを構築するための便利なツール
-
JavaScriptのクロージャの説明
-
vue+webrtc(Tencent cloud)ライブ機能の実践を実現するために
-
vueディレクティブv-bindの使用と注意点
-
[解決済み】GETできない / Nodejsエラー
-
[解決済み] 期待される代入または関数呼び出し: 未使用式なし ReactJS
-
[解決済み】 `string.split is not a function` というエラーの原因は何ですか?
-
nodejs unhandledPromiseRejectionWarning メッセージ
-
[解決済み] POSTフォームを送信した後、新しいウィンドウを開いて結果を表示する