Laravel 9表单添加取消按钮：如何实现无变更返回列表页？

我来帮你拆解下问题根源，再给出几个简单可行的解决方案：

首先，你的核心问题是HTML不允许表单嵌套——你在创建数据的主表单里又嵌套了一个用于取消的表单，这违反了HTML规范。浏览器会自动忽略内层的表单标签，所以点击Cancel按钮时，实际触发的是外层表单的提交（也就是store方法），完全偏离了你期望的取消逻辑。

下面是几种高效的解决思路：

方案1：用链接实现取消（推荐） #

取消操作本质是导航回列表页，不需要提交任何数据，直接用<a>标签最简洁，还能保留按钮样式：

修改Blade模板中的Cancel部分：

{{-- Submit the completed form --}}
<button class="text-xl text-white bg-green-500 rounded-md py-2 px-4 hover:bg-black">Submit</button>
{{-- 替换嵌套表单为链接 --}}
<a href="{{ route('nonDrivingReasons.cancelCreate') }}" class="text-xl text-black bg-white rounded-md py-2 px-4 hover:bg-gray-500 inline-block ml-2">Cancel</a>

配套路由配置 #

确保在routes/web.php中给取消方法配置命名路由（更易维护）：

// 显示创建表单
Route::get('/nonDrivingReasons/create', [NonDrivingReasonController::class, 'create'])->name('nonDrivingReasons.create');
// 取消创建并跳转列表页
Route::get('/nonDrivingReasons/cancelCreate', [NonDrivingReasonController::class, 'cancelCreate'])->name('nonDrivingReasons.cancelCreate');
// 存储数据
Route::post('/nonDrivingReasons/store', [NonDrivingReasonController::class, 'store'])->name('nonDrivingReasons.store');
// 列表页路由（假设已存在）
Route::get('/nonDrivingReasons/index', [NonDrivingReasonController::class, 'index'])->name('nonDrivingReasons.index');

优化控制器方法 #

控制器的取消方法改用路由命名跳转，更规范：

// Cancel creation of a new non-driving reason
public function cancelCreate() {
    return redirect()->route('nonDrivingReasons.index')
        ->with('message', 'Creation of non-driving reason cancelled');
}

方案2：用普通按钮+JS跳转 #

如果偏好按钮元素，可以给按钮设置type="button"（避免触发表单提交），再通过JS实现跳转：

<button type="button" onclick="window.location.href='{{ route('nonDrivingReasons.cancelCreate') }}'" class="text-xl text-black bg-white rounded-md py-2 px-4 hover:bg-gray-500 ml-2">Cancel</button>

为什么原来的代码会出错？ #

HTML规范明确禁止<form>标签嵌套，浏览器解析到嵌套表单时，会自动忽略内层的<form>和</form>标签。你的Cancel按钮实际属于外层的创建表单，点击时会触发外层表单的POST请求到store方法，这就导致了“点取消反而创建数据”的异常现象。

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