Laravel与jQuery动态表单提交：解决输入框数据丢失的核心问题-html教程-PHP中文网

Laravel与jQuery动态表单提交：解决输入框数据丢失的核心问题

本教程旨在解决使用jQuery动态添加的表单输入框在Laravel后端无法获取数据的问题。核心原因在于HTML

标签的错误放置，导致动态内容未被包含在表单提交范围内。我们将通过修正表单结构、优化动态输入命名，并展示后端Laravel控制器如何正确处理这些数据，确保所有表单数据都能被成功接收和处理。

1. 问题描述：动态添加输入框数据无法提交

在开发web应用时，我们经常需要实现动态添加表单字段的功能，例如添加多条教育经历、工作经验等。通常，我们会使用javascript（如jquery）在用户点击按钮时动态生成html输入框。然而，一个常见的问题是，这些动态添加的输入框在表单提交后，其值在后端（例如laravel控制器中）却无法被正确接收，表现为 request->all() 中这些字段的值为 null 或根本不存在。

原始jQuery代码片段（用于动态添加教育信息）：

$(".add-education").on('click', function () {
    var educationcontent = '' +
        '' +
            '' +
                '' +
                    '' +
                        'Degree' +
                        '' + // 注意这里的name属性
                    '' +
                '' +
                '' +
                    '' +
                        'College/Institute' +
                        '' + // 注意这里的name属性
                    '' +
                '' +
                '' +
                    '' +
                        'Year of Completion' +
                        '' + // 注意这里的name属性
                    '' +
                '' +
            '' +
        '' +
        ' ' +
    '';

    $(".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，甚至可能根本不存在。

2. 核心问题分析：HTML

之间的所有具有 name 属性的表单元素（如 ,

）的数据。<p>在提供的代码中，我们观察到 </p>
<form> 标签被放置在了一个相对靠后的位置：<p><strong>原始HTML结构片段：</strong></p><pre class="brush:php;toolbar:false;"><div class="profile-img">
    @@##@@
</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">
    
    <div class="card">
        <div class="card-body">
            <h4 class="card-title">Education</h4>
            <div class="education-info">
                
                <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> {{-- ！！！注意这里表单的结束标签 ！！！ --}}</pre><p>从上述结构可以看出，</p>
</form>
<form> 标签在 col-md-7 col-lg-8 col-xl-9 容器的外部，并且其内部只包含了一小部分元素，而大部分实际的表单字段（包括动态添加的“Education”部分）都位于 </form>
<form> 标签的外部。因此，当表单提交时，浏览器并不会收集这些外部字段的数据。<h3>3. 解决方案：修正HTML </h3>
</form>
<form> 标签的结构<p>解决此问题的关键是确保所有需要提交的表单元素，无论是静态存在的还是通过JavaScript动态添加的，都必须被正确的 </p><div class="aritcle_card flexRow">
							<div class="artcardd flexRow">
								<a class="aritcle_card_img" href="/ai/1538" title="ChatGPT Website Builder"><img
										src="https://img.php.cn/upload/ai_manual/000/969/633/68b7a2297c2df369.png" alt="ChatGPT Website Builder"></a>
								<div class="aritcle_card_info flexColumn">
									<a href="/ai/1538" title="ChatGPT Website Builder">ChatGPT Website Builder</a>
									<p>ChatGPT网站生成器，AI对话快速生成网站</p>
								</div>
								<a href="/ai/1538" title="ChatGPT Website Builder" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
							</div>
						</div>
</form>
<form> 标签包裹。<p><strong>修正后的HTML结构示例：</strong></p><pre class="brush:php;toolbar:false;">@include('doctor.navbar')

<div class="breadcrumb-bar">
    
</div>

{{-- 将 <form> 标签移到包含所有可提交内容的父级容器之外，确保其能包裹所有表单字段 --}}
            <form method="post" action="{{url('/')}}/doctor/profilesetting">
                @csrf {{-- CSRF 令牌必须在表单内部 --}}

<div class="col-md-7 col-lg-8 col-xl-9">
                    
                    <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>

<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}}

$(".add-education").on('click', function () { var educationcontent = '

' + '

' + 'Degree' + '' + // 使用数组命名 '

' + '

' + 'College/Institute' + '' + // 使用数组命名 '

' + '

' + 'Year of Completion' + '' + // 使用数组命名 '

' + '

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

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
"; } // 处理其他静态表单字段 $firstName = $request->input('firstname'); // ... }