带弹窗确认的JavaScript表单提交至PHP时跳转卡顿问题求助

核心问题 #

你的页面卡顿在PHP处理页的原因是后端判断逻辑错误：

if (isset($_POST["application-form"])) { ... }

表单的name属性不会被作为POST参数传递到后端，只有表单内带name属性的控件（如输入框、按钮等）的值才会出现在$_POST数组中。因此这个判断永远为false，导致跳转代码header("Location: ../operators.php")无法执行，页面停留在process-form.php。

而你用原生submit按钮时，按钮的name="submit_btn"会被提交到$_POST，此时后端如果是判断isset($_POST["submit_btn"])就会生效，但你现在改成了判断表单的name，所以逻辑失效。

修复步骤 #

1. 修正PHP判断逻辑

把判断条件改成检查提交按钮的存在，或者直接校验请求方法（更可靠）：

方案一：检查提交按钮

<?php
require 'config.php';

// 检查提交按钮是否被提交
if (isset($_POST["submit_btn"])) {
    // 执行数据插入逻辑
    // Data insertion queries

    header("Location: ../operators.php");
    exit();
}
?>

方案二：直接校验请求方法

<?php
require 'config.php';

// 只要是POST请求就处理
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 执行数据插入逻辑
    // Data insertion queries

    header("Location: ../operators.php");
    exit();
}
?>

2. 优化JS交互体验（可选）

当前JS逻辑没问题，可以在确认提交后先隐藏弹窗，提升用户体验：

confirmBtn.addEventListener('click', function () {
    popupCover.style.display = 'none'; // 先隐藏弹窗
    document.getElementById('application-form').submit();
});

3. AJAX提交修复（如果需要）

如果想用AJAX提交，确保正确获取表单数据并处理响应，示例代码：

confirmBtn.addEventListener('click', function () {
    popupCover.style.display = 'none';
    const form = document.getElementById('application-form');
    const formData = new FormData(form);

    fetch(form.action, {
        method: form.method,
        body: formData
    })
    .then(response => {
        response.ok ? window.location.href = '../operators.php' : alert('提交失败，请重试');
    })
    .catch(error => {
        console.error('提交错误:', error);
        alert('提交出错，请查看控制台');
    });
});

后端保持上面的修复即可，AJAX提交时$_SERVER['REQUEST_METHOD'] === 'POST'同样生效。

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