在开发web应用时，我们经常需要实现动态添加表单字段的功能，例如添加多条教育经历、工作经验等。通常，我们会使用javascript（如jquery）在用户点击按钮时动态生成html输入框。然而，一个常见的问题是，这些动态添加的输入框在表单提交后，其值在后端（例如laravel控制器中）却无法被正确接收，表现为 request->all() 中这些字段的值为 null 或根本不存在。
原始jQuery代码片段（用于动态添加教育信息）：
$(".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="degree1">' + // 注意这里的name属性
'</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="clg1">' + // 注意这里的name属性
'</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="yoc1">' + // 注意这里的name属性
'</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); // 将内容添加到 .education-info 容器
return false;
});Laravel控制器代码片段（用于接收数据）：
public function drprofilesettingpost(Request $request){
dd($request->all()); // 调试输出所有接收到的数据
}在上述场景中，尽管页面上通过jQuery成功添加了新的教育信息输入框，但 dd($request->all()) 的输出却显示这些动态添加的 degree1, clg1, yoc1 字段的值为 null，甚至可能根本不存在。
这个问题的根本原因在于HTML表单（<form> 标签）的结构不正确。浏览器在提交表单时，只会收集位于其开启标签 <form> 和关闭标签 </form> 之间的所有具有 name 属性的表单元素（如 <input>, <select>, <textarea>）的数据。
在提供的代码中，我们观察到 <form> 标签被放置在了一个相对靠后的位置：
原始HTML结构片段：
<div class="profile-img">
<img src="{{url('/')}}/assets/img/doctors/doctor-thumb-02.jpg" alt="User Image">
</div>
<form method="post" action="{{url('/')}}/doctor/profilesetting"> {{-- ！！！注意这里表单的开始标签 ！！！ --}}
@csrf
<div class="upload-img">
<!-- ...其他上传图片相关内容... -->
</div>
</div> {{-- 这是 profile-img div 的结束标签 --}}
</div> {{-- 这是 col-md-12 div 的结束标签 --}}
<!-- ...其他基本信息卡片内容... -->
<div class="col-md-7 col-lg-8 col-xl-9">
<!-- ...大量表单内容，包括“Education”部分和动态添加的输入框... -->
<div class="card">
<div class="card-body">
<h4 class="card-title">Education</h4>
<div class="education-info">
<!-- 这里的输入框，包括动态添加的，都在form标签外面 -->
<div class="row form-row education-cont">
<!-- ...输入框... -->
<input type="text" class="form-control" name="degree">
<!-- ... -->
</div>
</div>
<div class="add-more">
<a href="javascript:void(0);" class="add-education"><i class="fa fa-plus-circle"></i> Add More</a>
</div>
</div>
</div>
<!-- ...其他卡片和提交按钮... -->
<div class="submit-section submit-btn-bottom">
<button type="submit" class="btn btn-primary submit-btn">Save Changes</button>
</div>
</div>
</form> {{-- ！！！注意这里表单的结束标签 ！！！ --}}从上述结构可以看出，<form> 标签在 col-md-7 col-lg-8 col-xl-9 容器的外部，并且其内部只包含了一小部分元素，而大部分实际的表单字段（包括动态添加的“Education”部分）都位于 <form> 标签的外部。因此，当表单提交时，浏览器并不会收集这些外部字段的数据。
解决此问题的关键是确保所有需要提交的表单元素，无论是静态存在的还是通过JavaScript动态添加的，都必须被正确的 <form> 标签包裹。
修正后的HTML结构示例：
@include('doctor.navbar')
<!-- Breadcrumb -->
<div class="breadcrumb-bar">
<!-- ...面包屑导航内容... -->
</div>
<div class="content">
<div class="container-fluid">
<div class="row">
<!-- 左侧导航栏等 -->
<div class="col-md-5 col-lg-4 col-xl-3 theiaStickySidebar">
<!-- ...侧边栏内容... -->
</div>
{{-- 将 <form> 标签移到包含所有可提交内容的父级容器之外，确保其能包裹所有表单字段 --}}
<form method="post" action="{{url('/')}}/doctor/profilesetting">
@csrf {{-- CSRF 令牌必须在表单内部 --}}
<div class="col-md-7 col-lg-8 col-xl-9">
<!-- Basic Information -->
<div class="card">
<div class="card-body">
<h4 class="card-title">Basic Information</h4>
<div class="row form-row">
<!-- ...所有基本信息输入框... -->
<input type="text" class="form-control" value="{{$userinfo->firstname;}}">
<!-- ... -->
</div>
</div>
</div>
<!-- /Basic Information -->
<!-- About Me -->
<div class="card">
<div class="card-body">
<h4 class="card-title">About Me</h4>
<div class="form-group mb-0">
<label>Biography</label>
<textarea class="form-control" rows="5">{{$userinfo->biography}}</textarea>
</div>
</div>
</div>
<!-- /About Me -->
<!-- ...所有其他卡片内容，包括 Clinic Info, Contact Details, Pricing, Services and Specialization... -->
<!-- Education -->
<div class="card">
<div class="card-body">
<h4 class="card-title">Education</h4>
<div class="education-info">
{{-- 初始的教育信息输入框 --}}
<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>
</div>
<div class="add-more">
<a href="javascript:void(0);" class="add-education"><i class="fa fa-plus-circle"></i> Add More</a>
</div>
</div>
</div>
<!-- /Education -->
<!-- ...Experience, Awards, Memberships, Registrations 等其他卡片内容... -->
<div class="submit-section submit-btn-bottom">
<button type="submit" class="btn btn-primary submit-btn">Save Changes</button>
</div>
</div>
</form> {{-- 确保表单结束标签在所有需要提交的元素之后 --}}
</div>
</div>
</div>
<!-- /Page Content -->
<!-- ...脚本引用... -->将 <form> 标签移动到能够完全包裹所有需要提交的表单元素的位置，通常是在页面主要内容区域的外部。这样，无论是页面加载时就存在的表单字段，还是通过jQuery动态添加到 .education-info 容器中的字段，都将位于同一个 <form>...</form> 标签对内，从而在表单提交时被正确地收集和发送。
虽然修正表单标签可以解决数据提交问题，但对于动态添加的多个相同类型输入框（如多条教育经历），直接使用 name="degree1", name="clg1" 这样的命名方式并不理想。更好的实践是使用数组形式的命名，例如 name="degree[]", name="clg[]", name="yoc[]"。这样，后端可以更方便地将它们作为数组来处理。
优化后的jQuery代码（使用数组命名）：
$(".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);
return false;
});Laravel后端处理优化：
当使用数组命名时，Laravel的 Request 对象会自动将同名输入字段的值收集到一个数组中。
public function drprofilesettingpost(Request $request){
// dd($request->all()); // 现在你会看到 'degree', 'clg', 'yoc' 都是数组
$degrees = $request->input('degree', []); // 获取所有degree值，如果不存在则为空数组
$colleges = $request->input('clg', []); // 获取所有clg值
$years = $request->input('yoc', []); // 获取所有yoc值
// 假设每个教育经历的字段数量相同且顺序对应
foreach ($degrees as $index => $degree) {
$college = $colleges[$index] ?? null; // 使用 ?? 运算符提供默认值，防止索引不存在
$year = $years[$index] ?? null;
// 在这里处理每条教育经历的数据，例如保存到数据库
// Education::create([
// 'degree' => $degree,
// 'college' => $college,
// 'year_of_completion' => $year,
// 'user_id' => auth()->id(), // 关联用户ID
// ]);
echo "处理教育经历 - 学位: $degree, 学院: $college, 完成年份: $year <br>";
}
// 处理其他静态表单字段
$firstName = $request->input('firstname');
// ...
}通过遵循这些原则，您可以有效地管理动态生成的表单字段，并确保其数据在Laravel应用程序中被正确地提交和处理。
以上就是Laravel与jQuery动态表单提交：解决输入框数据丢失的核心问题的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
545
