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

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

目次

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

serializeArrayとは

  • jQueryのメソッドです。
  • nameと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>

  $("#button1").click(function() {
    const obj1 = $("#form1").serializeArray()
    const strAfter1 =  JSON.stringify(obj1);
    $("#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行目は、serializeArrayメソッドです。#form1と記述して、3行目のIDを指定しています。#はIDを意味します。

関連の記事

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

△上に戻る