如何修复 Laravel 表单中动态添加的输入框无法提交的问题-php教程-PHP中文网

如何修复 Laravel 表单中动态添加的输入框无法提交的问题

Laravel 表单提交时，动态通过 jQuery 添加的 input 元素未出现在 $request->all() 中，根本原因是这些元素未被包裹在标签内，导致浏览器忽略其提交数据。

laravel 表单提交时，动态通过 jquery 添加的 input 元素未出现在 `$request->all()` 中，根本原因是这些元素未被包裹在 `

闭合标签之后——这意味着它们完全脱离表单作用域，无论是否动态生成，都不会随表单提交。

? 问题定位：HTML 结构错误

观察模板关键片段：

<div class="card-body">
    <h4 class="card-title">Basic Information</h4>
    <div class="row form-row">
        <!-- 静态输入框（如 Username、Email 等） -->
    </div>
</div>
<!-- 此处已结束 card-body，但尚未关闭 form -->
 <!-- 这个 </div> 实际上是 card-body 的闭合 -->
 <!-- 这个 </div> 是 card 的闭合 -->
<!-- ⚠️ 注意：此时 </form> 尚未出现！但教育区块等已开始渲染 -->
<div class="card">
    <div class="card-body">
        <h4 class="card-title">Education</h4>
        <div class="education-info">
            <!-- 初始静态 education-cont -->
        </div>
        <div class="add-more">
            <a href="javascript:void(0);" class="add-education">Add More</a>
        </div>
    </div>
</div>
<!-- 最终 form 才关闭 -->

✅ 正确结构应为：整个表单内容（含所有字段 + 动态容器）必须严格位于

✅ 修复方案：修正表单包裹范围

将

Laravel

避免常见的Laravel错误：N+1查询、批量赋值、缓存陷阱及队列序列化陷阱。

下载

开始标签上移至页面主体内容最外层容器之前，确保所有输入字段（静态 + 动态）均被包含：

<!-- ✅ 正确位置：form 开始于 col-md-7 容器之前 -->

@csrf

Basic Information

@@##@@

Upload Photo

Education

Degree

College/Institute

Year of Completion

Add More

?️ jQuery 动态添加优化建议

为便于后端统一接收数组，推荐使用 name="degree[]" 等带 [] 的命名方式，而非 degree1、degree2：

$(".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>
                            <input type="text" class="form-control" name="degree[]">
</div>
                    </div>
                    <div class="col-12 col-md-6 col-lg-4">
                        <div class="form-group">
                            <label>College/Institute</label>
                            <input type="text" class="form-control" name="clg[]">
</div>
                    </div>
                    <div class="col-12 col-md-6 col-lg-4">
                        <div class="form-group">
                            <label>Year of Completion</label>
                            <input type="text" class="form-control" name="yoc[]">
</div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-2 col-lg-1">
                <label class="d-md-block d-sm-none d-none"> </label>
                <a href="#" class="btn btn-danger trash"><i class="far fa-trash-alt"></i></a>
            </div>
        </div>`;

    $(".education-info").append(educationcontent);
});

? 后端接收时，$request->degree、$request->clg、$request->yoc 将自动为数组，可安全遍历：

public function drprofilesettingpost(Request $request){
    $degrees = $request->input('degree', []);
    $colleges = $request->input('clg', []);
    $years = $request->input('yoc', []);

    foreach (array_filter($degrees) as $index => $degree) {
        // 保存第 $index 组教育信息
        Education::create([
            'degree' => $degree,
            'college' => $colleges[$index] ?? null,
            'year_of_completion' => $years[$index] ?? null,
        ]);
    }
}