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

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

.serialize( )フォームの内容をシリアライズ

構文

フォームの内容をシリアライズ返値:文字列
jQo.serialize( )ver1.0〜

機能

serializeメソッドはjQueryオブジェクトで指定したフォーム要素の情報をシリアライズします。

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

解説

フォームの内容をシリアライズする

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

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

結果として、submitをクリックするとアラートでシリアライズされたformの内容が表示されます。

注意点として、ファイル選択の情報はファイルを選択してもシリアライズに含まれません。またチェックボックスはチェックしないとシリアライズに含まれません。シリアライズの変数名にはname属性が利用されるので、form内の要素にはname属性を設定して下さい

関連項目

formの内容をシリアライズするのではなく、配列に変換したい場合はserializeArrayメソッドを利用して下さい。formの内容ではなくobjectオブジェクトや配列をシリアライズしたい場合はjQuery.paramメソッドを利用して下さい。