在Laravel中如何将href中的值传递到Bootstrap模态窗口中

1. 调整列表页编辑按钮结构 #

在编辑按钮上新增两个data-*自定义属性，存储当前行对应的角色ID和角色名称，修改后的代码如下：

@foreach ($roles as $role)
    <tr>
        <td>{{ $sln++ }}</td>
        <td>{{ $role->name }}</td>
        <td>
            <a href="" class="btn addbtn editrole" 
               data-bs-toggle="modal" 
               data-bs-target="#role-edit-modal"
               data-role-id="{{ $role->id }}"
               data-role-name="{{ $role->name }}"
            >
                Edit
            </a>
        </td>
    </tr>
@endforeach

2. 调整模态框表单结构 #

首先移除模态框中名称输入框预设的value属性（模态框不在循环内，直接写$role->name无法获取对应行数据），同时新增一个隐藏的表单字段存储角色ID，方便后续提交表单时使用：

<form action="" method="post" id="role-form">
    <!-- 新增隐藏字段存角色ID -->
    <input type="hidden" name="role_id" id="edit-role-id">
    @csrf <!-- 补充Laravel required的CSRF令牌 -->
    <div class="form-group">
        <label for="roleName">Role Name</label>
        <!-- 移除原来的value属性，由jQuery动态赋值 -->
        <input type="text" name="name" id="role-name" class="form-control" maxlength="50">
        <span id="role-error" class="text-danger"></span>
    </div>
    <div class="btngroup">
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
</form>

如果你的提交地址是动态的，也可以后续通过jQuery动态修改form的action属性。

3. 编写jQuery逻辑 #

监听编辑按钮的点击事件，读取按钮上存储的自定义属性值，赋值到模态框的对应字段即可：

$(function() {
    // 监听编辑按钮点击事件
    $('.editrole').on('click', function(e) {
        // 阻止a标签默认跳转行为
        e.preventDefault();
        // 获取当前点击按钮存储的角色数据
        const roleId = $(this).data('role-id');
        const roleName = $(this).data('role-name');
        // 赋值到模态框字段
        $('#edit-role-id').val(roleId);
        $('#role-name').val(roleName);
        // 如果需要动态修改表单提交地址，可取消注释下面这行，路由替换为你自己的业务地址
        // $('#role-form').attr('action', `/roles/${roleId}`);
    });
});

完成以上步骤后，点击不同行的编辑按钮，模态框就会自动加载对应行的角色名称，同时角色ID会存储在隐藏字段中，提交表单时可以直接获取使用。

内容的提问来源于stack exchange，提问作者anna babu