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クリックで再入力が可能です。
