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

具有两种相等的形式没有意义，其中一种就足够了。

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

这是我的建议。

Answer 2

您可以尝试FormData.getAll()并遍历每个组条目。

const institutionNames = formData.getAll('institutionName');
const courseNames = formData.getAll('courseName');
...
const educations = [];
for (let i = 0; i < institutionNames.length; i++) {
  educations.push({
    institutionName: institutionNames[i],
    courseName: courseNames[i],
    ...
  });
}

Answer 3

不确定这是否是最好的方法，但是您可以实现所需的结构，如下所示：

const formCV = document.querySelector('#formCV');
const formData = new FormData(formCV);

function groupEducationData(inputGroupSize = 4) {
    const result = [];
    let educationObj = null;
    let counter = 0;

    for (const entry of formData.entries()) {
        // Since the counter is divisible by the number of inputs in a group
        // only if one form group finishes. And when one form group finishes,
        // we need to add the object into the result array
        if (counter % inputGroupSize === 0) {
            // if this is the first iteration, the educationObj is null and 
            // we don't want to add it to the result array yet
            // we only add the educationObj to the result array if it is
            // an object containing the education info
            if (educationObj) result.push(educationObj);

            // initialize the educationObj at the start
            // and after one form finishes
            educationObj = {};
        }

        // add entry[0] as key to the object (e.g. 'institutionName')
        // with the value of entry[1] (e.g. 'Harvard')
        educationObj[entry[0]] = entry[1];
        counter++;
    }

    return result.concat(educationObj);
}

console.log(groupEducationData());

<form id="formCV" action="">
        <div id="educationContainer">
            <!-- First Group -->
            <div class="education">
                <div>
                    <input type="text" name="institutionName" value="Harvard">
                </div>
                <div>
                    <input type="text" name="courseName" value="Web Development">
                </div>
                <div>
                    <input type="month" name="startDate" value="2000-11">
                </div>
                <div>
                    <input type="month" name="endDate" value="2008-11">
                </div>
            </div>
            <!-- Second Group -->
            <div class="education">
                <div>
                    <input type="text" name="institutionName" value="Oxford">
                </div>
                <div>
                    <input type="text" name="courseName" value="Business Management">
                </div>
                <div>
                    <input type="month" name="startDate" value="2009-10">
                </div>
                <div>
                    <input type="month" name="endDate" value="2010-05">
                </div>
            </div>
        </div>
    </form>

Answer 4

这也是一种填充所需格式数据的方法。

$(document).ready(function(){
  $(":button").click(function(){
  var educations=$("#formCV .education");
  var data=[];  
   educations.each(function(i,education){
   var set={}
   	$(education).find(":input").each(function(i,value){
    	set[$(value).attr("name")] = $(value).val();
    });
       data.push(set);
   })
   console.log("data",data)
  });
  
});

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>

<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>
    <input type="button" value="click me"/>
</form>

</body>
</html>

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

4 个答案: