Здравствуйте!
Есть форма обратной связи на сайте:
<div class="form">
<form action="sendmail.php" id="form__adverti" class="form__body">
<h1 class="form__title">
Отправка данных на почту
</h1>
<div class="form__item">
<label for="formName" class="form__label">Имя*</label>
<input id="formName" type="text" name="name" class="form__input _req" placeholder="Ваше имя" required>
</div>
<div class="form__item">
<label for="formEmail" class="form__label">E-mail*</label>
<input id="formEmail" type="text" name="email" class="form__input _req _email" placeholder="E-mail" required>
</div>
<div class="form__item">
<label for="formTel" class="form__label">Телефон*</label>
<input id="formTel" type="text" name="tel" class="form__input _tel" placeholder="+7(000) 000-00-00" required>
</div>
<div class="form__item">
<label for="formMessage" class="form__label">Сообщение</label>
<textarea name="message" id="formMessage" class="form__input"></textarea>
</div>
<div class="form__item">
<div class="checkbox">
<input id="formAgreement" checked type="checkbox" name="agreement" class="checkbox__input _req">
<label for="formAgreement" class="checkbox__label"><span>Я даю согласие на обработку своих персональных данных в соответствии с <a href="#">Условием</a>*</span></label>
</div>
</div>
<button type="submit" class="form__button" data-submit>Отправить</button>
<!-- Сообщение "спасибо" после отправки формы -->
<div id="message-for-user">
<div id="thx" >
<p class="answer">Спасибо! Ваше сообщение отправлено.</p>
</div>
</div>
</form>
</div>
В целом форма работает и на почту даже приходят сообщения, но почему-то после отправки данных из формы, страница формы перезагружается с прикрепленными в url данными из формы формируя пустую страницу и больше ничего не происходит.
$(document).ready(function () {
$('[submit]').on('click', function (e) {
e.preventDefault();
$(this).parent('form').submit();
})
$.validator.addMethod("regex", function (value, element, regexp) {
var regExsp = new RegExp(regexp);
return this.optional(element) || regExsp.test(value);
}, "Please check your imput.");
// Функция валидации и вывода сообщений
function valEl(el) {
el.validate({
rules: {
tel: {
required : true,
required : true,
minlength: 10,
maxlength: 17,
regex: '[0-9]+-'
},
name: {
required : true,
regex : "[А-Яа-я]{3,32}"
},
email: {
required : true,
email : true
}
},
messages: {
name : {
required : "Это поле обязательно к заполнению",
// error: "Введите ваше имя правильно",
regex : "Введите ваше имя А-я",
},
email : {
required : "это поле обязательно к заполнению",
// error: "Введите верный Email",
regex : "Введите верный Email",
},
tel : {
required : "Введите ваш номер ",
// error: "Введите корректный телефон ",
regex : "Введите корректный телефон +7(000) 000-00-00",
},
},
// Начинаем проверку id="" формы
submitHandler: function (form) {
$('.form__body').fadeIn();
var$form = $(form);
var$formId = $(form).attr('id');
switch ($formId) {
case 'form__adverti':
$.ajax({
type: 'POST',
url: $form.attr('action'),
data: $form.serialize()
})
.done(function() {
console.log('Success')
})
.fail(function() {
console.log('Fail')
})
.always(function() {
console.log('Always');
setTimeout(function() {
$('#message-for-user').fadeIn;
$form.trigger('reset');
//строка для отслеживания целей в Яндекс метрике.
}, 1100);
$('message-for-user').on('click', function(e) {
$(this).fadeOut();
});
});
break;
}
return false;
}
});
}
$('form__adverti').each(function () {
valEl($(this));
});
});
и PHP файл отправляет на почту письмо только с заголовком h1, без вложения данных из формы
<?php
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;
require 'phpmailer/src/Exception.php';
require 'phpmailer/src/PHPMailer.php';
$mail = new PHPMailer(true);
$mail->CharSet = 'UTF-8';
$mail->setLanguage('ru', 'phpmailer/language/');
$mail->IsHTML(true);
// От кого письмо
$mail->setFrom('test1@mail.ru', 'рекламный сайт');
// Кому отправить
$mail->addAddress('test2@mail.ru');
// Тема письма
$mail->Subject = "Заявка с сайта";
// Тело письма
$body = '<h1>Встречай письмо!</h1>';
if(trim(!empty($_POST['name']))){
$body.='<p><strong>Имя:</strong> '.$_POST['name'].'</p>';
}
if(trim(!empty($_POST['email']))){
$body.='<p><strong>E-mail:</strong> '.$_POST['email'].'</p>';
}
if(trim(!empty($_POST['tel']))){
$body.='<p><strong>Телефон:</strong> '.$_POST['tel'].'</p>';
}
if(trim(!empty($_POST['message']))){
$body.='<p><strong>Сообщение:</strong> '.$_POST['message'].'</p>';
}
$mail->Body = $body;
// Отправляем
if (!$mail->send()) {
$message = 'Ошибка';
} else {
$message = 'Данные отправлены!';
}
?>
Буду очень признателен за подсказку где и что я нахимичил или не дописал в jquery или PHP раз письмо от формы приходит без указанных в форму данных, а сама страница формы перегружается на пустую с прекреплеными к URL данными из этой формы?
И сразу еще вопрос, т.к. происходит перезагрузка страницы я не могу проверить, хотелось бы понимать, правильно я указал действия в jquery для того, что бы добавлялся к форме дополнительный класс с указанием информации об успешной отправки данных из этой формы?