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

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

目次

説明 serializeとは
サンプル serializeでform内のvalue値を取得する
  チェックボックス、ラジオボタン、セレクトボックスの例
  form指定ではなく、一部のみを指定

serializeとは

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

serializeでform内のvalue値を取得する

serializeでform内の値を取得するサンプルです。
テキストボックスの入力内容を変更すると表示内容も変わります。
日本語の文字はURLエンコードされて表示されます。

value値 

serialize後 

 

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

<p id="p1">value値 <span id="sp1"></span></p>
<p id="p2">serialize後 <span id="sp2"></span></p>
<form id="form1">
<input type="text" value="red" id="text1" name="name1" size="5" maxlength="5">
<input type="text" value="blue" id="text2" name="name2" 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 strAfter1 = $("#form1").serialize();
    $("#sp2").text(strAfter1);

    const strBefore1 = $("#text1").val();
    const strBefore2 = $("#text2").val();
    $("#sp1").text( strBefore1 + " " + strBefore2);
  });
</script>

3から7行目までがformです。formのidは、form1です。
4,5行目のテキストボックスのnameの値はキーバリューのキーになります。valueの値がキーバリューのバリューです。
13行目は、serializeメソッドです。#form1と記述して、3行目のIDを指定しています。#はIDを意味します。

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

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

ボタンを押して下さい

 :赤 青  

 

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

<p id="p2">ボタンを押して下さい</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();
      $("#p2").text(str);
	});
</script>

3行目は、チェックボックスです。
4,5行目は、ラジオボタンです。
6から10行目は、セレクトボックスです。
18行目は、serializeメソッドです。チェックボックスはチェックされていないと文字列自体がなくなります。

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

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

ボタンを押して下さい

:赤   青  

 

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

<p id="p3">ボタンを押して下さい</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>

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

関連の記事

jQuery $.ajaxで通信を行ってJSONを取得するサンプル

△上に戻る