感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

jQueryでボタンの二重送信を防止するために二度目からボタンを無効化する方法。

<スポンサーリンク>

チェックされた状態にあるすべてのチェックボックスを選択したい場合

$('input[type=checkbox][checked]')

eachメソッド

each(iterator)
マッチした集合の全部の要素を走査し、それぞれの要素について渡された反復処理関数iteratorを呼び出す。

$('img').each(function(n) {
	this.alt = 'This is image[' + n + '] with an id of ' + this.id;
});

jQueryで送信ボタンの二重送信を防止する方法

恐怖の二重送信問題を解決するために、jQueryを使おう。
フォーム送信のレイテンシが数秒を超える時は、せっかちなユーザーはボタンを二度押ししてしまう。
そういうとときは、一回押されたらボタンを押しても無効になるようにしてしまえばいい。
二重送信を防止するために、ボタンを無効にするjQueryは以下のように書く。

$('#get').attr('disabled',true);

実際にサンプルを見てみよう。
こちらはサーバー側。リクエストを受け取って、受け取った回数をカウントしていく簡単なサーブレットを使っている。

package controller;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class FrontController extends HttpServlet {
    private int count = 0;
    public void doGet(HttpServletRequest req, HttpServletResponse res) 
                throws ServletException, IOException {
        count++;
        System.out.println("doGet呼ばれました" + count +"回目");
        String param1 = req.getParameter("param1");
        String param2 = req.getParameter("param2");
        System.out.println("param1:" + param1);
        System.out.println("param2:" + param2);
        System.out.println("----------------");
        PrintWriter out = res.getWriter();
        out.println("hello! this is servlet");
    }

}

で、クライアント側。

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script type="text/javascript">
  $(document).ready(function() {
    $("#get").click(function() {
      console.log("click!");
      $.get('http://localhost:8082/servletsample/index',
      { param1 : 'hello',
        param2 : 'world'},
        function(data) {
          $('result').html(data);
      });
      $('#get').attr('disabled',true);
    });
  });
</script>
</head>
<body>
<form>
  <input type="text" size="10" name="test">
  <input type="button" id="get" value="送信">
</form>
<div id="result"></div>
</body>
</html>

この

//$('#get').attr('disabled',true);

の部分をコメントアウトすると、サーバ側は以下のようにクリックするたびにカウントが増えていく。

doGet呼ばれました1回目
param1:hello
param2:world
----------------
doGet呼ばれました2回目
param1:hello
param2:world
----------------
doGet呼ばれました3回目
param1:hello
param2:world
----------------

しかし、上記の記述を有効にして、ボタンを押すと、ボタンが薄くなって、もう押せなくなる。
したがって、カウントは増えないし、二度押しは通用しなくなる。

勉強した本

コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer’s SELECTION)

コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer’s SELECTION)

感謝のプログラミング

今回で感謝のプログラミングは【606時間目】
10000時間まで、あと【9394時間】