Question

我是PHP的新手，当用户使用网站联系我们表单时，我正在使用脚本发送电子邮件。电子邮件工作正常。然而，我遇到的问题是，当用户提交消息时，他们会被重定向到新页面，表明＆＃34;联系表单已成功提交。谢谢，我会尽快回复你！＆＃34;。我想要的是在表格上方同一页面上的简单信息（即绿色信息，例如＆＃34;发送电子邮件＆＃34;。

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

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

Answer 2

好的，所以我在评论中谈到了这个：

<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脚本的情况下使用。

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

2 个答案: