デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.serializeArray( )フォームの内容を配列に変換

構文

フォームの内容を配列に変換返値:配列
jQo.serializeArray( )ver1.2〜

機能

serializeArrayはjQueryオブジェクトで指定したフォーム要素の情報を配列に変換します。変換された配列の構造は以下の様になります。各要素ごとにobjectオブジェクトが作成され、nameプロパティにname属性の名前、valueプロパティに設定された値が設定されます。

変換された配列の構造
[ {name:"name属性の名前", value:"値"}, {name:"name属性の名前", value:"値"}, ………]

name属性を利用するのでform内の要素にはname属性を設定して下さい。チェックボックスやラジオボタンは選択されている場合のみ変換します。ファイル選択(type属性がfileのinput要素)の情報は変換しません。

サーバーにデータを送るのではなく、ページ内のプログラムで情報を利用する時に利用するのだと思います。

解説

フォームの内容を配列にする

サンプル(serializeArray/01.html)を開いてbody内にform要素があることを確認してください。jQueryは以下の様に記述され、submitをクリックするとform要素の内容をURLエンコードしてアラートで表示します。

$("form").submit(function() {
	var formData = $("form").serializeArray();
	alert(formData);
	return false;
});

結果として、submitをクリックするとアラートで「[object Object],[object Object],[object Object]」と表示され、配列内にobjectオブジェクトが設定されているのを確認できます。

serializeArray/01.htmlだとobjectオブジェクト内にnameプロパティとvalueプロパティがあることを確認できないので、少しjQueryを変更しました。サンプル(serializeArray/01b.html)を開いてjQueryが以下の様に変更されたのを確認してください。これでフォームデータの0番目の要素(テキスト入力)のname属性とvalue属性が確認できます。

$("form").submit(function() {
	var formData = $("form").serializeArray();
	alert(formData[0].name + ":" + formData[0].value);
	return false;
});

結果として、submitをクリックすると「name:john」と表示され、配列内のobjectオブジェクトにname属性とvalue属性が設定されているのが確認できます。

eachメソッドを利用して内容を全て表示する

serializeArrayメソッドで変換した配列の全容を確認するために、eachメソッドを利用して、全てのobjectオブジェクトの内容を表示しようと思います。サンプル(serializeArray/02.html)を開いてbody内にid属性がtestのdiv要素が追加されているのを確認して下さい。ここに変換された配列の内容を表示します。

jQueryは以下の処理が追加されています。まず1行目でdiv要素内のテキストを空にします。2行目のeachメソッドで変換された配列「formData」の要素の数だけ処理を繰り返します。繰り返す処理は3行目で、要素のname属性とvalue属性をid属性がtestのdiv用紙に追加していきます。

$("div#test").text("");
$.each(formData, function(i, elem){
	$("div#test").append(elem.name + ": " + elem.value + "<br/>")
});

結果として、submitをクリックするとform要素の内容がid属性がtestのdiv要素内に表示されます。注意点として、ファイル選択の情報はファイルを選択しても配列には含まれません。またチェックボックスはチェックしないと配列に含まれません。この仕様はserializeメソッドと同じです。

関連項目

formの内容を配列ではなくurlエンコードしたい場合はserializeメソッドを利用して下さい。