Как уведомить пользователя, что его электронное письмо было отправлено на той же странице, а не перенаправить страницу
Я новичок в 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>
Заранее спасибо!
Решение
Итак, после разговора в комментариях я создал это:
<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-скрипта.
Другие решения
Лучшим способом было бы создать скрипт на PHP, чтобы отправлять ваши электронные письма, как вы уже это делаете (возможно, вам придется изменить его). Вам нужно будет изменить свою форму, чтобы использовать Ajax. Это позволит вам отправить данные POST в сценарий, который отправит электронное письмо, но также даст ответ, и на этих ответах вы сможете отобразить отправленное сообщение.