Laravel与jQuery动态表单提交：解决输入值丢失的常见陷阱

1. 问题现象与初步诊断

在web开发中，我们经常需要实现动态添加表单输入字段的功能，例如添加多个教育经历或工作经验。当用户通过jquery等前端库动态生成新的输入框后，提交表单时却发现这些动态添加的字段值并未被发送到后端。

前端jQuery代码示例 (动态添加教育经历):

$(".add-education").on('click', function () {
    var educationcontent = '
' +
        '
' +
            '
' +
                '
' +
                    '
' +
                        'Degree' +
                        '' +
                    '
' +
                '
' +
                '
' +
                    '
' +
                        'College/Institute' +
                        '' +
                    '
' +
                '
' +
                '
' +
                    '
' +
                        'Year of Completion' +
                        '' +
                    '
' +
                '
' +
            '
' +
        '
' +
        '
 
' +
    '
';

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

上述代码会在点击按钮时，向 .education-info 容器中追加新的教育信息输入组。

后端Laravel控制器代码示例 (接收表单数据):

public function drprofilesettingpost(Request $request){
    dd($request->all()); // 用于调试，打印所有接收到的请求数据
}

当提交表单后，dd($request->all()) 的输出显示，动态添加的 degree1, clg1, yoc1 等字段的值为 null 或根本不存在，而静态表单字段则能正常获取。这表明问题出在前端表单提交的环节，而非后端处理逻辑。

2. 问题根源：HTML表单结构不当

经过仔细检查HTML结构，发现问题在于

原始HTML结构的关键部分：

    

        

            

                @@##@@
            
            
            
                @csrf
                

                    

                         Upload Photo
                        
                    
                    Allowed JPG, GIF or PNG. Max size of 2MB
                
             
        
    



    
    
    

        

            
Education
            

                
            
            

                 Add More
            
        
    
    
    

        Save Changes
    

3. 解决方案：正确放置表单标签

解决此问题的关键是将

修正后的HTML结构示例：

@include('doctor.navbar')




 {{-- 注意：如果包含文件上传，需要添加 enctype="multipart/form-data" --}}
    @csrf
    

        
        

            

                
Basic Information
                

                    

                        

                            

                                

                                    @@##@@
                                
                                {{-- 文件上传部分现在也在表单内部 --}}
                                

                                    

                                         Upload Photo
                                         {{-- 给文件输入添加name属性 --}}
                                    
                                    Allowed JPG, GIF or PNG. Max size of 2MB
                                
                            
                        
                    
                    
                
            
        
        

        

        
        

            

                
Education
                

                    
                    

                        

                            

                                

                                    

                                        Degree
                                         {{-- 建议使用数组命名 --}}
                                    
                                
                                

                                    

                                        College/Institute
                                         {{-- 建议使用数组命名 --}}
                                    
                                
                                

                                    

                                        Year of Completion
                                         {{-- 建议使用数组命名 --}}
                                    
                                
                            
                        
                    
                
                

                     Add More
                
            
        
        

        

        

            Save Changes
        
    
 {{-- 
 标签在此处正确结束 --}}