ボタンをクリックしたときにフォームに含まれるinput要素の値を繋げたgetパラメータを取得し、ajax通信するという改修を行ったときのこと。
アコーディオンメニューで隠れた状態のチェックボックスの要素が2重に取得されてしまうという現象が発生しました。
調べてみたところinput:hiddenとinput[type=’hidden’]で取得できる要素は必ずしも一致しているわけではないことを知ったのでメモしました。
↓2重に取得されるサンプル
[js]
var get_param = "";
$("form input:hidden").each(function(){ // ←input[type=’hidden’]にするべき
if (!$(this).is(":disabled")) {
get_param += $(this).attr("name") + "=" + $(this).val() + "&";
}
});
$("form input[type=’checkbox’]").each(function(){
if ($(this).is(":checked")) {
get_param += $(this).attr("name") + "=" + $(this).val() + "&";
}
});
[/js]
上記のサンプルではinput:hiddenとinput[type=’checkbox’]の両方でアコーディオンメニューで隠されたチェックボックスの要素が取得されていました。
かといってvisibility:hiddenな状態のテキストボックスがinput:hiddenでは取得されませんでした。visibility:hidden自体がめったに使わないプロパティですが、隠された要素を取得する際は特に理由がなければinput[type=’hidden’]で取得するのがいいと思います。
↓チェックボックスの他にもinputの色々な状態をinput:hidden、input[type=’text’]で取得できるか検証してみました。
http://etc.imo-tikuwa.com/input-hidden/