0

必須のフォームフィールドを表示するために必須を使用しています。これはクロムのバグだと聞きましたが、回避策があるかどうか知りたいと思いました。私のコードは以下に掲載されています。

echo "<br><br><input class=button id=submitbutton type=submit value=\"".pcrtlang("Submit     Service Request")."\" onclick=\"this.disabled=true;this.value='".pcrtlang("Sending Request")."...'; this.form.submit();\">";

onlick 機能を削除すればうまくいくと思いますが、ユーザーが送信ボタンをダブルクリックすると問題が発生し、2 回送信されます。

二重送信を防ぐために JavaScript を使用して送信ボタンを無効にし、次に JavaScript を使用してフォームを送信します。

4

2 に答える 2

1

問題は、onclick が毎回呼び出されることです (ブラウザーによって送信されない場合でも)。onclick を onsubmit に変更することで修正できます ( JSFiddle )

 <input class="button" id="submitbutton" type="submit" value="Submit" onsubmit="this.disabled=true;this.value='Sending Request';">
于 2013-07-18T19:38:19.883 に答える
0

submit含まれているフォームのイベント にバインドし、_.debounceの概念を使用して送信の繰り返しを制限したくなるでしょう。

jQuery:

// prevent the user from submitting the form twice within a second
var DELAY = 1000;
var lastSubmit = null;

$("#form").submit(function(e) {
  if (lastSubmit === null || Date.now() - lastSubmit > DELAY)
    return true;
  // two ways to prevent the default action
  e.preventDefault();
  return false;
});

またはまっすぐな JavaScript:

// prevent the user from submitting the form twice within a second
var DELAY = 1000;
var lastSubmit = null;

document.getElementById('form').addEventListener('submit', function(e) {
  if (lastSubmit === null || Date.now() - lastSubmit > DELAY)
    return true;
  // two ways to prevent the default action
  e.preventDefault();
  return false;
});

要件を満たすように調整DELAYするか、フォームの送信に失敗して無効な状態をリセットすることができます。

フックに属性を使用する必要がある場合は、次のようになります。

echo "<form onsubmit=\"var stop = lastSubmit && Date.now() - lastSubmit <= 1000;stop && e.preventDefault();return !stop;\">";
于 2013-07-18T19:47:45.290 に答える