formを扱うならjQueryのserialize()メソッドが超オススメ

2013年11月10日2021年9月22日

こんにちは、ボーノです。

formの扱いってWeb技術としては超基本的なとこだけど、制約が多かったり融通が効かなかったり、結構扱いにくかったりします。

ここでは、jQueryに便利なメソッドが用意されてたので紹介します。

serialize()

これを使うと、HTML内の

内の全てのフォーム要素(input, select, text等)のデータを一連のデータに結合して送信することができます。

基本形はこれ。

$("input#hoge").click(function(){
    var disp = $("#form").serialize();
    $("#foo").text(disp);
});

serializeとは、par1=AAA&par2=BBB&par3=CCC&…といったように、パラメータと値を数珠つなぎなデータに変換すること。

例えばこんな使い方もできる。これはajaxにformデータを送信した時の方法。
最終行のように、formデータに&をつなげてパラメータを追加していくこともできる。

$.ajax({
    type : 'POST',
    url : 'url',
    data : $('#form').serialize() + "&par1=1&par2=2&par3=3"
}

ちなみに、form要素内には他の関係ないタグが混ざってても送信するデータには影響ないです。
参考までに。

＼電子工作歴9年の私のイチ押し！ELEGOOの電子工作キット／