如何在Laravel中实现动态输入字段的更新与新增功能？

1. 修正Blade模板代码 #

当前输入框的name属性固定为requirements[0][title]，无法区分不同记录，需要加入隐藏字段存储每条记录的ID，让后端能识别是更新还是新增，同时添加新增行的按钮：

<table>
    <tbody>
        @foreach ($requirements as $key => $reqs)
            <tr>
                <td>
                    <input type="hidden" name="requirements[{{ $key }}][id]" value="{{ $reqs->id }}">
                    <input type="text" name="requirements[{{ $key }}][title]"
                        placeholder="Enter requirements" class="form-control"
                        value="{{ $reqs->requirements }}" />
                </td>
                <td>
                    <button type="button" class="btn btn-sm btn-danger remove-tr">Remove</button>
                </td>
            </tr>
        @endforeach
        <!-- 新增行按钮 -->
        <tr>
            <td colspan="2">
                <button type="button" class="btn btn-sm btn-primary add-tr">Add New Requirement</button>
            </td>
        </tr>
    </tbody>
</table>

<script>
    // 动态添加新行
    $('.add-tr').click(function() {
        // 用时间戳作为唯一key，避免命名冲突
        const key = Date.now();
        const newRow = `
            <tr>
                <td>
                    <input type="hidden" name="requirements[${key}][id]" value="">
                    <input type="text" name="requirements[${key}][title]"
                        placeholder="Enter requirements" class="form-control" />
                </td>
                <td>
                    <button type="button" class="btn btn-sm btn-danger remove-tr">Remove</button>
                </td>
            </tr>
        `;
        $(this).closest('tr').before(newRow);
    });

    // 删除行（动态绑定事件，支持新增行的删除）
    $(document).on('click', '.remove-tr', function() {
        $(this).closest('tr').remove();
    });
</script>

2. 后端处理更新与新增逻辑 #

遍历提交的requirements数组，根据是否存在id判断是更新已有记录还是创建新记录，同时可按需删除前端移除的旧记录：

// 获取当前表单下所有已有需求的ID
$existingReqIds = FormReq::where('form_id', $id)->pluck('id')->toArray();
// 收集提交的有效记录ID
$submittedReqIds = [];

foreach ($request->requirements as $requirement) {
    // 过滤空标题的无效记录
    if (empty(trim($requirement['title']))) {
        continue;
    }

    if (!empty($requirement['id'])) {
        // 更新已有记录
        $req = FormReq::find($requirement['id']);
        if ($req) {
            $req->requirements = trim($requirement['title']);
            $req->save();
            $submittedReqIds[] = $req->id;
        }
    } else {
        // 新增记录
        $req = new FormReq();
        $req->requirements = trim($requirement['title']);
        $req->form_id = $id;
        $req->save();
    }
}

// 可选：删除前端已移除的原有记录
$deletedIds = array_diff($existingReqIds, $submittedReqIds);
if (!empty($deletedIds)) {
    FormReq::whereIn('id', $deletedIds)->delete();
}

核心要点 #

• 模板通过requirements[{{ $key }}][id]传递记录ID，确保后端能定位到需要更新的条目；
• 动态新增行用时间戳作为key，避免表单字段命名冲突；
• 后端区分新增（无ID）和更新（有ID）逻辑，同时处理无效空数据和删除操作。

内容的提问来源于stack exchange，提问作者Sharmae Reyes