MENU
  1. ホーム
  2. JS
  3. jQuery
  4. フォームのデータをシリアル化

フォームのデータをシリアル化

jQuery
2024.05.18

serializeメソッドはフォーム要素の値をURLエンコード形式の文字列に変換します。

serialize
記法

$(selector).serialize();
============================
selector : 要素を指定

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>serializeメソッドについて</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <form id="user_form">
      <label for="username">ユーザー名：</label>
      <input type="text" id="username" name="username" /><br />
      <label for="email">メール：</label>
      <input type="email" id="email" name="email" /><br />
      <button type="button" id="serialize_button">シリアライズ</button>
    </form>
    <p id="serialized_output"></p>
    <p id="url_output"></p>

    <!-- CDN取得 -->
    <script src="CDNのURL"></script>
    <script src="./main.js"></script>
  </body>
</html>
// ページの読み込みが完了
$(function () {
  // ボタンがクリックされた時にフォームをシリアライズ
  $("#serialize_button").on("click", function () {
    // フォームのデータをシリアライズ
    var serializedData = $("#user_form").serialize();

    // シリアライズされたデータを表示
    $("#serialized_output").text("【シリアライズデータ】" + serializedData);

    // シリアライズされたデータをURLパラメータとして使用
    var url = "https://example.com/submit?" + serializedData;
    $("#url_output").text("【url】" + url);
  });
});
#user_form {
  margin-bottom: 20px;
}
#user_form label {
  display: inline-block;
  width: 100px;
  margin-bottom: 10px;
}
#user_form input {
  margin-bottom: 10px;
}
#serialize_button {
  display: inline-block;
  margin-top: 10px;
}
#serialized_output,
#url_output {
  font-weight: bold;
}
出力結果


jQuery