解决动态添加输入框无法提交的问题：jQuery与Laravel集成指南

    @csrf
    

        
    

2. 使用事件委托

为了确保动态添加的元素也能触发事件，可以使用事件委托。将事件绑定到静态父元素上，然后通过选择器来指定要触发事件的动态子元素。

$(document).on('click', ".add-education", function () {
    // ... 动态添加元素的代码
});

或者，如果 .education-info 是静态存在的父元素，可以这样写：

$(".education-info").on('click', ".add-education", function () {
    // ... 动态添加元素的代码
});

这样，即使是动态添加的 .add-education 元素，也能正确触发 click 事件。

灵云AI开放平台

灵云AI开放平台

下载

3. 动态生成元素的命名规范

为了让后端能够正确解析动态添加的数据，需要为每个输入框设置唯一的 name 属性。可以使用数组形式的 name 属性，例如 degree[]、clg[]、yoc[]。

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

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

在 Laravel 后端，可以通过 $request->input('degree')、$request->input('clg')、$request->input('yoc') 获取到对应的数据，它们将会是数组。

4. Laravel 后端处理

在 Laravel 控制器中，使用 dd($request->all()) 调试时，如果发现动态添加的数据仍然为 null，请检查：

• 确保表单的 method 属性设置为 post。
• 确保表单中包含 CSRF 令牌 @csrf。
• 检查 JavaScript 代码中动态添加元素的 name 属性是否正确设置。
• 如果使用了 AJAX 提交，请确保请求头中包含了 X-CSRF-TOKEN。

如果使用了数组形式的 name 属性，可以使用以下代码来遍历和处理数据：

public function drprofilesettingpost(Request $request){
    $degrees = $request->input('degree');
    $colleges = $request->input('clg');
    $years = $request->input('yoc');

    if ($degrees) {
        foreach ($degrees as $key => $degree) {
            $college = $colleges[$key];
            $year = $years[$key];

            // 处理每个学历信息
            dump("Degree: " . $degree . ", College: " . $college . ", Year: " . $year);
        }
    }

    dd($request->all());
}

总结

解决 jQuery 动态添加输入框无法提交的问题，关键在于正确放置表单标签、使用事件委托以及规范动态生成元素的命名。通过以上步骤，可以确保动态添加的表单数据能够成功提交到 Laravel 后端进行处理，从而构建更加灵活和强大的 Web 应用。在实际开发中，还需要根据具体情况进行调整和优化，例如添加数据验证、错误处理等功能。