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设置它的样式），然后使用OK按钮关闭弹出窗口。

任何指针都会受到赞赏。

Answer 1

进行以下更改，

首先，在ajax

submit

contact form

要添加消息框，请在包含上面给出的css文件之前使用Sweet Alert包含js和JS文件，您可以使用此{{3}链接，

您的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!'
                });
            });
    });
});

将POST后的预编写PHP表单重定向转换为弹出消息

1 个答案: