@Bro010101

Jquery — в чем проблема с формой обратной связи?

Здравствуйте!
Есть форма обратной связи на сайте:
<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 для того, что бы добавлялся к форме дополнительный класс с указанием информации об успешной отправки данных из этой формы?
  • Вопрос задан
  • 99 просмотров
Пригласить эксперта
Ответы на вопрос 1
ThunderCat
@ThunderCat Куратор тега PHP
{PHP, MySql, HTML, JS, CSS} developer
но почему-то после отправки данных из формы, страница формы перезагружается с прикрепленными в url данными из формы формируя пустую страницу и больше ничего не происходит.

по тому что:
$(document).ready(function () {
  $('[submit]').on('click', function (e) { //на кнопку вешается обработчик(плохо, нужно на субмит формы)
    e.preventDefault(); // останавливаем субмит с кнопки
    $(this).parent('form').submit(); // находим собсно форму и субмитим ее (непонятно зачем тогда было останавливать субмит), данные уходят на сервер методом гет
  }) // все что дальше тупо не выполняется, так что можно забить
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы