HTML 表单 - 与对象数组类似的输入组

Question

因此，我有一个表单，其中包含代表教育信息的两组相同的输入。可能有两个以上，因为我想添加一个按钮来创建一个新组，以便用户可以像在 LinkedIn 中一样输入他所有的教育背景。

\n\n

<form id="formCV" action="">\n    <div id="educationContainer">\n        <!-- First Group -->\n        <div class="education">\n            <div>\n                <input type="text" name="institutionName">\n            </div>\n            <div>\n                <input type="text" name="courseName">\n            </div>\n            <div>\n                <input type="month" name="startDate">\n            </div>\n            <div>\n                <input type="month" name="endDate">\n            </div>\n        </div>\n        <!-- Second Group -->\n        <div class="education">\n            <div>\n                <input type="text" name="institutionName">\n            </div>\n            <div>\n                <input type="text" name="courseName">\n            </div>\n            <div>\n                <input type="month" name="startDate">\n            </div>\n            <div>\n                <input type="month" name="endDate">\n            </div>\n        </div>\n    </div>\n</form>\n

\n\n

现在，如果我使用 FormData API 来获取表单数据，如下所示：

\n\n

for(let entry of formData.entries()){\n    console.log(entry);\n}\n

\n\n

我得到以下输出：

\n\n

(2)\xc2\xa0["institutionName", "Harvard"]\n(2)\xc2\xa0["courseName", "Web Development"]\n(2)\xc2\xa0["startDate", "2000-11"]\n(2)\xc2\xa0["endDate", "2008-11"]\n(2)\xc2\xa0["institutionName", "Oxford"]\n(2)\xc2\xa0["courseName", "Business Management"]\n(2)\xc2\xa0["startDate", "2009-10"]\n(2)\xc2\xa0["endDate", "2010-05"]\n

\n\n

我想要实现的是以有组织的方式获得输出，如下所示：

\n\n

education:[\n    {\n        institutionName:"Harvard",\n        courseName:"Web Development",\n        startDate:"2000-11",\n        endDate:"2008-11"\n    },\n    {\n        ...\n    }\n]\n

\n\n

所以我有兴趣了解实现这一目标的最佳方法。预先感谢您的任何帮助！

\n

Answer 1

拥有两种相同的形式是没有意义的，只要一种形式就足够了。

除了表单之外，您还应该有一个显示添加的每个项目的列表。

这就是我推荐的。