ywork2020.com

Title

Form要素内の送信用データを文字列化する

目次 (INDEX)

serializeとは

ここで説明するserialize とは次の語句からなるjQueryのメソッドです。
serialize
読み: シリアライズ
意味: 直列化、順番に並べる

目次に戻る

serializeメソッドの概要

フォーム要素内の送信値をURLクエリー用文字列にシリアライズします。

別の言い方をすると、form要素内に配置されたinput要素やselect要素など、データ入力要素のデータを取りまとめて、URLに添付するための データ形式に変換します。

通常、form要素からGET送信されたデータは送信先のURLの後に「?name属性値=value属性値&name属性値=value属性値&...」の形式で添付データとして送信されますが、 そのURL?以降の添付データを文字値として取得することができます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。 このメソッドに引数は必要ありません。

Form.serialize()

目次に戻る

サンプルコードと実行結果

ここでは実際にform要素と子要素のinput要素を置き そのデータをシリアライズしてみます。

サンプルですので実際の送信は行いませんが、フォーム内のデータが書き換えたら 実際の送信URLがどのようになるかを結果欄に表示します。

サンプルコード: CSS
<style>
	#idOutput{
		display: block;
	}
</style>
  • 03: ディスプレイ (この要素をブロックレベルで表示します。)
サンプルコード: HTML
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
	<form id="idForm" action="送信先URL" method="GET">
		<p><input name="Name" type="text" value="myName"></p>
		<p><input name="Age" type="number" value="20"></p>
		<p><output id="idOutput">innerText</output></p>
		<p><input type="submit" value="送信" id="idSubmit" disabled></p>
	</form>
</body>
  • 05: form要素 (この要素の子要素のデータをシリアライズします。)
  • 06: input要素 (シリアライズの対象です。初期データは Name=myName です。)
  • 07: input要素 (シリアライズの対象です。初期データは Age=20 です。)
  • 08: output要素 (結果です。URL?シリアライズデータを表示します。)
  • 09: input要素 (送信ボタンです。無効に設定しています。)
サンプルコード: script
<script>
	let elmName = document.querySelector("#idForm input[name='Name']");
	let elmAge = document.querySelector("#idForm input[name='Age']");
	let strURL = window.location;
	let strFormData = "";
	function funGetInputValue(){
		strFormData = $("#idForm").serialize();
		$("#idOutput").text(strURL+"?"+strFormData);
	}
	document.addEventListener("DOMContentLoaded", function(){funGetInputValue();});
	elmName.addEventListener("change", function(){funGetInputValue();});
	elmAge.addEventListener("change", function(){funGetInputValue();});
</script>
  • 02: 変数定義 elmName (#idForm内のinput要素で、name属性値がNameの要素を参照)
  • 03: 変数定義 elmName (#idForm内のinput要素で、name属性値がAgeの要素を参照)
  • 04: 変数定義 strURL (このページのURLを取得して代入)
  • 05: 変数定義 strFormData (空変数。後でこの変数にシリアライズした文字列を代入)
  • 06-09: 関数定義 funGetInputValue (シリアライズした文字列を取得して表示)
  • 07: 関数処理 (idForm内のデータをシリアライズ)
  • 08: 関数処理 (idOutputのinnerTextにシリアライズの結果を書き出し)
  • 10: イベントのバインド (DOMの構成後にfunGetInputValue関数を呼ぶ)
  • 11: イベントのバインド (elmNameに変更があればfunGetInputValue関数を呼ぶ)
  • 12: イベントのバインド (elmAgeに変更があればfunGetInputValue関数を呼ぶ)
実行結果:

Name: name="Name"

Age: name="Age"

結果: id="idOutput"
innerText

実行: このボタンの機能は無効にしています。

実際に送信すると上記の結果欄に示すように「URL?データ」の様式として送信されます。

目次に戻る