Почему при отправке формы страница перезагружается, а письмо не отправляется?

Question

[Ольга]

Здравствуйте. Имеется следующая форма:

<form id="tel-form" class="tel-form" name="tel-form" method="POST" novalidate enctype="multipart/form-data">
		<label>Телефон:</label>
		<input id="form-tel" type="text" name="form-tel" class="text-input phonemasked" placeholder="[phone]" required />
		<input type="submit" name="submit" id="submit" style="background-image: url(/images/send-button.png); background-repeat: no-repeat;" alt="Отправить" value=""/>
	</form>

JS:

$(document).ready(function() {

// Добавляем маску для поля с номера телефона
$('.phonemasked').each(function(){
  $(this).mask('[phone]');
});
  
$(".tel_form").submit(function() {
  if ( !this.checkValidity() )
    alert('Пожалуйста, заполните обязательные поля.');
  else {
    $.ajax({
      type: "POST",
      url: "/form/tel_mail.php",
      data: $( this ).serialize(),
            success: function (data) {
                window.location.href = "../спасибо-за-заказ.htm";
            },
});
      // очищаем поля
      $('#form-tel').val('');
    
  };
  return false;
  });
});

Обработчик:

<?php
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

require_once('Exception.php');
require_once('PHPMailer.php');
require_once('SMTP.php');
$mail = new PHPMailer();
$mail->CharSet = 'utf-8';

$phone = $_POST["form-tel"];

$mail->SMTPDebug = 0;                               // Enable verbose debug output

$mail->isSMTP();                                      // Set mailer to use SMTP
$mail->Host = 'smtp.yandex.ru';                         // Specify main and backup SMTP servers
$mail->SMTPAuth = true;                               // Enable SMTP authentication
$mail->Username = '[e-mail]'; // Ваш логин от почты с которой будут отправляться письма
$mail->Password = 'yyy'; // Ваш пароль от почты с которой будут отправляться письма
$mail->SMTPSecure = 'ssl';                            // Enable TLS encryption, `ssl` also accepted
$mail->Port = 465; // TCP port to connect to / этот порт может отличаться у других провайдеров

$mail->setFrom('[e-mail]'); // от кого будет уходить письмо?
$mail->addAddress('[e-mail]');     // Кому будет уходить письмо 
//$mail->addAddress('[e-mail]');               // Name is optional
//$mail->addReplyTo('[e-mail]', 'Information');
//$mail->addCC('[e-mail]');
//$mail->addBCC('[e-mail]');
//$mail->addAttachment('/var/tmp/file.tar.gz');         // Add attachments
//$mail->addAttachment('/tmp/image.jpg', 'new.jpg');    // Optional name


$mail->isHTML(true);                                  // Set email format to HTML

$mail->Subject = 'Заявка на консультацию со страницы ' . $_POST['page'];
$mail->Body    = 'Телефон: ' .$phone; 
$mail->AltBody = '';

if(!$mail->send()) {
  echo 'Письмо не может быть отправлено. ';
  echo 'Ошибка: ';
}
?>

Если ввести номер, то страница перезагружается, на страницу Спасибо не переходит, письмо не уходит. В чём может быть проблема? В консоли ничего не показывает

Comments

[Daria Motorina]

1. Сделайте пошаговый дебаг на стороне js - что телефон передается в ajax обработчик, что он сериализуется
2. Добавьте в ajax обработчик обработку error, а не только success
3. Если на стороне js уже точно все ок, то продебажить отправку письма (какие ошибки на каждом шаге)

[Ольга]

Daria Motorina, можете подсказать как пошаговый дебаг сделать? буду очень благодарна)

[Daria Motorina]

Ольга, если грамотно и красиво, то так
Если самый простой способ, то через console.log(...)

$(".tel_form").submit(function() {
 console.log(this);
 ....
  if ( !this.checkValidity() )
    alert('Пожалуйста, заполните обязательные поля.');
  else {
    $.ajax({
      type: "POST",
      url: "/form/tel_mail.php",
      data: $( this ).serialize(),
            success: function (data) {
                console.log(data);
                window.location.href = "../спасибо-за-заказ.htm";
            },
});
      // очищаем поля
      $('#form-tel').val('');
    
  };
  return false;
  });

В пхп файле - var_dump($somevariable); die();
Чтобы быстро проверить значение какой-то переменной на шаге и вырубить код после нее. Грамотно это делается через xdebug, но его надо настраивать

[ThunderCat]

Ольга, console.log(var), dev tools + watchers + breakpoints, но проще всего конечно просто выводить в консоль какую-то отладочную инфу по ходу выполнения скрипта.

Answer 1

[Дмитрий]

Вечер добрый.
Вы сделали опечатку в имени класса, поэтому и не сработала e.prevertDafault.
У формы класс tel-form, а в js скрипте Вы пытаетесь обработать форму с классом tel_form.
Ещё Вы не заключили блок if в фигурные скобки, а else в фигурных.

if ( !this.checkValidity() ){
    alert('Пожалуйста, заполните обязательные поля.');
 }
  else {

  }

Уберите атрибут novalidate у формы, enctype="multipart/form-data" используйте тогда, когда собираетесь отправлять файлы.
После получения ответа от сервера Вашу страницу перезагрузит всё равно и направит на новый адрес

success: function (data) {
                window.location.href = "../спасибо-за-заказ.htm";
},

Думаю, что этот блок лишний, ведь у Вас для поля формы есть атрибут required и окончательно данные надо проверять на стороне сервера, в Вашем случае в файле tel_mail.php.

if ( !this.checkValidity() ){
    alert('Пожалуйста, заполните обязательные поля.');
}

В общем Ваш код js может быть таким

$(document).ready(function() {

	// Добавляем маску для поля с номера телефона
	$('.phonemasked').each(function(){
	  $(this).mask('[phone]');
	});

  $(".tel-form").on('submit', function(e) {
	  e.preventDefault();
	    $.ajax({
	      type: "POST",
	      url: "/form/tel_mail.php",
	      data: $( this ).serialize(),
	      success: function (data) {
	        window.location.href = "../спасибо-за-заказ.htm";
	      },
	    });
	      // очищаем поля
	    $('#form-tel').val('');
  });
});

И не мешало бы переименовать файл спасибо-за-заказ.htm, сделать имя латиницей.

Comments

[Ольга]

Большое спасибо! Теперь всё отправляется как надо!

[Дмитрий]

Ольга, пожалуйста.

Answer 2

[ThunderCat]

Если ввести номер, то страница перезагружается,

$(".tel_form").submit(function(e) {
e.preventDefault();
....

В инструментах разработчика в нетворк смотрите что у вас запрашивается и с какими параметрами уходят запросы, ну и что они возвращают. Консоль что пишет из ошибок?

Comments

[Ольга]

консоль ошибок не пишет. функция е не сработала, ничего не изменилось. в network js нашла, а вот параметры не знаю где смотреть... не особо в этом сильна, только учусь