解决jQuery动态添加表单输入在Laravel中无法提交的问题

碧海醫心

发布时间：2025-09-02 19:13:00

306人浏览过

来源于php中文网

原创

解决jQuery动态添加表单输入在Laravel中无法提交的问题

本教程旨在解决使用jQuery动态添加的表单输入字段在Laravel后端无法正确接收数据的问题。核心原因在于HTML

标签的放置位置不当，导致动态元素未被包含在表单提交范围内。文章将详细阐述正确的表单结构、动态输入命名策略以及Laravel后端处理方法，确保所有表单数据都能被成功提交和处理。

问题概述：动态表单字段数据丢失

在web开发中，我们经常需要实现用户动态添加表单输入字段的功能，例如添加多条教育经历、工作经验等。通常，这会通过javascript（如jquery）在客户端动态生成html元素并将其插入到dom中。然而，一个常见的问题是，当表单提交时，这些动态添加的输入字段的值却无法在后端（例如laravel控制器中）获取到，或者获取到的值为空。

原始代码中，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()); // 调试输出所有请求数据
}

然而，dd($request->all()) 的输出中，动态添加的 degree1, clg1, yoc1 等字段的值始终为 null。

根本原因：HTML

标签被放置在了一个相对较小的范围内：


    @@##@@


    @csrf

而动态添加教育经历的 div.education-info 元素，以及许多其他重要的表单字段，都位于这个

标签包裹住整个可编辑区域，即 div.col-md-7.col-lg-8.col-xl-9。

修改前的HTML结构（问题所在）：

AI Content Detector

Writer推出的AI内容检测工具

下载

修改后的HTML结构： 将

标签从其当前位置移除，并将其放在 div.col-md-7.col-lg-8.col-xl-9 的外部，使其能够包裹住整个内容区域。



    
        
        
            
            
            
                @csrf
                
                
                    
                
                

                
                
                    
                
                

                
                
                    
                        Education
                        
                            
                            
                                
                                    
                                        
                                            
                                                Degree
                                                
                                             
                                        
                                        
                                            
                                                College/Institute
                                                
                                             
                                        
                                        
                                            
                                                Year of Completion
                                                
                                             
                                        
                                    
                                
                            
                        
                        
                             Add More

关键修改点： 将

@csrf 放置在

之前，并在其内容结束之后添加闭合标签。这样，所有位于此 div 内的输入字段，无论是静态还是动态添加的，都将成为表单的一部分并随之提交。

2. 优化动态输入字段的 name 属性

为了在后端更方便地处理多个动态添加的同类字段（如多条教育经历），建议将 name 属性设置为数组形式。例如，将 name="degree1" 改为 name="degree[]"。

修改后的jQuery代码：

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

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

同样，对于初始的教育经历字段，也应将其 name 属性改为 name="degree[]"、name="clg[]" 和 name="yoc[]"。

3. Laravel 后端处理

当使用数组命名（如 name="degree[]"）时，Laravel 的 Request 对象会自动将这些同名输入字段的值收集到一个数组中。

修改后的Laravel控制器代码：

use Illuminate\Http\Request;

class DoctorProfileController extends Controller
{
    public function drprofilesettingpost(Request $request){
        // dd($request->all()); // 可以继续使用dd查看所有数据

        // 获取教育经历数据
        $degrees = $request->input('degree'); // 这是一个数组
        $colleges = $request->input('clg');   // 这是一个数组
        $yearsOfCompletion = $request->input('yoc'); // 这是一个数组

        // 假设所有教育经历字段的数量是相同的
        if (!empty($degrees) && is_array($degrees)) {
            foreach ($degrees as $index => $degree) {
                $college = $colleges[$index] ?? null;
                $yoc = $yearsOfCompletion[$index] ?? null;

                // 在这里处理每一条教育经历数据
                // 例如：保存到数据库
                // Education::create([
                //     'user_id' => auth()->id(),
                //     'degree' => $degree,
                //     'college' => $college,
                //     'year_of_completion' => $yoc,
                // ]);

                // 调试输出单条数据
                echo "Degree: $degree, College: $college, Year: $yoc 
";
            }
        }

        // 获取其他表单数据
        $firstName = $request->input('firstname');
        $lastName = $request->input('lastname');
        // ... 其他字段

        // 处理其他数据保存逻辑
        // ...

        return redirect()->back()->with('success', 'Profile updated successfully!');
    }
}

通过这种方式，$request->input('degree') 将返回一个包含所有 degree 字段值的数组，即使有多个动态添加的输入框，也能被正确收集和处理。

注意事项与最佳实践

唯一性与数组命名： 对于动态添加的同类输入，使用 name="field_name[]" 是最佳实践。如果需要区分每个动态组（例如，为每个教育经历分配一个唯一的ID），可以在 name 属性中包含索引，如 name="education[0][degree]"，name="education[1][degree]" 等。这需要更复杂的JavaScript逻辑来管理索引。
客户端验证： 动态添加的字段也应进行客户端验证。确保你的验证逻辑能够识别并处理这些新字段。
安全性： 始终在后端对所有接收到的数据进行验证和清理，以防止SQL注入、XSS攻击等安全漏洞。Laravel的验证器（Validator）提供了强大的功能。
用户体验： 在动态添加或删除字段时，提供清晰的视觉反馈，并确保删除功能能够正确移除对应的输入组。
CSRF 保护： Laravel 默认开启CSRF保护，确保在表单中包含 @csrf 指令，如示例所示。

总结

jQuery动态添加的表单输入无法在Laravel后端获取，通常是由于HTML

标签的作用域问题。通过将

HTML5怎样用output元素取计算结果数据_HTML5计算取法【辨明】

HTML5怎样通过表单获取用户输入数据_HTML5表单获取数据方式【实操】

SVG 滚动触发型单次文字描边动画教程

富士通电脑为何html5播不出字幕_富士通加html5字幕【添加】

如何通过 JavaScript 检测元素溢出并动态调整字体大小

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：Laravel与jQuery动态表单提交：解决输入框数据丢失的核心问题下一篇：解决Laravel与jQuery动态表单数据提交问题的完整指南

作者最新文章

MapStruct 多参数映射：正确使用 source 属性绑定方法参数

2026-01-12 15:48

酷狗音乐如何设置苹果手机铃声

2026-01-12 15:49

Python 中函数返回值的正确获取方式

2026-01-12 15:59

iPhone屏幕上出现的方块按钮怎么隐藏

2026-01-12 16:00

如何在 IntelliJ IDEA 中禁用紧凑型大括号格式（强制换行）

2026-01-12 16:00

Go语言中类型转换：将双向通道转为只读通道的语法解析

2026-01-12 16:04

如何在Java中跨类访问对象实例并共享状态

2026-01-12 16:04

天塌了！《棕色尘埃2》将开启和谐修改角色服装引不满

2026-01-12 16:04

iPhone 17e即将发布，刘海屏彻底成为历史

2026-01-12 16:08

微PE工具箱如何进行分区

2026-01-12 16:08

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI大模型

开放平台

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI大模型

腾讯元宝

腾讯混元平台推出的AI助手

文档处理

Excel 表格

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI大模型

中文写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

中文写作

写作工具

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

图画生成

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI大模型

中文写作

智谱清言 - 免费全能的AI助手

AI大模型

PDF 文档

相关专题

js获取数组长度的方法

在js中，可以利用array对象的length属性来获取数组长度，该属性可设置或返回数组中元素的数目，只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值，也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容，供大家免费下载使用。

552

2023.06.20

js刷新当前页面

js刷新当前页面的方法：1、reload方法，该方法强迫浏览器刷新当前页面，语法为“location.reload([bForceGet]) ”；2、replace方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，不能通过“前进”和“后退”来访问已经被替换的URL，语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

374

2023.07.04

js四舍五入

js四舍五入的方法：1、tofixed方法，可把 Number 四舍五入为指定小数位数的数字；2、round() 方法，可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

731

2023.07.04

js删除节点的方法

js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。

477

2023.09.01

JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号，可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容，供大家免费下载体验。

394

2023.09.04

js生成随机数的方法

js生成随机数的方法有：1、使用random函数生成0-1之间的随机数；2、使用random函数和特定范围来生成随机整数；3、使用random函数和round函数生成0-99之间的随机整数；4、使用random函数和其他函数生成更复杂的随机数；5、使用random函数和其他函数生成范围内的随机小数；6、使用random函数和其他函数生成范围内的随机整数或小数。

990

2023.09.04

如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍：1、内联脚本是将JavaScript代码直接嵌入到HTML标签中；2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中；3、外部脚本是将JavaScript代码放置在一个独立的文件；4、外部脚本是将JavaScript代码放置在一个独立的文件。

656

2023.09.12

Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型，用于表示独一无二的值。Symbol的特点：1、独一无二，每个Symbol值都是唯一的，不会与其他任何值相等；2、不可变性，Symbol值一旦创建，就不能修改或者重新赋值；3、隐藏性，Symbol值不会被隐式转换为其他类型；4、无法枚举，Symbol值作为对象的属性名时，默认是不可枚举的。

551

2023.09.20