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

更新:2017.9.10

目次

フォームを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>
IT関係関連記事











これからブログなどのサイトを作りたいと思っている人は、お名前.comでのドメイン取得がオススメです。

■□━━ 急げ、ドメインは早い者勝ち! ━━□■
     ■お名前.com

アマゾンの2019年本屋大賞一覧

そして、バトンは渡された
ひと
ベルリンは晴れているか
熱帯
ある男

楽天市場のおすすめ商品一覧

お金2.0 新しい経済のルールと生き方 [ 佐藤航陽 ]
全部レンチン!やせるおかず 作りおき 時短、手間なし、失敗なし
「読む力」と「地頭力」がいっきに身につく 東大読書 [ 西岡 壱誠 ]