POST后將預先編寫的PHP表單重定向轉換為彈出消息

Question

我不是PHP人士，但需要使用PHP郵件程序功能來提交簡單的聯系表。 我設法使表格正常工作，但是提交后而不是重定向到URL mailer.php 。 我想要一個簡單的彈出框（不是警報），顯示一個感謝消息，用戶可以簡單地關閉並返回上一頁。

我的html表單是：

<div id="form-messages"></div>
<form id="ajax-contact" method="post" action="mailer.php">
    <div class="field">
        <input type="text" id="name" name="name" placeholder="Your Name" required>
    </div>

    <div class="field">
        <input type="tel" id="tel" name="tel" placeholder="Your Number" required>
    </div>

    <div class="field">
        <button type="submit">Kilt outfit details</button>
    </div>
</form>

我的mailer.php包含：

<?php

// Only process POST reqeusts.
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Get the form fields and remove whitespace.
    $name = strip_tags(trim($_POST["name"]));
    $tel = strip_tags(trim($_POST["tel"]));

    // Check that data was sent to the mailer.
    if (empty($name) or empty($tel)) {
        // Set a 400 (bad request) response code and exit.
        http_response_code(400);
        echo "Oops! There was a problem with your submission. Please complete the form and try again.";
        exit;
    }

    // Set the recipient email address.
    // FIXME: Update this to your desired email address.
    $recipient = "myemail@domain.com";

    // Set the email subject.
    $subject = "Callback Request from $name";

    // Build the email content.
    $email_content = "Name: $name\n";
    $email_content .= "Phone Number: $tel\n\n";
    //$email_content .= "Message:\n$message\n";

    // Build the email headers.
    //$email_headers = "From: $name <$email>";
    $email_headers = "From: $name <'callback@mydomain.co.uk'>";

    // Send the email.
    if (mail($recipient, $subject, $email_content, $email_headers)) {
        // Set a 200 (okay) response code.
        http_response_code(200);
        echo "Thank You! Your message has been sent.";
    } else {
        // Set a 500 (internal server error) response code.
        http_response_code(500);
        echo "Oops! Something went wrong and we couldn't send your message.";
    }

} else {
    // Not a POST request, set a 403 (forbidden) response code.
    http_response_code(403);
    echo "There was a problem with your submission, please try again.";
}

而且我的JS文件包含：

$(function () {
    // Get the form.
    var form = $('#ajax-contact');

    // Get the messages div.
    var formMessages = $('#form-messages');

    // TODO: The rest of the code will go here...
});

// Set up an event listener for the contact form.
$(form).submit(function (event) {
    // Stop the browser from submitting the form.
    event.preventDefault();

    // TODO
});

// Serialize the form data.
var formData = $(form).serialize();

// Submit the form using 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.
        $('#name').val('');
        $('#tel').val('');
    })

    .fail(function (data) {
        // Make sure that the formMessages div has the 'error' class.
        $(formMessages).removeClass('success');
        $(formMessages).addClass('error');

        // Set the message text.
        if (data.responseText !== '') {
            $(formMessages).text(data.responseText);
        } else {
            $(formMessages).text('Oops! An error occured and your message could not be sent.');
        }
    });

我只是不太了解如何將重定向更改為彈出窗口，我瀏覽了過去的帖子，但無法解讀我需要改變方向的內容。 我希望使用“確定”按鈕關閉彈出窗口來彈出表單（我也想用CSS設置樣式）。

任何指針將不勝感激。

Answer 1

進行以下更改，

• 首先，將ajax調用的部分移到您的contact form的submit處理程序中

• 要添加消息框，請在包含上面給出的JS文件之前使用Sweet Alert包含css和js文件，您可以使用此CDN鏈接，

最后，您的JS文件如下所示

$(function () {
    // Get the form.
    var form = $('#ajax-contact');

    // Get the messages div.
    var formMessages = $('#form-messages');

    // Set up an event listener for the contact form.
    $(form).submit(function (event) {
        // Stop the browser from submitting the form.
        event.preventDefault();

        // Serialize the form data.
        var formData = $(form).serialize();

        // Submit the form using 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');

                swal({
                    title: 'Form Submitted',
                    text: response,
                    confirmButtonColor: '#3085d6',
                    confirmButtonText: 'Close!'
                });

                // Clear the form.
                $('#name').val('');
                $('#tel').val('');
            })

            .fail(function (data) {
                // Make sure that the formMessages div has the 'error' class.
                $(formMessages).removeClass('success');
                $(formMessages).addClass('error');
                var msg = '';

                // Set the message text.
                if (data.responseText !== '') {

                    msg = data.responseText;
                } else {
                    msg = 'Oops! An error occured and your message could not be sent.';
                }

                swal({
                    title: 'Form Submitted',
                    text: msg,
                    confirmButtonColor: '#3085d6',
                    confirmButtonText: 'Close!'
                });
            });
    });
});