@olyabolya

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

Здравствуйте. Имеется следующая форма:
<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="+7 (800) 000-00-00" 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('+7 (999) 999-99-99');
});
  
$(".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 = 'xxx@yandex.ru'; // Ваш логин от почты с которой будут отправляться письма
$mail->Password = 'yyy'; // Ваш пароль от почты с которой будут отправляться письма
$mail->SMTPSecure = 'ssl';                            // Enable TLS encryption, `ssl` also accepted
$mail->Port = 465; // TCP port to connect to / этот порт может отличаться у других провайдеров

$mail->setFrom('xxx@yandex.ru'); // от кого будет уходить письмо?
$mail->addAddress('zzz@mail.ru');     // Кому будет уходить письмо 
//$mail->addAddress('ellen@example.com');               // Name is optional
//$mail->addReplyTo('info@example.com', 'Information');
//$mail->addCC('cc@example.com');
//$mail->addBCC('bcc@example.com');
//$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 'Ошибка: ';
}
?>

Если ввести номер, то страница перезагружается, на страницу Спасибо не переходит, письмо не уходит. В чём может быть проблема? В консоли ничего не показывает
5d59759627f4c433826043.png
  • Вопрос задан
  • 1469 просмотров
Решения вопроса 1
slo_nik
@slo_nik Куратор тега PHP
Вечер добрый.
Вы сделали опечатку в имени класса, поэтому и не сработала 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('+7 (999) 999-99-99');
	});

  $(".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, сделать имя латиницей.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
ThunderCat
@ThunderCat Куратор тега PHP
{PHP, MySql, HTML, JS, CSS} developer
Если ввести номер, то страница перезагружается,
$(".tel_form").submit(function(e) {
e.preventDefault();
....
В инструментах разработчика в нетворк смотрите что у вас запрашивается и с какими параметрами уходят запросы, ну и что они возвращают. Консоль что пишет из ошибок?
Ответ написан
Ваш ответ на вопрос

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

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