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

Question

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

PHP 脚本是：

代码共享

我的 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

好的，所以在评论中交谈后，我创建了这个：

<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 数据发送到将发送电子邮件的脚本，但它也会给您一个响应，然后您可以在该响应上显示您发送的消息。