web-dev-qa-db-ja.com

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

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

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

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

 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. コードを変更せずに、クロム（または他のブラウザ）を以前のように動作させる方法はありますか？

P.S 最新のFirefoxバージョンでも動作しません（メッセージなし）。 IE 11.0＆Edgeでも動作しません。 （どちらもメッセージなし）

javascriptjquerygoogle-chromejquery-1.7
126
Mahmoud Moravej

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

document.body.appendChild(form);

または、上記のようにjQueryを使用している場合は、次のようにします。$(document.body).append(form);

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

HTML SPEC 4.10.21.3.2を参照

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

Chromeコードの差分 @@ -347,9 + 347,16 @@を参照

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

159
KyungHun Jeon

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

type="submit"を含むbuttonが1つしかない場合は、Enterキーを押すとフォームが正しく送信されます。

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

23
vaskort

フォームが文書内にあることを確認する必要があります。体にフォームを追加することができます。

11
Liu Tao

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

@KyungHun Jeonの答えを試してみると、jQueryを使っている私にはうまくいきません。

それで、私はjQueryの方法を使って本体にフォームを追加しようとしました：

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

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

8
Rizki Pratama

あるいはevent.preventDefault（）をインクルードします。 handleSubmit（event）で{

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

7
joncode

クリックした人にエラーが表示されたボタンに属性 type = "button" を追加してください。

3
Tayyab Mehar

あなたが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>
3
Mike Ruhlin

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

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

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

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

そしてそれはうまくいった。ありがとう。

1
Abhinav Chawla

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

1
moti irom

また、jquery-x.x.x.jsに単一のパッチを適用して、 "try {rp;} catch（m）{}"の1833行目の後に次のコードを追加するだけで解決できます。

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

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

0
Gaytan

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

今回の場合は、現在のdiv htmlを送信時に「読み込み中」のアニメーションに置き換える機能を追加しました。フォームが送信される前に発生したため、送信するフォームやデータはありませんでした。

振り返ってみると非常に明らかな誤りですが、誰かがここに来た場合には将来的にそれらをいくらか節約するかもしれません。

0
Matt H