読者です 読者をやめる 読者になる 読者になる

PSLブログ

ヨシナシゴトヲツヅリマス

Firefox/Firebugのコンソールで、フォームエレメントのname/valueのリストを取得する

css/jQuery 技術的なこと

フォームのname属性とvalueの一覧をさくっと取り出す方法。
FirefoxFirebugを入れておくと猛烈に便利。

/* 全部のフィールド一覧 */
var list = "";
$("input,select,textarea").each(function () {
	if ($(this).find("option").get(0)) {
		var tagname = $(this).attr("name");
		$(this).find("option").each(function () {
			list = list + tagname + "\t" + $(this).val() + "\t" + $(this).text() + "\n";
		});
	} else {
		list = list + $(this).attr("name") + "\t" + $(this).val() + "\n";
	}
});
console.log(list);

上記は、radioボタンが

<input type="radio" name="Q1" value="1" />選択肢1
<input type="radio" name="Q1" value="2" />選択肢2
<input type="radio" name="Q1" value="3" />選択肢3
<input type="radio" name="Q1" value="4" />選択肢4
<input type="radio" name="Q1" value="5" />選択肢5

のようになっている場合は、

Q1	1
Q1	2
Q1	3
Q1	4
Q1	5

のように出力される。valueの値の設定ミスがないかなど確認するのに便利。

一方で、name属性の重複ははじめから取り除いてname属性のリストだけを出したい場合は以下のようにする。

/* フィールドリスト(重複分は削除) */
var list = "";
$("input,select,textarea").each(function () {
	if ($(this).val() != "" && $(this).val() != 1) return;
	list = list + $(this).attr("name") + "\n";
});
console.log(list);

これに対する結果は、以下の通り。

Q1