Bootstrap 5导致分步表单确认页无法显示输入数据求助

核心原因 #

你的分步表单在Bootstrap 5环境下确认页无数据，移除后正常，本质是表单未正确提交，导致PHP无法将用户输入存入Session：

1. 第一步、第三步的「Next」按钮是type="button"，点击时仅执行了自定义的tab切换JS，完全没触发表单提交，所以这两步的输入根本没传到PHP，Session里自然没有对应数据。
2. PHP跳转的锚点和HTML中tab的ID不匹配：比如第一步提交后跳转#step2，但对应tab的ID是contact，Bootstrap无法识别锚点激活正确tab，进一步导致流程混乱。
3. PHP开头的变量赋值多了echo，会把用户输入直接输出到页面顶部，不仅破坏页面结构，还可能导致后续取值异常。

修复步骤 #

1. 修正表单提交逻辑

将所有「Next」按钮改为type="submit"，让点击时优先触发表单提交，PHP处理后跳转对应步骤：

• 第一步表单的Next按钮修改：

<button type="submit" class="btn btn-primary next">Next</button>

• 第三步表单的Next按钮同理修改。

2. 修正PHP跳转的锚点

把PHP中跳转的锚点改为HTML中对应tab的实际ID：

// 替换原跳转逻辑
if ($nextStep <= 3) {
    // 对应tab的ID：step2→contact，step3→education
    $tabIds = ['', '', 'contact', 'education'];
    header('Location: ' . $_SERVER['PHP_SELF'] . '#' . $tabIds[$nextStep]);
} else {
    header('Location: ' . $_SERVER['PHP_SELF'] . '#confirm');
}

3. 移除多余的echo并清理JS逻辑

• 去掉PHP开头变量赋值的echo，避免页面顶部输出冗余内容：

// 原代码：echo $name = ... 改为：
$name = isset($_SESSION['name']) ? htmlspecialchars($_SESSION['name']) : '';
$email = isset($_SESSION['email']) ? htmlspecialchars($_SESSION['email']) : '';
$address = isset($_SESSION['address']) ? htmlspecialchars($_SESSION['address']) : '';
$phone = isset($_SESSION['phone']) ? htmlspecialchars($_SESSION['phone']) : '';
$university = isset($_SESSION['university']) ? htmlspecialchars($_SESSION['university']) : '';
$degree = isset($_SESSION['degree']) ? htmlspecialchars($_SESSION['degree']) : '';

• 移除自定义的tab切换JS，因为表单提交后PHP会跳转带锚点的URL，Bootstrap的tab组件会自动根据锚点激活对应标签页，无需手动切换。

4. 修正「Previous」按钮逻辑

「Previous」按钮不需要提交表单，改为type="button"，直接跳转对应锚点即可：

<!-- 第二步的Previous按钮示例 -->
<button type="button" class="btn btn-primary prev" onclick="window.location.href='<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>#home'">Previous</button>

额外优化点 #

• 给表单input添加form-control类，包裹在mb-3的div中，适配Bootstrap表单样式；
• 确认页的「Submit」按钮改为type="submit"，确保能触发step=4的登录验证和Session清理逻辑。

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