当前位置：首页 > 文章列表 > 文章 > 前端 > jQuery动态添加表单提交无效解决方法

jQuery动态添加表单提交无效解决方法

2025-09-09 13:54:11 0浏览收藏

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《jQuery动态添加表单提交失败解决方法》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

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

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

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

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

在Web开发中，我们经常需要实现用户动态添加表单输入字段的功能，例如添加多条教育经历、工作经验等。通常，这会通过JavaScript（如jQuery）在客户端动态生成HTML元素并将其插入到DOM中。然而，一个常见的问题是，当表单提交时，这些动态添加的输入字段的值却无法在后端（例如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>' +
                        '&lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;degree1&quot;&gt;' + // 注意这里的name属性
                    '</div>' +
                '</div>' +
                '<div class="col-12 col-md-6 col-lg-4">' +
                    '<div class="form-group">' +
                        '<label>College/Institute</label>' +
                        '&lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;clg1&quot;&gt;' + // 注意这里的name属性
                    '</div>' +
                '</div>' +
                '<div class="col-12 col-md-6 col-lg-4">' +
                    '<div class="form-group">' +
                        '<label>Year of Completion</label>' +
                        '&lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;yoc1&quot;&gt;' + // 注意这里的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">&nbsp;</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()); // 调试输出所有请求数据
}

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

根本原因：HTML 标签的作用域

此问题的核心在于HTML 标签的放置位置不正确，导致动态添加的输入字段并未被包含在实际提交的表单范围内。

在提供的Blade模板代码中，标签被放置在了一个相对较小的范围内：

<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>
</form>

而动态添加教育经历的 div.education-info 元素，以及许多其他重要的表单字段，都位于这个标签的外部。浏览器在提交表单时，只会收集其内部所有具有 name 属性的输入元素的 value。因此，所有位于标签外部的动态或静态输入字段都不会被提交到服务器。

解决方案：正确放置标签并优化输入命名

要解决此问题，我们需要将标签移动到能够包含所有需要提交的输入字段的父元素外部。同时，为了更好地处理动态添加的多个同类字段，建议采用数组命名方式。

1. 调整标签的位置

根据提供的HTML结构，最合适的做法是将标签包裹住整个可编辑区域，即 div.col-md-7.col-lg-8.col-xl-9。

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

<div class="col-md-7 col-lg-8 col-xl-9">
    <!-- ... 各种卡片（Basic Information, About Me, Clinic Info等） ... -->
    <!-- 注意：form标签在某个div内部，且范围很小 -->
    <form method="post" action="{{url('/')}}/doctor/profilesetting">
        @csrf
        <!-- 只有少量元素在此form内 -->
    </form>
    <!-- 大部分表单内容（包括动态添加的教育经历）都在form外部 -->
</div>

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

<!-- ... 省略顶部导航和面包屑 ... -->
<div class="container-fluid">
    <div class="row align-items-center">
        <!-- ... 省略左侧导航或固定内容 ... -->
        <div class="col-md-7 col-lg-8 col-xl-9">
            <!-- 原始form标签在这里，范围过小 -->
            <!-- 现在将form标签移动到此处，包裹整个内容区域 -->
            <form method="post" action="{{url('/')}}/doctor/profilesetting">
                @csrf
                <!-- Basic Information -->
                <div class="card">
                    <!-- ... 所有表单内容，包括动态添加的教育经历部分 ... -->
                </div>
                <!-- /Basic Information -->

                <!-- About Me -->
                <div class="card">
                    <!-- ... -->
                </div>
                <!-- /About Me -->

                <!-- 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>
                                                &lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;degree[]&quot;&gt;
                                            </div> 
                                        </div>
                                        <div class="col-12 col-md-6 col-lg-4">
                                            <div class="form-group">
                                                <label>College/Institute</label>
                                                &lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;clg[]&quot;&gt;
                                            </div> 
                                        </div>
                                        <div class="col-12 col-md-6 col-lg-4">
                                            <div class="form-group">
                                                <label>Year of Completion</label>
                                                &lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;yoc[]&quot;&gt;
                                            </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 -->

                <!-- ... 其他所有卡片和提交按钮 ... -->
                <div class="submit-section submit-btn-bottom">
                    <button type="submit" class="btn btn-primary submit-btn">Save Changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

关键修改点： 将 @csrf 放置在

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

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

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

修改后的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>' +
                        '&lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;degree[]&quot;&gt;' + // 使用数组命名
                    '</div>' +
                '</div>' +
                '<div class="col-12 col-md-6 col-lg-4">' +
                    '<div class="form-group">' +
                        '<label>College/Institute</label>' +
                        '&lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;clg[]&quot;&gt;' + // 使用数组命名
                    '</div>' +
                '</div>' +
                '<div class="col-12 col-md-6 col-lg-4">' +
                    '<div class="form-group">' +
                        '<label>Year of Completion</label>' +
                        '&lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;yoc[]&quot;&gt;' + // 使用数组命名
                    '</div>' +
                '</div>' +
            '</div>' +
        '</div>' +
        '<div class="col-12 col-md-2 col-lg-1"><label class="d-md-block d-sm-none d-none">&nbsp;</label><a href="#" class="btn btn-danger trash"><i class="far fa-trash-alt"></i></a></div>' +
    '</div>';

    $(".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 <br>";
            }
        }

        // 获取其他表单数据
        $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

WSL中PHP执行命令stdout捕获失败原因与解决方法

上一篇: WSL中PHP执行命令stdout捕获失败原因与解决方法

下一篇: 华为智慧屏看电影拖影解决方法

查看更多

最新文章

文章 · 前端 | 11分钟前 | JavaScript 用户体验可访问性自定义右键菜单 contextmenu事件

HTML自定义右键菜单方法详解

472浏览收藏
文章 · 前端 | 18分钟前 |

HTMLdetails标签作用及使用方法

215浏览收藏
文章 · 前端 | 22分钟前 |

多设备适配图片如何选择

500浏览收藏
文章 · 前端 | 38分钟前 |

FontAwesome图标切换失败解决方法

153浏览收藏
文章 · 前端 | 40分钟前 | html CSS 优先级开发者工具外部样式表

如何正确引入和调用CSS样式表

476浏览收藏
文章 · 前端 | 1小时前 |

JS敏感词过滤方法全解析

153浏览收藏
文章 · 前端 | 1小时前 |

JS缓存接口数据的几种方法

434浏览收藏
文章 · 前端 | 1小时前 |

HTML滑动侧边栏实现方法详解

143浏览收藏
文章 · 前端 | 1小时前 |

Jest测试中AWS凭证管理技巧

128浏览收藏
文章 · 前端 | 1小时前 |

HTML滑块控件使用教程及样式优化

428浏览收藏
文章 · 前端 | 2小时前 |

async/await如何影响事件循环？

200浏览收藏
文章 · 前端 | 2小时前 |

网页元素变形解决方法及响应式教程

363浏览收藏

查看更多

课程推荐

前端进阶之JavaScript设计模式

设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。

543次学习
GO语言核心编程课程

本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。

514次学习
简单聊聊mysql8与网络通信

如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让

499次学习
JavaScript正则表达式基础与实战

在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。

487次学习
从零制作响应式网站—Grid布局

本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。

484次学习

查看更多

AI推荐

AI Mermaid流程图

SEO AI Mermaid 流程图工具：基于 Mermaid 语法，AI 辅助，自然语言生成流程图，提升可视化创作效率，适用于开发者、产品经理、教育工作者。

30次使用
iTerms

iTerms是一款专业的一站式法律AI工作台，提供AI合同审查、AI合同起草及AI法律问答服务。通过智能问答、深度思考与联网检索，助您高效检索法律法规与司法判例，告别传统模板，实现合同一键起草与在线编辑，大幅提升法律事务处理效率。

37次使用
迅捷AIPPT

迅捷AIPPT是一款高效AI智能PPT生成软件，一键智能生成精美演示文稿。内置海量专业模板、多样风格，支持自定义大纲，助您轻松制作高质量PPT，大幅节省时间。

24次使用
迅捷AI写作

迅捷AI写作，您的智能AI写作助手！快速生成各类文稿，涵盖新媒体、工作汇报。更兼具文字识别、语音转换、格式转换等实用功能，一站式解决文本处理难题，显著提升工作效率。

10次使用
小图钉Excel

小图钉Excel：AI大模型驱动的智能助手，通过自然语言对话，自动解决Excel复杂操作，如写函数、整理格式。支持本地文件修改，数据严格保密，助您告别Excel烦恼，高效提升工作效率。

5次使用