jQuery动态表单提交Laravel POST时yoc数组仅返回首项问题

现象 #

提交含动态新增教育经历条目的表单时，Laravel后端仅能接收到页面初始静态渲染的第一个毕业年份（yoc）值，动态新增的同名字段全部丢失，打印结果如下：

array:1 [▼
  0 => "1234"
]

目标是获取所有静态+动态新增条目对应的yoc完整数组。 #

关联代码 #

静态HTML结构 #

<div class="row form-row education-cont">
    <div class="col-12 col-md-10 col-lg-11">
        <div class="row form-row">
            <div class="col-12 col-md-6 col-lg-4">
                <div class="form-group">
                    <label>Degree</label>
                    <input type="text" name="degree" class="form-control">
                </div> 
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <div class="form-group">
                    <label>College/Institute</label>
                    <input type="text" name="clg" class="form-control">
                </div> 
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <div class="form-group">
                    <label>Year of Completion</label>
                    <input type="text" name="yoc[]" class="form-control">
                </div> 
            </div>
        </div>
    </div>
</div>
<!-- 注意这里多了一个冗余的</div>闭合标签 -->
</div> 

jQuery动态增删逻辑 #

$(".education-info").on('click','.trash', function () {
    $(this).closest('.education-cont').remove();
    return false;
});

$(".add-education").on('click', function () {
    var educationcontent = '<div class="row form-row education-cont">' +
        '<div class="col-12 col-md-10 col-lg-11">' +
            '<div class="row form-row">' +
                '<div class="col-12 col-md-6 col-lg-4">' +
                    '<div class="form-group">' +
                        '<label>Degree</label>' +
                        // 这里缺少name属性
                        '<input type="text" class="form-control">' +
                    '</div>' +
                '</div>' +
                '<div class="col-12 col-md-6 col-lg-4">' +
                    '<div class="form-group">' +
                        '<label>College/Institute</label>' +
                        // 这里缺少name属性
                        '<input type="text" class="form-control">' +
                    '</div>' +
                '</div>' +
                '<div class="col-12 col-md-6 col-lg-4">' +
                    '<div class="form-group">' +
                        '<label>Year of Completion</label>' +
                        '<input type="text" name="yoc[]" class="form-control">' +
                    '</div>' +
                '</div>' +
            '</div>' +
        '</div>' +
        '<div class="col-12 col-md-2 col-lg-1"><label class="d-md-block d-sm-none d-none">&nbsp;</label><a href="#" class="btn btn-danger trash"><i class="far fa-trash-alt"></i></a></div>' +
    '</div>';
    
    $(".education-info").append(educationcontent);
    return false;
});

Laravel后端接收逻辑 #

public function drprofilesettingpost(Request $request){
    $yoc = $request->yoc;
    dd($yoc);
}

问题原因 #

1. 静态HTML末尾多写了一个无效的</div>闭合标签，浏览器渲染DOM时会自动修正不匹配的标签，直接导致外层<form>标签被提前闭合。后续通过jQuery append插入的动态教育条目，全部被添加到form标签范围外，表单提交时不会序列化form外部的字段，因此后端只能收到初始静态渲染的第一个yoc值。
2. jQuery动态拼接的HTML中，学位（Degree）、院校（College/Institute）对应的input标签未设置name属性，即使在form内部也无法被提交；且静态渲染的这两个字段使用普通字符串格式的name，多条目提交时值会被覆盖，无法拿到完整数组。

修复步骤 #

1. 删除静态HTML末尾冗余的</div>标签，确保.education-info容器及内部所有动态新增的条目，全部处于<form>标签的开闭区间内。
2. 修改静态HTML中学位、院校字段的name属性为数组格式，和yoc字段保持一致：

<input type="text" name="degree[]" class="form-control">
<input type="text" name="clg[]" class="form-control">

3. 修改jQuery动态拼接的字段代码，补全学位、院校字段的数组格式name属性，修正后的拼接代码如下：

var educationcontent = '<div class="row form-row education-cont">' +
    '<div class="col-12 col-md-10 col-lg-11">' +
        '<div class="row form-row">' +
            '<div class="col-12 col-md-6 col-lg-4">' +
                '<div class="form-group">' +
                    '<label>Degree</label>' +
                    '<input type="text" name="degree[]" class="form-control">' +
                '</div>' +
            '</div>' +
            '<div class="col-12 col-md-6 col-lg-4">' +
                '<div class="form-group">' +
                    '<label>College/Institute</label>' +
                    '<input type="text" name="clg[]" class="form-control">' +
                '</div>' +
            '</div>' +
            '<div class="col-12 col-md-6 col-lg-4">' +
                '<div class="form-group">' +
                    '<label>Year of Completion</label>' +
                    '<input type="text" name="yoc[]" class="form-control">' +
                '</div>' +
            '</div>' +
        '</div>' +
    '</div>' +
    '<div class="col-12 col-md-2 col-lg-1"><label class="d-md-block d-sm-none d-none">&nbsp;</label><a href="#" class="btn btn-danger trash"><i class="far fa-trash-alt"></i></a></div>' +
'</div>';

验证 #

修复后提交表单，后端可通过$request->degree、$request->clg、$request->yoc分别获取三个字段的完整数组，数组下标一一对应，直接遍历即可处理多组教育经历数据。

内容的提问来源于stack exchange，提问作者ITS_HJ 24