Laravel点击Reserve按钮无法跳转reservedone.blade.php页面问题

直接触发原因：非法HTML嵌套拦截了跳转事件 #

当前按钮代码违反HTML DOM规范，将交互型元素<button>嵌套在<a>跳转标签内部：

<a href="{{url('reserve_done')}}">
    <button>Reserve</button>
</a>

HTML标准明确禁止<a>标签嵌套按钮、链接这类可交互元素，浏览器解析这类非法结构时会中断事件冒泡，点击按钮时不会触发外层a标签的跳转逻辑，页面自然停留在原地。

临时修复（仅解决点击不跳转问题） #

两种改法选一个就行：

• 去掉内层button标签，直接给a标签加按钮样式实现同等视觉效果

<div class="Reserve">
    <a href="{{url('reserve_done')}}" class="reserve-btn">Reserve</a>
</div>

• 去掉外层a标签，给button绑定跳转事件

<div class="Reserve">
    <button onclick="location.href='{{url('reserve_done')}}'">Reserve</button>
</div>

隐藏业务逻辑bug（必须修复，否则预约功能完全无效） #

当前按钮的跳转逻辑和预约提交流程完全脱节：点击按钮直接跳成功页，根本不会触发/reserveinfo的POST提交接口，用户填的所有个人信息、上传的PCR报告、处方文件都不会存入数据库，属于空跳转。

完整修复方案 #

1. 把Reserve按钮放到预约表单内部，设为表单提交按钮，表单配置POST提交地址，别忘了加@csrf和文件上传必须的enctype属性：

<form method="POST" action="{{url('/reserveinfo')}}" enctype="multipart/form-data">
    @csrf
    <!-- 原有所有表单项：性别选择、姓名、邮箱、生日、PCR文件上传、处方文件上传 全部放在form标签内部 -->
    <div class="Reserve">
        <button type="submit">Reserve</button>
    </div>
</form>

2. 修改控制器reserveinfo方法的返回逻辑，数据保存成功后直接重定向到预约成功页，不要返回上一页：

public function reserveinfo(Request $request){
    // 原有的参数接收、文件上传、数据存库逻辑保持不变
    $data->save();
    // 把原来的 return redirect()->back(); 替换为下面这行
    return redirect('/reserve_done');
}

兜底排查项 #

如果改完代码还是异常，执行以下Laravel缓存清除命令即可：

php artisan route:clear
php artisan view:clear
php artisan cache:clear

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