formの2重送信防止とbuttonタグのvalue

formの2重送信防止のため、input[type=submit]やbutton[type=submit]をdisabled=disabledにするような処理をいれると、buttonタグをクリックした場合でもbuttonタグのvalueは飛ばなくなります。

submitされる前にdisabledにされるからですね、たぶん。

$("button[type=submit]").click(function(e) {  
    e.preventDefault();
    $(this).attr("disabled", "disabled"); 
    $('form').submit();
});

submit(fn)でdisabledにする場合もbuttonタグのvalueは飛ばないようです。

$('form').sumbit(function(){
    $("button[type=submit]").attr("disabled", "disabled");
});

buttonタグのvalueが必要なケースはそんなに無いと思いますが、どうしても値を飛ばしたい、かつ2重送信は避けたい場合はなんらかの対応を入れる必要があります。

以下を試してみたんですが、chromeだとちゃんと動きました。

var copy_button_value = function ($button) {
          var name = $button.attr("name");
          var value = $button.attr("value");
          $("<input type='text' />")
                        .attr("name", name)
                        .val(value)
                        .insertAfter($button);
          $button.attr("name", "_" + name);
        };

$("button[type=submit]").click(function(e) {  
    e.preventDefault();
    copy_button_value($this);    
    $(this).attr("disabled", "disabled"); 
    $('form').submit();
});

以前、IE7以下でbuttonタグのvalueが送信されない不具合について調べたときのソースを参考にしました。

buttonタグのvalueに依存しないような作りにすればいいんですが、せっかく調べたので一応メモしておく。

参考 : IE7以下でbuttonタグのvalueが送信されない不具合の対処方法 - brainstorm