CodeIgniter中如何将用户ID传递至模态表单？

步骤1：修改按钮属性，规范存储用户ID #

把按钮的value属性换成标准的data-*自定义属性，方便JavaScript读取：

<a data-user-id="<?= $value['id']; ?>" class="btn btn-secondary btn-sm btn-info permission" data-bs-toggle="modal" data-bs-target="#modal-center" title="Permission">
    <i class="fas fa-user"></i>
</a>

步骤2：调整模态表单结构（二选一） #

方案A：动态更新表单提交地址

先写好表单的基础提交路径，去掉固定的用户ID：

<div class="modal fade" id="modal-center" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">设置用户权限</h5>
            </div>
            <form class="mt-4" action="<?= base_url('User/add_mem_to_group/'); ?>" method="post">
                <select class="form-select" aria-label="Default select example" name="Permission">
                    <option selected value="1">Admin</option>
                    <option value="2">Moderator</option>
                    <option value="3">Client</option>
                </select>
                <button class="btn btn-primary w-md waves-effect waves-light mt-3" type="submit">提交</button>
            </form>
        </div>
    </div>
</div>

方案B：添加隐藏字段传递用户ID

在表单内新增一个隐藏输入框，专门存储用户ID：

<div class="modal fade" id="modal-center" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">设置用户权限</h5>
            </div>
            <form class="mt-4" action="<?= base_url('User/add_mem_to_group/'); ?>" method="post">
                <input type="hidden" name="user_id" id="modal-user-id">
                <select class="form-select" aria-label="Default select example" name="Permission">
                    <option selected value="1">Admin</option>
                    <option value="2">Moderator</option>
                    <option value="3">Client</option>
                </select>
                <button class="btn btn-primary w-md waves-effect waves-light mt-3" type="submit">提交</button>
            </form>
        </div>
    </div>
</div>

步骤3：添加JS代码处理ID传递 #

监听Bootstrap模态框的show.bs.modal事件，获取当前点击按钮的用户ID，对应更新表单：

// 监听模态框即将显示的事件
document.getElementById('modal-center').addEventListener('show.bs.modal', function (event) {
    // 获取触发模态框的按钮
    const triggerBtn = event.relatedTarget;
    // 从按钮的data属性中读取用户ID
    const userId = triggerBtn.getAttribute('data-user-id');
    
    // 对应方案A：拼接完整的表单提交地址
    const form = this.querySelector('form');
    form.action = form.action + userId;
    
    // 对应方案B：给隐藏字段赋值（二选一即可）
    // document.getElementById('modal-user-id').value = userId;
});

控制器适配 #

• 如果用方案A：保持原控制器逻辑，从URL路径获取ID即可

public function add_mem_to_group($userId) {
    $permission = $this->input->post('Permission');
    // 权限设置逻辑
}

• 如果用方案B：修改控制器从POST参数中获取ID

public function add_mem_to_group() {
    $userId = $this->input->post('user_id');
    $permission = $this->input->post('Permission');
    // 权限设置逻辑
}

内容的提问来源于stack exchange，提问作者christy mallony