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

Question

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

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

现在，如果我像这样使用 FormData API 获取表单数据:

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

我得到以下输出:

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

我想要实现的是以一种有组织的方式获得输出，就像这样:

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

所以我很想知道实现这一目标的最佳方法。在此先感谢您的帮助!

Answer 1

有两个相同的形式是没有意义的，一个就足够了。

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

这是我推荐的。