表单提交后主页面无法跳转至首页的技术咨询

问题说明 #

现有表单已实现「保存数据+打印」功能，但点击提交按钮后，主表单页面无法跳转回首页。尝试通过PHP的header("location: ../padm.php"); exit;实现跳转时，实际是新打开的打印页面跳转到目标地址，而非原表单页面。

现有代码 #

表单HTML代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Save and Print Form Data</title>
</head>
<body>
    <form id="myForm" action="process.php" method="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required><br><br>
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required><br><br>
        
        <button type="submit">Save and Print</button>
    </form>

    <script>
        // JavaScript to handle form submission and printing
        document.getElementById('myForm').onsubmit = function() {
            // Open a new window to display the print view
            var printWindow = window.open('', '_blank');
            
            // Submit the form to process.php
            this.target = '_blank';
            
            // After submission, close the print window after a delay (adjust timing as needed)
            setTimeout(function(){
                printWindow.close();
            }, 5000); // 5000 milliseconds (5 seconds) delay to allow printing
            
            return true;
        };
    </script>
</body>
</html>

处理逻辑process.php代码 #

<?php
// Check if form is submitted
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Retrieve form data
    $name = $_POST['name'];
    $email = $_POST['email'];
    
    // Insert data into MySQL database (assuming you have a table 'users' with columns 'name' and 'email')
    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "aaa";
    
    // Create connection
    $conn = new mysqli($servername, $username, $password, $dbname);
    
    // Check connection
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }
    
    // SQL query to insert data
    $sql = "INSERT INTO users (name, email) VALUES ('$name', '$email')";
    
    if ($conn->query($sql) === TRUE) {
        // Data inserted successfully
        echo "<h2>Print Preview</h2>";
        echo "<p>Name: $name</p>";
        echo "<p>Email: $email</p>";
        
        // Add a button to trigger printing
        echo "<button onclick='window.print()'>Print</button>";
    } else {
        echo "Error: " . $sql . "<br>" . $conn->error;
    }
 
    $conn->close();
}
?>

问题原因 #

当前代码将表单提交的目标设为新打开的空白窗口（this.target = '_blank'），因此PHP的header跳转指令只会作用于这个打印窗口，主表单页面没有收到任何跳转指令，自然不会跳转。

解决方案 #

方案一：AJAX异步提交（推荐，体验更稳定） #

通过AJAX异步提交表单数据，完成保存后主动控制主页面跳转，同时打开打印窗口展示内容。

修改后的表单HTML代码

<!DOCTYPE html>
<html>
<head>
    <title>Save and Print Form Data</title>
</head>
<body>
    <form id="myForm">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required><br><br>
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required><br><br>
        
        <button type="button" onclick="submitForm()">Save and Print</button>
    </form>

    <script>
        function submitForm() {
            // 收集表单数据
            const formData = new FormData(document.getElementById('myForm'));
            
            // 异步提交数据到处理脚本
            fetch('process.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.text())
            .then(printContent => {
                // 打开打印窗口并写入内容
                const printWindow = window.open('', '_blank');
                printWindow.document.write(printContent);
                printWindow.document.close();
                
                // 主页面跳转回首页
                window.location.href = '../padm.php';
                
                // 延迟触发打印，确保内容加载完成
                setTimeout(() => {
                    printWindow.print();
                    // 可选：打印完成后自动关闭窗口
                    setTimeout(() => printWindow.close(), 1000);
                }, 500);
            })
            .catch(error => {
                console.error('提交出错:', error);
                alert('数据保存失败，请重试');
            });
        }
    </script>
</body>
</html>

修改后的process.php代码

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $name = $_POST['name'];
    $email = $_POST['email'];
    
    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "aaa";
    
    $conn = new mysqli($servername, $username, $password, $dbname);
    if ($conn->connect_error) {
        die("连接失败: " . $conn->connect_error);
    }
    
    // 替换为预处理语句，避免SQL注入风险
    $stmt = $conn->prepare("INSERT INTO users (name, email) VALUES (?, ?)");
    $stmt->bind_param("ss", $name, $email);
    
    if ($stmt->execute()) {
        // 返回打印预览内容，自动触发打印
        echo "<h2>打印预览</h2>";
        echo "<p>姓名: $name</p>";
        echo "<p>邮箱: $email</p>";
        echo "<script>window.onload = () => window.print();</script>";
    } else {
        echo "保存错误: " . $stmt->error;
    }
    
    $stmt->close();
    $conn->close();
}
?>

方案二：同步提交+主页面延迟跳转 #

如果不想使用AJAX，可以在原提交逻辑中，让主页面延迟执行跳转，同时保留打印窗口的处理逻辑。

修改后的表单JS代码

document.getElementById('myForm').onsubmit = function() {
    var printWindow = window.open('', '_blank');
    this.target = '_blank';
    
    // 主页面延迟跳转，等待表单提交完成（延迟时间根据实际情况调整）
    setTimeout(function(){
        window.location.href = '../padm.php';
    }, 1000);
    
    // 打印窗口处理逻辑
    setTimeout(function(){
        printWindow.print();
        printWindow.close();
    }, 5000);
    
    return true;
};

注意：这种方式依赖固定延迟时间，若服务器响应慢，可能出现跳转过早或过晚的问题，稳定性不如AJAX方案。

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