input:hiddenとinput[type=’hidden’]では取れる要素が違うことがある

ボタンをクリックしたときにフォームに含まれるinput要素の値を繋げたgetパラメータを取得し、ajax通信するという改修を行ったときのこと。
アコーディオンメニューで隠れた状態のチェックボックスの要素が2重に取得されてしまうという現象が発生しました。

調べてみたところinput:hiddenとinput[type=’hidden’]で取得できる要素は必ずしも一致しているわけではないことを知ったのでメモしました。

↓2重に取得されるサンプル

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() + "&";
	}
});

<form>
	<button type="button" class="btn btn-sm btn-default" data-toggle="collapse" data-target="#toggle1">表示/非表示</button>
	<div id="toggle1" class="collapse">
		<input type="checkbox" name"hoge[]" value="1" checked />
		<input type="checkbox" name"hoge[]" value="2" />
		<input type="checkbox" name"hoge[]" value="3" checked />
	</div>
</form>

上記のサンプルでは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/

スポンサーリンク
GoogleAdsense



GoogleAdsense



シェアする