如何通知用户他们的电子邮件已在同一页面上发送而不是页面重定向

Question

我是 PHP 新手，当用户使用网站联系我们表单时，我正在使用脚本发送电子邮件。电子邮件工作正常。然而，我遇到的问题是，当用户提交消息时，他们会被重定向到一个新页面，说明“已成功提交联系表单。谢谢，我会尽快回复您！”。我想要的是表单上方同一页面上的一条简单消息（即绿色消息，上面写着“已发送电子邮件”之类的内容。

PHP 脚本是：

Code Share

我的 HTML 表单目前如下所示：

                <form id="contact-form" method="post" action="sendemail.php" role="form">

                <div class="messages"></div>

                <div class="controls">

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="form_name">Firstname *</label>
                                <input id="form_name" type="text" name="name" class="form-control" placeholder="Please enter your firstname *" required="required" data-error="Firstname is required.">
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="form_lastname">Lastname *</label>
                                <input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Please enter your lastname *" required="required" data-error="Lastname is required.">
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="form_email">Email *</label>
                                <input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="form_phone">Phone</label>
                                <input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Please enter your phone">
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="form_message">Message *</label>
                                <textarea id="form_message" name="message" class="form-control" placeholder="Message for me *" rows="6" required="required" data-error="Please,leave us a message."></textarea>
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <input type="submit" class="btn btn-success btn-send" value="Send message">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <p class="text-muted"><strong>*</strong> These fields are required.</p>
                        </div>
                    </div>
                </div>

            </form>

提前致谢！

Answer 1

好的，在与 cmets 交谈之后，我创建了这个：

<div class="messages"></div>

<div class="controls">

    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label for="form_name">Firstname *</label>
                <input id="form_name" type="text" name="name" class="form-control" placeholder="Please enter your firstname *" required="required" data-error="Firstname is required.">
                <div class="help-block with-errors"></div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label for="form_lastname">Lastname *</label>
                <input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Please enter your lastname *" required="required" data-error="Lastname is required.">
                <div class="help-block with-errors"></div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label for="form_email">Email *</label>
                <input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
                <div class="help-block with-errors"></div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label for="form_phone">Phone</label>
                <input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Please enter your phone">
                <div class="help-block with-errors"></div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label for="form_message">Message *</label>
                <textarea id="form_message" name="message" class="form-control" placeholder="Message for me *" rows="6" required="required" data-error="Please,leave us a message."></textarea>
                <div class="help-block with-errors"></div>
            </div>
        </div>
        <div class="col-md-12">
            <button class="btn btn-success btn-send" id="sendEmailBtn">Send message</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <p class="text-muted"><strong>*</strong> These fields are required.</p>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#sendEmailBtn").click(function () {
            /* Disable the input fields and button so the user
                can't edit them or submit the form multiple times */
            $("input").prop("disabled", true);
            $("#sendEmailBtn").prop("disabled", true);

            // Submit the form via ajax
            $.post("http://yourdomain.com/sendemail.php", {
                name: $("#form_name").val(),
                surname: $("#form_lastname").val(),
                email: $("#form_email").val(),
                phone: $("#form_phone").val(),
                message: $("#form_message").val()
            }, function (data, status) {
                /* Responses, check the data is correct if it is display
                   your message else enable the form elements and button
                   and display an error message */
                console.log(data, status);
                // Method to display your message, maybe something like this: $(".messages").html("<h1>your messages</h1>");
            });
        });
    });
</script>

这应该可以在不需要更改您的 PHP 脚本的情况下工作。

Answer 2

最好的方法是用 PHP 编写一个脚本来发送您的电子邮件（您可能需要修改它）。您需要更改表单以使用Ajax。这将允许您将 POST 数据发送到将发送电子邮件的脚本，但它也会给您一个响应，然后您可以在该响应上显示您发送的消息。