jQuery serializeを動かして確認するサンプル

jQueryのserializeを動かして確認するサンプルです。

目次

form内の値を取得する

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

ボタンを押して下さい

コード

上記サンプルのコードです。取得される部品側の方にはnameが必要です。
serializeで指定する対象はIDで大丈夫です。

<p id="p1">ボタンを押して下さい</p>
<form id="form1">
<input type="text" value="red" id="text1" name="text1" maxlength="5">
<input type="button" id="button1" value="ボタン" />
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
	$("#button1").click(function() {
      const str = $("#form1").serialize();
      $("#p1").text(str); //text1=red
	});
});
</script>

2から5行目までがformです。formのidは、form1です。
3行目は、テキストボックスです。
11行目は、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/1.12.4/jquery.min.js"></script>
<script>
$(function() {
	$("#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/1.12.4/jquery.min.js"></script>
<script>
$(function() {
	$("#button3").click(function() {
      const str = $("input[name=check3],#select3").serialize();
      $("#p3").text(str);
	});
});
</script>

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

jQueryのserializeのリンクです。
https://api.jquery.com/serialize/

関連の記事

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

△上に戻る