WEBフォームの値をイイ感じのJSONにする。JSONからWEBフォームへ再入力。

WEBフォームの値をイイ感じのJSONにする。
JSONからWEBフォームへ再入力可能で、WEBフォームのテスト入力に便利。

サイトにjQueryが読み込まれている必要があります。

自社サイトでWEBフォームをPOSTする場合に活用したり、
WEBフォームの入力テストで何度も再入力したり.....

「https://www.1-firststep.com/」さんのサンプルフォームをお借りして動作を見ていきましょう。
Google ChromeでサンプルWEBフォームを開きます。
https://www.1-firststep.com/samplephp/mailform-v7.2.1/index.html
フォームに入力。

[F12]キーを押して、デベロッパーツールを開く
Consoleに以下のJavaScriptを貼り付けて実行。

function create_json(obj_form) {
    var items = Get_checkbox_radio_name(obj_form);
    var serialize = obj_form.serializeArray();
    var json_data = {};
    for (idx in serialize) {
        var key = serialize[idx]["name"];
        var value = serialize[idx]["value"];
        value = value.replace(/\n\r/g, '\n').replace(/\r\n/g, '\n').replace(/\n/g, '\n').replace(/\t/g, '\t').replace(/\\/g, '\\').replace(/\"/g, '\"');
        var _index = items.indexOf(key);
        if (_index >= 0) {
            var arr = [];
            if (json_data[key]) { arr = json_data[key]; }

            arr.push(value);
            json_data[key] = arr;

        } else {
            json_data[key] = value;
        }
    }
    return json_data;
}

function Get_checkbox_radio_name(obj_form) {
    var _array = [];
    var _obj = $(obj_form).find("select,:checkbox,:radio");
    _obj.each(function (index, element) {
        _array.push($(element).attr('name'));
    });
    return _array;
}

var data_obj = create_json($('form'));
JSON.stringify(data_obj);

赤枠部分に作成されたJSONが、表示されます。
※自社サイトでWEBフォームをPOSTする場合にも扱いやすい形式になっていると思います。

JSONを使ってWEBフォームへ再入力。

以下のJavaScriptの {JSON} 部分に上記の JSONデータを入力し、再入力用のJavaScriptを作成

var data_obj={JSON};

$.each(data_obj, function (index, value) {
    if ($.isArray(value) === false) {
        $('*[name="' + index + '"]').val(value);
    }
    if ($.isArray(value) && $.isPlainObject(value) === false) {
        $('*[name="' + index + '"]').val(value);
    }
    if ($.isArray(value)) {
        $.each(value, function (index, value) {
            var n = index;
            if ($.isPlainObject(value)) {
                $.each(value, function (index, value) {
                    $('*[name="' + index + '"]').eq(n).val(value);
                });
            }
        });
    }
});

var data_obj={
    "company": "会社名",
    "name_1": "日本",
    "name_2": "太郎",
    "read_1": "にほん",
    "read_2": "たろう",
    "mail_address": "abc@d.com",
    "mail_address_confirm": "abc@d.com",
    "gender": [
        "男性"
    ],
    "target": [
        "女性"
    ],
    "postal": "100-0000",
    "address": "東京都千代田区",
    "phone": "00-0000-0000",
    "schedule": "2019/11/30 14:20",
    "product": [
        "iPhone6"
    ],
    "use": [
        "iPhone6s"
    ],
    "kind[]": [
        "WEBサイトについて",
        "キャンペーンについて",
        "ご意見・ご要望"
    ],
    "response[]": [
        "メールでの返信を希望"
    ],
    "contents": "お問い合わせの内容",
    "message": "愛の告白"
};

$.each(data_obj, function (index, value) {
    if ($.isArray(value) === false) {
        $('*[name="' + index + '"]').val(value);
    }
    if ($.isArray(value) && $.isPlainObject(value) === false) {
        $('*[name="' + index + '"]').val(value);
    }
    if ($.isArray(value)) {
        $.each(value, function (index, value) {
            var n = index;
            if ($.isPlainObject(value)) {
                $.each(value, function (index, value) {
                    $('*[name="' + index + '"]').eq(n).val(value);
                });
            }
        });
    }
});

Google ChromeのデベロッパーツールのConsoleにJavaScriptを貼り付けて実行。
WEBフォームに値が再入力されます。

お気に入りにJavaScriptスキームとして登録しておけば、WEBフォーム入力テスト時に1クリックで再入力が可能です。