web-dev-qa-db-ja.com

IE9ダブルフォーム送信問題

自分の状況について誰かに情報やフィードバックがあるかどうか疑問に思っています。現在、「送信」ボタンを1回クリックすると、フォームが2回送信される「ダブルフォーム送信」の問題が発生しています。これはIE9でのみ発生しますが、私はSafari、Chrome（最新）、FF（Ver 5/6）、IE8、およびIE9に対してのみテストしました。

コードは次のとおりです。

<!DOCTYPE html>
<html lang="en-us" dir="ltr">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" >
<title>IE9 test</title>
</head>
<body>
<h1>Testing</h1>
<form method="POST" id="submit_form">
<input type="text" name="x" value="xxxx" />
<input type="text" name="y" value="yyyy" />
<button type="submit" class="btn_sign_in" id="btn_logon" onclick="this.disabled=true;document.forms[0].submit();">Submit</button>
</form>
</body>
</html>

問題のある部分は次のとおりです。

onclick="this.disabled=true;document.forms[0].submit();"

コードは何年も前から私のサイトにあり、IE9が今年リリースされて以来初めて二重送信の問題に遭遇しました。おそらく最近はIE9を使用する人が増えているため、この問題についてユーザーから苦情が寄せられています。 。

最も難しいのは、二重送信の問題が常に再現できるとは限らないことです。二重提出することもあれば、一度提出することもあります。

私の現在の回避策は、以下からの変更です。

<meta http-equiv="X-UA-Compatible" content="IE=Edge" >

に変更します：

<meta http-equiv="X-UA-Compatible" content="IE=8" >

これにより、IE9はIE8互換性を使用するようになり、送信用にJavascriptが適切に実行されます。

私はマイクロソフトのサポートに電話しましたが、これは「Javascriptの互換性の問題」であると彼らは主張しているので、IE9でサイトが正しく機能するようにJavascriptを微調整する必要があります。

とにかく、私のコードは次のとおりです。

onclick="this.disabled=true;document.forms[0].submit();"

そもそもすでに間違っていますか？他のブラウザが文句を言っていなくても、おそらくこれは最初から正しくないのでしょうか？

誰かが同様の問題に直面している場合は、さらに情報やフィードバックがあることを願っています。現在、X-UA-CompatibleをIE = 8に変更しない場合、コードを次のように変更できます。

onclick="this.disabled=true;"

これにより、二重送信の問題も解決されますが、注意が必要なIE9互換性の問題のリストもありますか？

ありがとう！

javascriptformsinternet-explorer-9double-submit-problem
14
forestclown

このコードは間違っています：

onclick="this.disabled=true;document.forms[0].submit();"

Onclick Javascriptは、通常の送信が同様に実行されないことを保証するものではありません。そのためには、次のようにfalseを返す必要があります。

onclick="this.disabled=true;document.forms[0].submit(); return false;"

この動作の変更はIE9のバグですか？これは、タイミングの問題の結果である法的行動に依存する可能性があります。 DOM/Javacript標準が、document.submit（）がドキュメント内のすべての実行の終わりであることを保証している場合、これはバグにすぎません。私はこれが事実であるとは思わない。

20
Kdeveloper

複雑さを抽象化すると、問題はIE9はボタンを1回クリックするだけでフォームを2回送信する送信イベントがjavascriptで発生した場合に発生するようです。

一般に、これを行うとIE9の二重フォーム送信の問題が修正されることがわかりました。

（IE9の二重送信HTMLの失敗）：

<input type="submit" />

（IE9 html二重提出修正）：

<input type="submit" onclick="return false; " />

したがって、基本的に、私はイベントリスナー（クリック）を使用してjavascript（図には示されていません）でフォーム送信を処理していますが、IE9がすでに処理している場合でも自動的に呼び出すように見える古い学校のイベントハンドラー（onclick）でfalseを返しますイベントリスナー。

私はあなたが純粋なJavaScriptで同じことをすることができると推測しています：

inputElement.onclick = function(){ return false; };

しかし、私はそれをテストしませんでした。

5
ORIGINALUSRNM

使用する場合

onclick="document.forms[0].submit();"

送信ボタンに、input type="button"の代わりにtype="submit"と入力します。

1
vatan

.submit（）を実行するコードがすでにあるので、ボタンの種類を送信ではなく単純なボタンに変更してみませんか？

1
Kelmen

これが問題であるかどうかはわかりませんが、平易な英語に翻訳すると、コードは「送信ボタンをクリックしたら、無効な属性をtrueに設定してから、フォームを送信してください」と表示されます。

ただし、送信ボタンをクリックするとすでにフォームが送信されているため、ブラウザが2つの送信リクエストを受信して​​いる可能性があります。1つはボタンをクリックしたとき、もう1つはJavaScriptが送信を指示したときです。

Ajaxを実行していない場合は、通常の送信だけで、submitを呼び出す代わりに_return true_を実行できるはずです。基本的に、ブラウザに先に進んでデフォルトのアクション（送信）を実行するように指示します。 。

または、実際には、冗長であるため、submit()部分全体を完全に削除します。

1
Philip Schweiger

問題の一部は、あなたが2回提出していると私が信じていることです。 2番目のイベントを開始する前に、最初のイベントを停止する必要があります。インラインJavaScriptを使用してイベントを停止する方法の詳細については、この投稿を参照してください： インラインonclick属性を使用してイベントの伝播を停止する方法は？

1
Adam Eberlin

iE9でも同じ問題が発生し、イベントのcancelBubbleフラグとreturnValueフラグをそれぞれtrueとfalseに設定することで問題を解決しました。

0
Thambu Samuel Asirvatham