JQuery を使用してフォーム データを取得する
この記事では、JQuery を使用してフォーム データを取得する方法について説明します。 serialize() メソッドは、フォームの送信や入力フィールドの更新からデータを取得するために広く使用されています。
別のメソッド serializeArray() は、フォーム データを配列形式で表現するために並列に使用されます。 フォーム データをオブジェクトとして保存する形式は、定義済みのメソッドとまだ統合されていますが、それも可能です。
上記の各アプローチに従う方法を学びましょう。
JQuery を使用してフォーム データを取得する
jQuery では、フォームまたは入力フィールドのデータをフェッチする場合、次の 2つの方法があります。 1つは serialize() メソッドで、もう 1つは serializeArray() メソッドです。
これらの手法は、ユーザーの好み、ユーザーの分類などを完全に把握している場合にフォーム データを取得するのに役立ちます。 これらはデータベースに保存することもできます。
では、フォームデータを取得するときの形式は何ですか?
serialize() メソッドは文字列を返し、異なる入力タイプは & で区切られます。 最後に、よりスケーラブルな方法でフォーム データをフェッチする serializeArray() メソッドがあります。
データを配列として表示します。 そしてここで、それらのデータをオブジェクトとして取得できるかどうかも調べます。 それでは、コード セグメントに進みましょう。
serialize() メソッドを使用してフォーム データを取得する
この例では、2つのフィールドがあります。 1つの text タイプの入力フィールドと、もう 1つは単純な select-option セクションです。 これらのフィールドにどのような入力を入力しても、serialize() メソッドを使用して、これらのデータを文字列形式で取得できます。 それでは、コード ベースで何が起こっているのか見てみましょう。
コードスニペット：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>form data</title>
<style>
div {
margin-top: 27px;
}
#serialize {
background-color: #eee;
border: 1px solid #111;
padding: 3px;
margin: 9px;
width: 300px;
}
</style>
</head>
<body>
<form action="">
Name: <input type="text" name="name">
<select name="hair" id="hair">
<option value="Hair">Hair</option>
<option value="black">black</option>
<option value="brown">brown</option>
<option value="blue">brown</option>
</select>
</form>
<div>Serialize:
<div id="serialize"></div>
</div>
<script>
$(function() {
var update = function() {
$('#serialize').text(
JSON.stringify($('form').serialize())
);
};
update();
$('form').change(update);
})
</script>
</body>
</html>
出力：
Name フィールドに値を入力すると、更新が追加されていることがわかります。 また、セレクト ボックスでは、髪の色は 黒 に選択され、serialize() メソッドによって決定された文字列で変更されます。
serializeArray() メソッドを使用してフォーム データを取得する
この特定の例は、前のセグメントで実行された同じタスクを意味しますが、違いは、ここでの出力が配列形式になることです。 配列はより定義されており、この配列規則は典型的なスタイルとは異なります。 代わりに、オブジェクトの配列です。
したがって、0 インデックス付き配列要素は最初の入力フィールドの key-pair 値を保持し、1 インデックス付き配列は select-option の選択肢を格納します。 しかし、まず、コードを確認しましょう。
コードスニペット：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>form data</title>
<style>
div {
margin-top: 27px;
}
#serializearray{
background-color: #eee;
border: 1px solid #111;
padding: 3px;
margin: 9px;
width: 300px;
}
</style>
</head>
<body>
<form action="">
Name: <input type="text" name="username">
<select name="hair" id="hair">
<option value="Hair">Hair</option>
<option value="black">black</option>
<option value="brown">brown</option>
</select>
</form>
<div>Serialize Array:
<div id="serializearray"></div>
</div>
<script>
$(function() {
var update = function() {
$('#serializearray').text(
JSON.stringify($('form').serializeArray())
);
};
update();
$('form').change(update);
})
</script>
</body>
</html>
出力：
ここでは、値が変更され、髪の色が更新されます。 しかし、結果は配列形式であり、エントリとして 2つのオブジェクトを取得していることに気付きました。
次に、フォーム データをオブジェクトとして直接保存できるかどうかを調べます。 それでは、行きましょう。
オブジェクト フォームでフォーム データを取得する
この例では、前と同じコードを使用しますが、ここでは 2つの div 要素を使用して 2つのオブジェクトを出力する必要があります。 serializeArray() メソッドによって生成された配列をループし、それらをオブジェクトとして解析する $.each() メソッドを追加しました。
配列インデックスを定義するために 2つの条件文を使用していることに気付くでしょう。 それ以外の場合は、最後の要素をループして、最後のフィールドのみを生成します。 まず、コード スニペットを確認しましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>form data</title>
<style>
div {
margin-top: 27px;
}
#serializeobj1, #serializeobj2{
background-color: #eee;
border: 1px solid #111;
padding: 3px;
margin: 9px;
width: 300px;
}
</style>
</head>
<body>
<form id="form">
Name: <input type="text" name="username">
<select name="hair" id="hair">
<option value="Hair">Hair</option>
<option value="black">black</option>
<option value="brown">brown</option>
<option value="green">brown</option>
</select>
</form>
<div>Serialize Object:
<div id="serializeobj1"></div>
<div id="serializeobj2"></div>
</div>
<script>
$(function() {
var obj = {}
var cnt=0;
var update = function() {
$.each(
$('#form').serializeArray(), function(i, val){
if(i==0){
$('#serializeobj1').text(
JSON.stringify(
obj[i]=val
)
)
}
if(i==1){
$('#serializeobj2').text(
JSON.stringify(
obj[i]=val
)
)
}
})
};
update();
$('form').change(update);
})
</script>
</body>
</html>
出力：
