jQueryでaタグとボタンに対する2重送信を防止するための方法

DSC08912

2014年02月15日(土)

どんどん技術系のTipsで攻めてみます。また実験的にわけわからない記事を書くかもしれませんが、そっちの方が楽しめると思うのでもしみたら確認してみてください。くそが。

 

それでは今回のjQueryでクリック系処理に対して2重送信を防止する方法を残していきます。

フロントエンドエンジニアや、WEB系エンジニアは結構使うことが多いと思うのでやり方というよりはロジックは理解したほうが今後の為になると思うぞ。

 

今回は大多数を占めるであろう2パターンを紹介します。

 

ボタンタイプの場合

1回目のクリック時にボタンを無効にする方法です。

ボタンの場合はアトリビュートで無効にできるものがあるのでクリックイベントをとってそのアトリビュートを付加させたらいいだけです。

$('#login_submit').on('click', function(){
    // ボタンを押せなくする
    $(this).attr('disabled', true);
    $(this).val("ログイン中...");
});

※当たり前ですが、サンプルなのでセレクタはそれぞれ対象としたいエレメントに向けてください。

 

aタグのクリックを無効にする方法

1回目のクリック時にaタグにClassを割り振り、次回以降にそのClassチェックにより無効化しています。

aタグの場合はdisabledとかないので僕の場合はクラスの有無で判断するようにしてみました。

$('#login_a').on('click', function(){
    // 2重送信防止クラスのチェック
    if ( $(this).hasClass('double_click') ){
        return false;
    }
    $(this).text("送信中...");
    // 2重送信防止クラス
    $(this).addClass('double_click');
});

※当たり前ですが、サンプルなのでセレクタはそれぞれ対象としたいエレメントに向けてください。

 

この辺は今流行りのフロントエンドエンジニアとかエンジニアの仕事になりますが、デザイナーさんとかも覚えておいて使ったりしたらもう一目置かれること間違いなしです。

というか、デザイナさんとかHTMLコーディングするひと達ってこの辺の考えもなしにできるからいいよね。まぁデザインの才能があるからいらないのかなこういうWEBの基本知識を覚えたいっていう意識。

 

絶対覚えておいた方がいいよ。そう、上を見たいならね。

スポンサードリンク

運営サービスPR

スポンサードリンク

運営サービスPR