Laravel 10 表格编辑弹窗无法填充用户数据的问题

我看了你的代码，发现几个关键问题导致弹窗无法正确填充用户数据，咱们一步步来修复：

1. 缺少jQuery依赖，导致你的JS代码根本没执行 #

你用了$(document)这种jQuery语法，但页面里只引入了Bootstrap的JS，却没引入jQuery！Bootstrap 5本身不需要jQuery，但你自己写的JS依赖它，所以必须先引入jQuery：

<!-- 在Bootstrap JS之前引入jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>

2. 编辑按钮的Data属性不全，没传递复选框所需的字段 #

你当前只给按钮加了data-id、data-username、data-password，但弹窗里的active、各种角色复选框的数据都没传，而且密码是哈希后的，填充到输入框毫无意义（用户也没法编辑哈希值），所以修改按钮的Data属性：

<button type="button" style="width:100px;height:30px;background-color:#193c64;border-color:#193c64;color:white;" class="btn btn-default btn-xs edit-form"
        data-bs-toggle="modal" data-bs-target="#editModal"
        data-id="{{$user->id}}" 
        data-username="{{$user->username}}" 
        data-active="{{$user->active}}"
        data-quality-manager="{{$user->quality_manager}}"
        data-administrator="{{$user->administrator}}"
        data-account-manager="{{$user->account_manager}}"
        data-executive-manager="{{$user->executive_manager}}">Edit</button>

3. 完善JS代码，填充所有字段并修正表单Action #

原来的JS只处理了用户名和密码，现在要把所有字段（包括复选框）都填充，还要动态修改表单的提交地址（原来的{id}是硬编码，会导致提交错误）：

$(document).on('click', '.edit-form', function(e) {
    e.preventDefault();
    
    // 从按钮的Data属性里取所有数据
    const userData = $(this).data();
    
    // 填充用户名输入框
    $("#username").val(userData.username);
    // 密码框清空，因为是可选修改项
    $("#password").val('');
    
    // 处理复选框：根据后端返回的1/0设置选中状态
    $('input[name="active"]').prop('checked', userData.active === 1);
    $('input[name="quality_manager"]').prop('checked', userData.qualityManager === 1);
    $('input[name="administrator"]').prop('checked', userData.administrator === 1);
    $('input[name="account_manager"]').prop('checked', userData.accountManager === 1);
    $('input[name="executive_manager"]').prop('checked', userData.executiveManager === 1);
    
    // 更新表单的提交地址，替换成当前用户的ID
    $('#edit-form').attr('action', `/users/update/${userData.id}`);
});

4. 暂时可以忽略edit方法（可选） #

你当前的实现是前端通过Data属性直接填充弹窗，不需要走/users/edit/{id}这个后端路由，所以这个方法可以暂时注释掉，避免混淆；如果之后想改成Ajax从后端拉取用户数据，再启用它就行。

额外小优化 #

模态框的关闭按钮可以改成Bootstrap 5标准的样式，去掉多余的文字：

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

做完这些修改后，点击编辑按钮应该就能正确填充用户数据到弹窗里了，之后你再完善update方法的逻辑就可以啦。

备注：内容来源于stack exchange，提问作者Maranda Dominguez