どうもイハラです。

会員登録画面や決済画面などのデータ送信フォームで送信ボタンをクリックしても、なかなか送信されないために何度も送信ボタンをクリックされ、同じデータが重複して送信されてしまうことがあります。

二重送信による問題点

では、実際に二重送信で起こる問題の具体例を紹介します。

  • 同じ内容のお問い合わせメールが送信される
  • 同じ入力データが登録される
  • 1つしか買っていないものが複数購入される

実際は、システム側で重複確認を行うのが一般的なので上記のようなことが起こることは少ない。

ですが、古いシステムやフリーウェアなどの中には二重送信対策がされていないものもあり、これらの問題が発生する可能性は0ではありません。

送信する段階で二重送信を防ぐべき

お問い合わせとかであればいいけど、決済などはサイト運用側だけでなくユーザーにとっても二重送信は非常に困ります。

そこで、今回は送信ボタンの二度押しを防ぎ、二重送信を防止するJavascriptのソースコードを紹介します。

送信ボタンの二度押しを防ぐ

一般的によくあるのは下のような入力フォームです。

<form id="myForm" action="/form.php">
  <input type="text" name="name" placeholder="名前を入力してください">
  <input type="submit" value="送信">
</form>

一度送信ボタンをクリックして送信処理が開始された段階で、送信ボタンを無効化すれば、二度押しを防ぐことができます。

実際のソースは以下の通りです。

document.getElementById('myForm').addEventListener('submit', function(){
    // フォーム送信されると実行される
    var elements = this.elements;
    for (var i = 0; i < elements.length; i++) {
        if (elements[i].type == 'submit') {// type属性値がsubmitの場合
            elements[i].disabled = true;// disabledにする
        }
    }
});

何をしているかというと、送信（submit）をしたら、form内にあるすべての送信ボタン（<input type=”submit” … >）を無効（disabled）にしています。

複数の入力フォームがある場合

複数の入力フォームに対して二重送信対策をする場合は、document.formsを使って二重送信防止スクリプトを割り当てる方法もあります。

  • サイト全体に散らばっている入力フォームがある
  • 同じ画面に大量の入力フォームがある

そういった場合は以下の方法が楽かもしれません。

for (var i = 0; i < document.forms.length; i++) {
    document.forms[i].addEventListener('submit', function(e){
        var elements = this.elements;
        for (var n = 0; n < elements.length; n++) {
            if (elements[n].type == 'submit') {
                elements[n].disabled = true;
            }
        }
    });
}

自分は可能な限りひとつずつ設定しますけどね。

フォームも様々なので、フォームの内容にあった対策をしてテストをしたほうがよいと考えています。