連載
» 2010年08月27日 00時00分 公開

連載:jQuery逆引きリファレンス:第10回 jQuery 1.4編 (17/17)

[山田祥寛(http://www.wings.msn.to/),著]
前のページへ 1|2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17       



「連載:jQuery逆引きリファレンス」のインデックス

連載目次


 serializeArrayメソッドは、フォームからの入力値をまとめてシリアライズします。serializeメソッドにも似ていますが、serializeメソッドが戻り値として文字列を返すのに対して、serializeArrayメソッドはオブジェクト・リテラルの形式で返す点が異なります。serializeArrayメソッドの戻り値は、そのまま$.ajaxメソッドの引数として渡すこともできます。

 具体的な例も見てみましょう。以下は、フォームの入力値をオブジェクトに変換したものを、$.eachメソッドを使ってページ下部にリスト表示する例です。

<script type="text/javascript">

$(function() {

  $('#btn').click(function() {
    var obj = $('form').serializeArray();
    $.each(obj, function(index, item) {
      $('body').append(item.name + ":" + item.value + "<br />");
    });
  });
});

</script>

  ……中略……

<form>
  書名:<input type="text" name="title" /><br />
  出版社:
  <select name="publish">
    <option value="技術評論社">技術評論社</option>
    <option value="翔泳社">翔泳社</option>
    <option value="秀和システム">秀和システム</option>
  </select><br />
  ジャンル:
  <input type="checkbox" name="category" value="program" />
    プログラミング
  <input type="checkbox" name="category" value="arch" />
    アーキテクト
  <input type="checkbox" name="category" value="db" />
    データベース
  <br />
  <input type="button" id="btn" value="送信" />
  <div id="result"></div>
</form>

リスト146 フォームからの入力値をまとめてシリアライズ(SerializeArray.html)
このHTMLを実際にブラウザで開く


ブラウザで開く

リスト146の実行結果

「連載:jQuery逆引きリファレンス」のインデックス

連載:jQuery逆引きリファレンス

前のページへ 1|2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17       

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。