jQuery serializeでキーバリューにするサンプル

01. serialize

・serializeとは

・form内の値を取得する

・チェックボックス、ラジオボタン、セレクトボックスの例

・form指定ではなく、一部のみを指定

serializeとは

serializeは、jQueryのメソッドで画面のテキストボックス等のname値とvalue値を、キーとvalueの形式にします。項目が複数の場合は&でつなぎます。
上記の図は、2つのテキストボックスがあり、beforeとafterの状態を表しています。
日本語の文字はURLエンコードされます。
以下は、jQueryの.serializeのリンクです。
https://api.jquery.com/serialize/

form内の値を取得する

serializeでform内の値を取得するサンプルです。
テキストボックスの入力内容を変更できます。

値　

上記サンプルのコードです。

<p>値　<span id="sp1"></span></p>
<form id="form1">
<input type="text" value="red" name="text1" size="5" maxlength="5">
<input type="text" value="青" name="text2" size="5" maxlength="5">
<input type="button" id="button1" value="ボタン" />
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $("#button1").click(function() {
    const str1 = $("#form1").serialize();
    $("#sp1").text(str1);
  });
</script>

serializeは、画面の部品からキーとvalueを生成します。

チェックボックス、ラジオボタン、セレクトボックスの例

チェックボックス、ラジオボタン、セレクトボックスの例です。
チェックボックスは、選択されていないと文字列自体がなくなります。

値　

上記サンプルのコードです。

<p>値　<span id="sp2"></span></p>
<form id="form2">
  <input type="checkbox" id="color2" name="check2" value="red" checked />：赤
  <input type="radio" name="radio2" value="red" checked /> 赤
  <input type="radio" name="radio2" value="blue" /> 青
  <select id="select2" name="select2">
    <option value="red">赤</option>
    <option value="yellow">黄</option>
    <option value="blue">青</option>
  </select>
  <input type="button" id="button2" value="ボタン" />
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $("#button2").click(function () {
    const str = $("#form2").serialize();
    $("#sp2").text(str);
  });
</script>

チェックボックスはチェックされていないと文字列自体がなくなります。

form指定ではなく、一部のみを指定

serializeを指定する対象は、formではなく一部の部品のみを指定できます。
以下は、serializeの対象としてラジオボタンを指定していません。

値　

上記サンプルのコードです。

<p>値　<span id="sp3"></span></p>
<form id="form3">
<input type="checkbox" id="color3" name="check3" value="red" checked>：赤
<input type="radio" name="radio3" value="red" checked> 赤
<input type="radio" name="radio3" value="blue" > 青
<select id="select3" name="select3">
    <option value="red">赤</option>
    <option value="yellow">黄</option>
    <option value="blue">青</option>
</select>
<input type="button" id="button3" value="ボタン" />
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
	$("#button3").click(function() {
      const str = $("input[name=check3],#select3").serialize();
      $("#p3").text(str);
	});
</script>

16行目は、セレクタでチェックボックスとセレクトボックスを指定しています。