テキストエリアでのダブルフォーム送信を防ぐ最も良い方法

Question

私はテキストエリアを持つフォームを持っています。送信ボタンをダブルクリックする人もいれば、送信後に「お待ちください」というメッセージを表示しても、何人かは依然として二重送信を管理しています。

テキスト領域の問題は、データベース内でその列を一意にすることができないため、私の質問です。これらの形式がdbに2回送信されないようにするにはどうすればよいですか。

DBに入ることがある場合もありますが、どのように表示されないようにしますか？多分ラダーはより良い選択肢でしょうか？

ありがとうございます！

Answer 1

一意の識別子を含む非表示フィールドを使用します。

そして、あなたは、データベース内の一意の識別子を格納し、その列に「UNIQUE INDEX」を追加した場合、彼らは時々

デシベルに取得しても、彼らはデータベースに取得することはできません最初の場所。

Answer 2

最初のクリック後に送信ボタンを無効にします。

あなたはjQueryのを使用していた場合など、あなたがこのようなものかもしれない：jQueryを使ってUIソリューションの

$('input[type=submit]').click(function() { 
    $(this).attr('disabled', true); 
}); 

Answer 3

は、

$("#foo").one("click", function() { 
    console.log("This will be displayed only once."); 
}); 

.one()

を見るようなものを使用これは、できるだけ迅速に二重提出問題を解決します。バックエンドで一意のサブミットを使用する場合は、一意の識別子を隠しフィールドとして使用します。

Answer 4

あなたは

var submitted = false; 
document.querySelector('form').addEventListener('submit', function(event) { 
    if (submitted) { 
     event.preventDefault(); 
    } 
    submitted = true; 
    this.querySelector('input[type="submit"]').disabled = true; 

}, false); 

jsFiddle ...のJavaScriptのビットを使用することができます。

（もちろん、これらの方法の互換性をご確認ください。）

をあなたはjQueryのを使用してしまった場合...

var submitted = false; 
$('form').submit(function(event) { 
    if (submitted) { 
     event.preventDefault(); 
    } 

    submitted = true; 
    $(this).find(':submit').prop('disabled', true); 

}); 

jsFiddle。