{"id":12134,"date":"2022-05-19T10:00:00","date_gmt":"2022-05-19T01:00:00","guid":{"rendered":"https:\/\/www.gigas-jp.com\/appnews\/?p=12134"},"modified":"2022-05-18T18:05:39","modified_gmt":"2022-05-18T09:05:39","slug":"javascript-form%e3%81%ae%e5%85%a5%e5%8a%9b%e5%86%85%e5%ae%b9%e3%82%92object%e5%bd%a2%e5%bc%8f%e3%81%a7%e5%8f%96%e5%be%97%e3%81%99%e3%82%8b","status":"publish","type":"post","link":"https:\/\/www.gigas-jp.com\/appnews\/archives\/12134","title":{"rendered":"[JavaScript] Form\u306e\u5165\u529b\u5185\u5bb9\u3092Object\u5f62\u5f0f\u3067\u53d6\u5f97\u3059\u308b"},"content":{"rendered":"\n

Ajax\u306a\u3069\u3067\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u304b\u3089\u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9\u3068\u9023\u643a\u3059\u308b\u969b\u306b
Object\u5f62\u5f0f\u3067\u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9\u306b\u30d1\u30e9\u30e1\u30fc\u30bf\u3092post\u3057\u307e\u3059\u3002
\u305d\u306e\u3088\u3046\u306a\u5834\u5408\u306b\u3001Form\u306e\u5165\u529b\u5185\u5bb9\u3092\u307e\u3068\u3081\u3066Object\u5f62\u5f0f\u3067\u53d6\u5f97\u3059\u308b\u65b9\u6cd5\u304c
\u4fbf\u5229\u306a\u306e\u3067\u30b7\u30a7\u30a2\u3057\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n\n\n\n\n\n\n\n

\u5165\u529bForm\u3092\u914d\u5217\u3067\u53d6\u308a\u51fa\u3057\u3066Object\u306b\u5909\u63db\u3059\u308b<\/h4>\n\n\n\n

\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u4e00\u822c\u7684\u306ahtml\u5165\u529bForm\u306e\u3059\u3079\u3066\u306e\u5165\u529b\u5185\u5bb9\u3092Object\u306b\u307e\u3068\u3081\u308b\u65b9\u6cd5\u3067\u3059\u3002<\/p>\n\n\n\n

\n<form action=\"\" method=\"post\" class=\"test_form\">\n\n\n    <label for=\"name\">name: <\/label>\n    <input type=\"text\" name=\"name\" value=\"\u897f\u7530\">\n\n    <label for=\"company\">company: <\/label>\n    <input type=\"text\" name=\"company\" value=\"\u30ae\u30ac\u30b9\u30b8\u30e3\u30d1\u30f3\">\n\n    <label for=\"email\">email: <\/label>\n    <input type=\"email\" name=\"email\" value=\"nishida@gigas-jp.com\">\n\n    <label for=\"car\">car:<\/label>\n    <select name=\"car\">\n        <option value=\"nissan\">\u65e5\u7523<\/option>\n        <option value=\"toyota\">\u30c8\u30e8\u30bf<\/option>\n        <option value=\"honda\">\u30db\u30f3\u30c0<\/option>\n        <option value=\"subaru\" selected>\u30b9\u30d0\u30eb<\/option>\n    <\/select>\n\n    <input type=\"submit\" value=\"\u767b\u9332\">\n\n<\/form>\n<\/code><\/pre>\n\n\n\n

\u307e\u305a\u306fquerySelector\u3067form\u3092\u9078\u629e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\nconst myform = document.querySelector('.test_form');\n<\/code><\/pre>\n\n\n\n

\u3064\u304e\u306b\u767b\u9332\u30dc\u30bf\u30f3(submit\u30dc\u30bf\u30f3)\u306bEventListener\u3092\u8ffd\u52a0\u3057\u3066
submit\u6642\u306b\u51e6\u7406\u3092\u547c\u3073\u51fa\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\nmyform.addEventListener('submit',function(e){\n    \/\/\n});\n<\/code><\/pre>\n\n\n\n

\u5b9f\u969b\u306bsubmit\u3055\u308c\u3066\u3057\u307e\u3046\u3068\u753b\u9762\u304c\u30ea\u30ed\u30fc\u30c9\u3055\u308c\u3001console.log\u306a\u3069\u3067\u306e
\u78ba\u8a8d\u304c\u3067\u304d\u306a\u304f\u306a\u308b\u306e\u3067\u3001\u3044\u3063\u305f\u3093submit\u3055\u308c\u308b\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u6319\u52d5\u3092\u30ad\u30e3\u30f3\u30bb\u30eb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\nmyform.addEventListener('submit',function(e){\n    e.preventDefault(); \/\/\u30c7\u30d5\u30a9\u30eb\u30c8\u306esubmit\u6319\u52d5\u3092\u30ad\u30e3\u30f3\u30bb\u30eb\n    \/\/\n});\n<\/code><\/pre>\n\n\n\n

\u3064\u304e\u306bForm\u5165\u529b\u60c5\u5831\u3092\u914d\u5217\u3067\u53d6\u308a\u51fa\u3057\u307e\u3059\u3002
\u3053\u306e\u305f\u3081\u306b\u306fFormData\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u30b3\u30f3\u30b9\u30c8\u30e9\u30af\u30bf\u306bform\u5f15\u6570\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002
\u3055\u3089\u306b\u30b9\u30d7\u30ec\u30c3\u30c9\u69cb\u6587(\u2026)\u3067\u914d\u5217\u306b\u683c\u7d0d\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\nmyform.addEventListener('submit',function(e){\n    e.preventDefault();\n\n    \/\/Form\u5165\u529b\u60c5\u5831\u3092\u914d\u5217\u3067\u53d6\u308a\u51fa\u3059\n    const dataArr = [...new FormData(this)];\n    console.log(dataArr);\n\n});\n<\/code><\/pre>\n\n\n\n

console.log\u3067\u78ba\u8a8d\u3059\u308b\u3068\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u5165\u529b\u60c5\u5831\u304c\u53d6\u308a\u51fa\u305b\u3066\u3044\u308b\u3053\u3068\u304c
\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002
<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n

\u3064\u304e\u306b\u3053\u306e\u914d\u5217\u3092Object\u306b\u5909\u63db\u3057\u307e\u3059\u3002
Object.fromEntries\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067Key-Value\u306e\u7d44\u307f\u5408\u308f\u305b\u3067
\u914d\u5217\u3092Object\u306b\u5909\u63db\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
\nmyform.addEventListener('submit',function(e){\n    e.preventDefault();\n    const dataArr = [...new FormData(this)];\n\n    \/\/\u914d\u5217\u3092Object\u306b\u5909\u63db\n    const data = Object.fromEntries(dataArr);\n    console.log(data);\n\n});\n<\/code><\/pre>\n\n\n\n

console.log\u3067\u78ba\u8a8d\u3059\u308b\u3068\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u6b63\u3057\u304fObject\u5316\u3067\u304d\u305f\u3053\u3068\u304c\u78ba\u8a8d\u3067\u304d\u307e\u3057\u305f\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n


\u6728\u66dc\u65e5\u62c5\u5f53\uff1anishida<\/p>\n
\n            
<\/g:plusone><\/div>\n            
 \"\u3053\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u3092\u306f\u3066\u306a\u30d6\u30c3\u30af\u30de\u30fc\u30af\u306b\u8ffd\u52a0\"<\/a>