jquery フォームの値を一括でシリアライズして取得する方法

記事内に商品プロモーションを含む場合があります。

2017.9.10 171 views

フォームを POST や GET すれば、値を送信できますが、いったん javascript でフォーム内の値を加工したいときに使えそうです。

全体のコード

コード全体です。

このコードを html で保存して、chrome などで開発者モードを使って開けば、コンソールログに結果が表示されます。

<!DOCTYPE html>
<html>

<head>
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
</head>

<body>

	<form id="myform">
		<input type="hidden" name="myinput" value="hello">
	</form>

	<script>
		$(function() {
			var formData = $("#myform").serializeArray();
			$.each(formData, function(i, element) {
				console.log(element.name + ": " + element.value)
			});
		});
	</script>

</body>

</html>

取得対象のフォーム

今回はフォームに一つ hidden の要素を作成しました。

このフォーム内の値がすべて取得できるイメージです。

<form id="myform">
	<input type="hidden" name="myinput" value="hello">
</form>

取得する javascript

作成したフォームの id を指定して、フォーム内の要素をすべて取得します。

<script>
	$(function() {
		var formData = $("#myform").serializeArray();
		$.each(formData, function(i, element) {
			console.log(element.name + ": " + element.value)
		});
	});
</script>