jQuery serializeArrayでJSONのキーバリューにする

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

目次

説明 serializeArrayとは
サンプル form内のvalue値を取得する

serializeArrayとは

  • jQueryのメソッドです。
  • value値を、JSONのキーとvalueの形式にしてくれます。
  • 上記の図は、2つのテキストボックスがあり、serialize前とserialize後の状態を表しています。
  • 日本語の文字もエンコードされません。
  • 以下は、jQueryの.serialize()のリンクです。
    https://api.jquery.com/serializeArray/

serializeでform内の値を取得する

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

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>
$(function() {
	$("#button1").click(function() {
        const obj1 = $("#form1").serializeArray()
        const str =  JSON.stringify(obj1);
      $("#sp2").text(str);

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

関連の記事

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

△上に戻る