jQuery serializeメソッドでform内のテキストボックス値を取得するサンプル

2022年11月14日

環境
jquery 3.6.0
Google Chrome 107.0.5304.107

構文
const 変数名 = $(“#フォームID名").serialize()
$(“#要素ID名").text(変数名);
serializeは、jQueryのメソッドで画面のテキストボックス等のname値とvalue値を、キーとvalueの形式にします。項目が複数の場合は&でつなぎます。
テキストボックス

input type="text" value="値1" name="値2" size="サイズ" maxlength="最大値"

使用例

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btnchg").click(function () {
    //テキストボックスの入力内容を取得
    const strA = $("#frmcity").serialize();
    $("#show").text(strA);
  });
});
</script>
</head>
<body>

<p>値　<span id="show"></span></p>
<form id="frmcity">
名前: <input type="text" value="yamada" name="name" size="5" maxlength="5"><br/>
都市: <input type="text" value="東京" name="city" size="5" maxlength="5">
<p>
<input type="button" id="btnchg" value="表示" /></p>
</form>

</body>
</html>

実行結果

「表示」ボタンを押すと、「値　name=yamada&city=%E6%9D%B1%E4%BA%AC」が表示されます。

jQuery

Posted by arkgame

関連投稿: