serializeArrayで取得した内容にデータを追加

Tag:

serializeArrayは、ajaxでフォーム内容をそのまま送信したいときなどに便利なjQuery関数です。ここでは、serializeArrayで取得したフォーム内容にデータを追加する方法を紹介します。

動作確認用サンプル





送信をクリックすると、(1)(2)が表示されます。

(1)serializeArrayで取得したフォーム内容↓


(2)serializeArrayで取得したフォーム内容にデータ追加後の内容↓


html
<form id="form-test1" action="" method="post">
    <p>
        <input type="text" name="name-text">
    </p>
    <p>
        <label><input type="checkbox" name="name-checkbox[]" value="1">value1</label>
        <label><input type="checkbox" name="name-checkbox[]" value="2">value2</label>
        <label><input type="checkbox" name="name-checkbox[]" value="3">value3</label>
        <label><input type="checkbox" name="name-checkbox[]" value="4">value4</label>
    </p>
    <p>
        <select name="name-select" size="3">
            <option value=""></option>
            <option value="1">value1</option>
            <option value="2">value2</option>
            <option value="3">value3</option>
            <option value="4">value4</option>
            <option value="5">value5</option>
            <option value="6">value6</option>
        </select>
    </p>

    <input type="submit" value="送信">
</form>

<p>送信をクリックすると、(1)(2)が表示されます。</p>
<p>(1)serializeArrayで取得したフォーム内容↓</p>
<pre id="disp-formtest1" style="height:100px;overflow: auto"></pre>

<p>(2)serializeArrayで取得したフォーム内容にデータ追加後の内容↓</p>
<pre id="disp-formtest2" style="height:100px;overflow: auto"></pre>
javascript
$(function () {
    $('#form-test1').submit(function (event) {
        event.preventDefault();
        var data = $(this).serializeArray();
        $('#disp-formtest1').empty().append('<p>' + JSON.stringify(data) + '</p>');

        var param = {addkey: 'addval'};
        $.each(data, function () {
            if (param[this.name] !== undefined) {
                if (!param[this.name].push) {
                    param[this.name] = [param[this.name]];
                }
                param[this.name].push(this.value || '');
            } else {
                param[this.name] = this.value || '';
            }
        });
        $('#disp-formtest2').empty().append('<p>' + JSON.stringify(param) + '</p>');
    });
});

3行目
通常のフォーム送信イベントをキャンセル

4行目
serializeArrayでフォーム内容を取得

7~17行目
param連想配列のデータを追加

スポンサーリンク