在web开发中，我们经常需要实现动态添加表单输入字段的功能，例如添加多个教育经历或工作经验。当用户通过jquery等前端库动态生成新的输入框后，提交表单时却发现这些动态添加的字段值并未被发送到后端。
前端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">' +
'</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">' +
'</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">' +
'</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;
});上述代码会在点击按钮时，向 .education-info 容器中追加新的教育信息输入组。
后端Laravel控制器代码示例 (接收表单数据):
public function drprofilesettingpost(Request $request){
dd($request->all()); // 用于调试，打印所有接收到的请求数据
}当提交表单后，dd($request->all()) 的输出显示，动态添加的 degree1, clg1, yoc1 等字段的值为 null 或根本不存在，而静态表单字段则能正常获取。这表明问题出在前端表单提交的环节，而非后端处理逻辑。
经过仔细检查HTML结构，发现问题在于 <form> 标签的放置位置。在提供的代码中，<form> 标签被放置在一个相对较小的 div 内部，该 div 只包含了一个文件上传的组件。而实际的个人信息、教育经历、工作经验等大部分表单字段，包括那些动态添加的字段，都位于这个 <form> 标签的外部。
原始HTML结构的关键部分：
<div class="col-md-12">
<div class="form-group">
<div class="change-avatar">
<div class="profile-img">
<img src="{{url('/')}}/assets/img/doctors/doctor-thumb-02.jpg" alt="User Image">
</div>
<!-- 错误的 <form> 标签开始位置 -->
<form method="post" action="{{url('/')}}/doctor/profilesetting">
@csrf
<div class="upload-img">
<div class="change-photo-btn">
<span><i class="fa fa-upload"></i> Upload Photo</span>
<input type="file" class="upload">
</div>
<small class="form-text text-muted">Allowed JPG, GIF or PNG. Max size of 2MB</small>
</div>
</form> <!-- 错误的 <form> 标签结束位置 -->
</div>
</div>
</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">
<!-- 动态添加的输入框会在这里生成 -->
</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>根据HTML规范，只有位于 <form> 标签内部的 input、select、textarea 等表单元素，在表单提交时其值才会被发送到服务器。当 <form> 标签过早地关闭，所有后续的表单元素，无论是静态的还是动态添加的，都将不属于该表单，因此其值不会被提交。
解决此问题的关键是将 <form> 标签移动到能包裹所有需要提交的表单元素的最高层级。根据原始代码结构，最合适的放置位置应该是在包含所有表单内容的 col-md-7 col-lg-8 col-xl-9 这一列的外部。
修正后的HTML结构示例：
@include('doctor.navbar')
<!-- Breadcrumb ... (保持不变) -->
<!-- 将 <form> 标签移动到此处，包裹整个表单内容区域 -->
<form method="post" action="{{url('/')}}/doctor/profilesetting" enctype="multipart/form-data"> {{-- 注意：如果包含文件上传，需要添加 enctype="multipart/form-data" --}}
@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">
<div class="col-md-12">
<div class="form-group">
<div class="change-avatar">
<div class="profile-img">
<img src="{{url('/')}}/assets/img/doctors/doctor-thumb-02.jpg" alt="User Image">
</div>
{{-- 文件上传部分现在也在表单内部 --}}
<div class="upload-img">
<div class="change-photo-btn">
<span><i class="fa fa-upload"></i> Upload Photo</span>
<input type="file" class="upload" name="profile_photo"> {{-- 给文件输入添加name属性 --}}
</div>
<small class="form-text text-muted">Allowed JPG, GIF or PNG. Max size of 2MB</small>
</div>
</div>
</div>
</div>
<!-- ... 其他静态表单字段 ... -->
</div>
</div>
</div>
<!-- /Basic Information -->
<!-- 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> {{-- <form> 标签在此处正确结束 --}}
</div>
<!-- /Page Content -->
</div>
<!-- ... Scripts ... -->
</body>
</html>通过将 <form> 标签向上移动，使其能够包裹住所有需要提交的表单元素（包括静态元素和通过jQuery动态添加的元素），浏览器在提交表单时就能正确地收集所有输入值并发送到服务器。
为了更好地管理动态添加的表单数据，尤其是在后端处理时，推荐使用数组命名约定。
a. 使用数组命名 (Array Naming)
将动态添加的输入字段的 name 属性设置为数组形式，例如 name="degree[]" 而不是 name="degree1"。这样，当提交表单时，Laravel会自动将所有同名的字段值收集到一个数组中。
修改后的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控制器中访问数组数据：
public function drprofilesettingpost(Request $request){
// 当使用 name="field[]" 命名时，Laravel会自动将它们收集为数组
$degrees = $request->input('degree'); // $degrees 将是一个包含所有degree值的数组
$colleges = $request->input('clg'); // $colleges 将是一个包含所有clg值的数组
$yocs = $request->input('yoc'); // $yocs 将是一个包含所有yoc值的数组
// 假设用户添加了3组教育经历，那么这些数组都会有3个元素
// 你可以通过循环处理这些数据
for ($i = 0; $i < count($degrees); $i++) {
$educationData = [
'degree' => $degrees[$i],
'college' => $colleges[$i],
'year_of_completion' => $yocs[$i],
];
// 存储到数据库或进行其他处理
// Education::create($educationData);
}
dd($request->all()); // 再次调试，查看完整数据结构
}b. CSRF防护
确保在Laravel表单中包含 @csrf Blade指令，以防止跨站请求伪造攻击。这在修正后的HTML结构中已经包含，但值得再次强调其重要性。
c. 文件上传
如果表单中包含文件上传字段（如示例中的头像上传），务必在 <form> 标签中添加 enctype="multipart/form-data" 属性，否则文件将无法被正确上传。同时，确保文件输入字段有 name 属性。
通过遵循这些原则，您将能够有效地处理Laravel与jQuery结合的动态表单提交场景，确保数据的完整性和正确性。
以上就是Laravel与jQuery动态表单提交：解决输入值丢失的常见陷阱的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
229
