如何在Laravel中使用JavaScript将ID传递给表单action？

编辑功能修复 #

你的编辑脚本已经拿到了data-id，但没把ID同步到表单的隐藏域和action地址里，按以下修改：

1. 修改编辑模态框的JS代码 #

$(document).on("click", ".edit_modal", function () {
    var data_id = $(this).data('id');
    var data_name = $(this).data('name');
    // 给隐藏ID输入框赋值
    $("#edit_id").val(data_id);
    // 动态更新表单的action地址
    var updateUrl = "{{ route('sale.update', ':id') }}".replace(':id', data_id);
    $("#edit-form").attr('action', updateUrl);
    // 给名称输入框赋值（确保DOM中存在#edit_name元素）
    $(".form-group #edit_name").val(data_name);
});

2. 修改编辑表单代码 #

给表单添加ID，修正action的写法：

<form method="post" action="" id="edit-form" role="form">
    <div class="modal-body">
        @csrf()
        @method('PATCH')
        <input type="hidden" name="edit_id" id="edit_id"/>
        <!-- 补充名称输入框，对应JS中的#edit_name -->
        <input type="text" name="edit_name" id="edit_name" class="form-control"/>
    </div>
    <div class="modal-footer">
        <button type="submit" class="btn btn-primary">Save</button>
    </div>
</form>

删除功能修复 #

删除脚本已拿到data-id但未同步到表单action，同时按钮的onclick="delete()"存在关键字冲突问题，按以下修改：

1. 修改删除模态框的JS代码 #

$(document).on("click", ".delete_modal", function () {
    var data_id = $(this).data('id');
    // 动态更新删除表单的action地址
    var deleteUrl = "{{ route('sale.destroy', ':id') }}".replace(':id', data_id);
    $("#delete-form").attr('action', deleteUrl);
});

2. 修改删除表单代码 #

给表单添加ID，移除错误的onclick事件：

<form method="post" action="" id="delete-form" role="form">
    @csrf()
    @method('DELETE')
    <div class="modal-footer">
        <input type="submit" class="btn btn-primary" value="Yes">
    </div>
</form>

关键注意点 #

• 确保触发模态框的按钮正确设置了data-id和data-name属性，例如：<button class="edit_modal" data-id="{{ $sale->id }}" data-name="{{ $sale->name }}">编辑</button>
• Laravel路由中sale.update和sale.destroy必须定义参数，示例：

  Route::patch('/sale/{sale}', [SaleController::class, 'update'])->name('sale.update');
  Route::delete('/sale/{sale}', [SaleController::class, 'destroy'])->name('sale.destroy');
  

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