Laravel模态框编辑表单点击不同按钮始终显示同一值问题

你的核心问题在于：点击编辑按钮触发模态框时，模态框内容是页面加载时静态渲染的，不会随点击的商家动态更新；同时控制器edit方法逻辑错误——它返回单个商家数据覆盖了列表页的商家列表，后续点击其他按钮时页面未刷新，模态框数据自然不会变化。

1. 修正控制器逻辑 #

拆分列表页展示与编辑数据接口：

• 新增index方法负责加载所有商家列表
• 修改edit方法返回单个商家的JSON数据，供前端动态获取

// 加载商家列表页
public function index()
{
    $merchant_details = Merchants_data::all();
    return view('manage_merchants', compact('merchant_details'));
}

// 返回单个商家的JSON数据
public function edit($merchant_id)
{
    $merchant = Merchants_data::findOrFail($merchant_id);
    return response()->json($merchant);
}

// 保留原update方法不变
public function update(Request $request, $merchant_id)
{
    $request->validate([
        'fees'=>'required',
    ]);
    $merchants = Merchants_data::findorfail($merchant_id);
    $merchants->fees = $request->input('fees');
    $merchants->update();
    return redirect('/manage_merchants')->with('success', 'Transaction Fee updated.'); 
}

2. 修改前端模板与交互 #

调整编辑按钮，添加数据属性 #

将原<a>标签改为按钮，用data-merchant-id存储商家ID，移除无效的href：

<table class="table table-hover">
    <thead>
        <tr>
            <th>商家ID</th>
            <th>商家名称</th>
            <th>交易手续费</th>
            <th>服务商</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($merchant_details as $item)
            <tr>
                <td>{{ $item->merchant_id }}</td>
                <td>{{ $item->merchant_name }}</td>
                <td>{{ $item->fees }}</td>
                <td>{{ $item->service_provider }}</td>
                <td>
                    <button type="button" class="btn btn-primary edit-merchant" data-merchant-id="{{ $item->merchant_id }}" data-toggle="modal" data-target="#exampleModal">更新</button>
                    <button type="button" class="btn btn-danger">删除</button>
                </td>
            </tr>
        @endforeach
    </tbody>   
</table>

完善模态框结构 #

确保模态框表单能动态接收数据，且提交地址正确指向update接口：

<!-- 模态框 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">更新交易手续费</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="merchantForm" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="form-group">
                        <label for="fees">交易手续费</label>
                        <input type="number" class="form-control" id="fees" name="fees" required>
                        <input type="hidden" id="merchantId" name="merchant_id">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary">保存修改</button>
                </div>
            </form>
        </div>
    </div>
</div>

添加JavaScript动态填充数据 #

监听模态框show.bs.modal事件，根据商家ID获取数据并填充表单：

$(document).ready(function() {
    $('.edit-merchant').click(function() {
        var merchantId = $(this).data('merchant-id');
        // 发送AJAX请求获取商家数据
        $.get('/edit/' + merchantId, function(data) {
            $('#fees').val(data.fees);
            $('#merchantId').val(data.merchant_id);
            // 设置表单提交地址
            $('#merchantForm').attr('action', '/manage_merchants/' + merchantId);
        });
    });
});

3. 路由配置补充 #

确保路由与控制器方法正确对应：

Route::get('/manage_merchants', [MerchantController::class, 'index']);
Route::get('/edit/{merchant_id}', [MerchantController::class, 'edit']);
Route::put('/manage_merchants/{merchant_id}', [MerchantController::class, 'update']);

内容的提问来源于stack exchange，提问作者Nosi Ishmael