【JavaScript】フォームの送信ボタンの2重クリックを防止する方法

村上 著者:村上

【JavaScript】フォームの送信ボタンの2重クリックを防止する方法

最近このフォームの2重送信に悩まされているので、とりあえず思いついた対処をメモ。
しかし、まだ解決には至っていません…何故効かないのか…。

 

■ ボタンを無効化する(disabled)

送信ボタンを押した後、JavaScriptで、そのボタンを押せなくする方法です。
これが一番わかりやすいかな?
サンプルコードは下記のとおりです。

<form>
    <input id="submit" type="submit" value="送信" />
</form>
var postingFlg = false;
$("#submit").on("click",function(){
    document.getElementById("submit").disabled = true;
    $.ajax({
        type: "POST",
        url: "送信先URL",
        data: "送信するデータ",
        success: function(msg){
            document.getElementById("submit").disabled = false;
        });
    }
});

ボタンが押されたら、ボタンを「disable = true」にし、送信などの処理が終わったら「disable = false」にして、再びボタンを有効化します。
そうすることで、処理中はボタンを押しても処理が走らないようにすることができます。
これは直感的で使いやすい印象ですね。

 

■ フラグを立てる

上のと少し似ていますが、こちらはフラグとなる変数を宣言し、その内容を見るパターン。
サンプルはこんな感じ。

<form>
    <input id="submit" type="submit" value="送信" />
</form>
var postingFlg = false;
$("#submit").on("click",function(){
    if(!postingFlg){
        postingFlag = true;
        $.ajax({
            type: "POST",
            url: "送信先URL",
            data: "送信するデータ",
            success: function(msg){
                postingFlg = false;
            }
        });
    }
});

送信の処理は、postingFlg の値が false の時のみ実行するようにしておきます。
そしてボタンが押されたら、postingFlg の値を true にし、処理が終わったら、postingFlg を false に戻します。

 

とりあえず試したのは上記の2つです。

個人的な好みは、1つ目のボタンの無効化ですね。
そもそもボタンを押せなくなるので、ユーザ側にもわかりやすいかと思います。
が、このあたりは、状況に応じて使い分けてください。
そして、もっといい方法があれば、是非お教えいただきたい…!
どうぞよろしくお願い致します。

  • この記事いいね! (0)

著者について

村上

村上 administrator