提交表单后重定向不起作用

Question

您好，提前感谢您的帮助。

我创建了此联系表单，理论上，一旦用户单击“提交”，该表单应将其重定向到页面。 PHP 脚本通过电子邮件向我发送表单，但用户仍保留在表单上。 作为新手，找不到原因。

它在这里：https://scalemy.company/contact.html

PHP 脚本：（我隐藏了敏感数据）

<?php
// Use PHPMailer classes
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;
use PHPMailer\PHPMailer\SMTP;
use PHPMailer\PHPMailer\OAuth;
use League\OAuth2\Client\Provider\Google;

date_default_timezone_set('Europe/Paris');

// Require PHPMailer autoload file
require '/home4/atypik/scalemy.company/vendor/phpmailer/phpmailer/src/PHPMailer.php';
require '/home4/atypik/scalemy.company/vendor/phpmailer/phpmailer/src/Exception.php';
require '/home4/atypik/scalemy.company/vendor/phpmailer/phpmailer/src/SMTP.php';
require '/home4/atypik/scalemy.company/vendor/autoload.php';

// Function to sanitize form inputs
function sanitize_input($input) {
    $input = trim($input);
    $input = stripslashes($input);
    $input = htmlspecialchars($input);
    return $input;
}

// Check if form is submitted
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Check if the hidden field is empty (anti-spam)
    if (!empty($_POST["honeypot"])) {
        header("Location: https://scalemy.company/success.html");
        exit;
    }

    // Initialize PHPMailer
    $mail = new PHPMailer(true);

    try {
        // Server settings for OAuth with Google
        $mail->isSMTP();
        $mail->Host = 'smtp.gmail.com'; // Google's SMTP server address
        $mail->SMTPAuth = true;
        $mail->SMTPSecure = PHPMailer::ENCRYPTION_SMTPS;
        $mail->AuthType = 'XOAUTH2';
        $mail->Port = 465; // TCP port to connect to

        // Google OAuth credentials
        $myemail = '[email protected]'; // Your Gmail email address
        $clientId = 'HIDDEN'; // Your OAuth client ID
        $clientSecret = 'HIDDEN'; // Your OAuth client secret
        $refreshToken = 'HIDDEN'; // Your OAuth refresh token

        // Configure OAuth
        $provider = new Google(
            [
                'clientId' => $clientId,
                'clientSecret' => $clientSecret,
            ]
        );
        $mail->setOAuth(
            new OAuth(
                [
                    'provider' => $provider,
                    'clientId' => $clientId,
                    'clientSecret' => $clientSecret,
                    'refreshToken' => $refreshToken,
                    'userName' => $myemail,
                ]
            )
        );

        // Form data
        $first_name = sanitize_input($_POST['first_name']);
        $last_name = sanitize_input($_POST['last_name']);
        $phone = sanitize_input($_POST['phone']);
        $email = sanitize_input($_POST['email']);
        $company_name = sanitize_input($_POST['company_name']);
        $role = sanitize_input($_POST['role']);
        $reasons = $_POST['reason'];
        $other_reason = sanitize_input($_POST['other_reason']);
        $description = sanitize_input($_POST['description']);
        $timeframe = sanitize_input($_POST['timeframe']);
        $contact_time = sanitize_input($_POST['contact_time']);

        // Check if $reasons is an array, otherwise convert it to one
        if (!is_array($reasons)) {
            $reasons = array($reasons);
        }

        // Combine selected reasons with custom reason if "Other" is selected
        if (in_array("Other", $reasons)) {
            // Add custom reason to reasons array
            $reasons[] = $other_reason;
        }

        // Implode reasons array into a comma-separated string
        $reasons_str = implode(", ", $reasons);


        // Recipient
        $mail->setFrom($email, $last_name);
        $mail->addAddress('[email protected]');

        // Email content
        $mail->isHTML(true);
        $mail->Subject = 'New Contact Form Submission';
        $mail->Body = "
            <h2>New Contact Form Submission</h2>
            <p><strong>First Name:</strong> $first_name</p>
            <p><strong>Last Name:</strong> $last_name</p>
            <p><strong>Phone:</strong> $phone</p>
            <p><strong>Email:</strong> $email</p>
            <p><strong>Company Name:</strong> $company_name</p>
            <p><strong>Role:</strong> $role</p>
            <p><strong>Reasons:</strong> $reasons_str</p>
            <p><strong>Other Reasons:</strong> $other_reason</p>
            <p><strong>Description:</strong> $description</p>
            <p><strong>Timeframe:</strong> $other_reason</p>
        ";

        // Send email
        $mail->send();
        header("Location: https://scalemy.company/success.html");
        exit;
    } catch (Exception $e) {
        // Log the error message to a file
        $error_message = "Message could not be sent. Mailer Error: {$mail->ErrorInfo}";
        file_put_contents('error_log', $error_message . PHP_EOL, FILE_APPEND);
    
        // Redirect to error page
        header("Location: error.php");
        exit;
    }
} else {
    header("Location: error.php");
    exit;
}
?>

Answer 1

您的 HTML 包含

assets/js/ajax-form.js

，其中包含以下几行

    var form = $('#contact-form');

    var formMessages = $('.ajax-response');

    $(form).submit(function(e) {
        e.preventDefault();


        var formData = $(form).serialize();

        $.ajax({
            type: 'POST',
            url: $(form).attr('action'),
            data: formData
        })
        .done(function(response) {
            // Make sure that the formMessages div has the 'success' class.
            $(formMessages).removeClass('error');
            $(formMessages).addClass('success');

            // Set the message text.
            $(formMessages).text(response);

            // Clear the form.
            $('#contact-form input,#contact-form textarea').val('');
        })

.... and other lines

这意味着当您触发表单提交（在本例中为“contact-form”表单）时，它不会触发正常的表单提交（您有 e.preventDefault()），而是通过 ajax 触发操作

在这种情况下，如果您希望在表单成功提交后进行表单重定向，则将重定向语句放在ajax的.done块中

因此，如果您想重定向到 https://scalemy.company/success.html，请添加行

window.location.href="https://scalemy.company/success.html"; 

因此将ajax块更改为：

        $.ajax({
            type: 'POST',
            url: $(form).attr('action'),
            data: formData
        })
        .done(function(response) {
            // Make sure that the formMessages div has the 'success' class.
            $(formMessages).removeClass('error');
            $(formMessages).addClass('success');

            // Set the message text.
            $(formMessages).text(response);

            // Clear the form.
            $('#contact-form input,#contact-form textarea').val('');

window.location.href="https://scalemy.company/success.html";

        })