Почему не работает код после отправки формы? Что нужно исправить?

Question

[Yulia Khavaeva]

Нужно чтобы после отправки формы появлялся этот блок, изначально у него display: none;

spoiler

Вот код:

JavaScript

async function formSend(e) {
    e.preventDefault();
    
    let error = formValidate(form);

    let formData = new FormData(form);

    if(error === 0){
      let response = await fetch('sendemail.php',{
        method: 'POST',
        body: formData
      });
      if (response.ok) {
        let result = await response.json();
        alert(result.message);

        document.querySelectorAll('#btn').forEach(item => { 
          item.addEventListener('onsubmit', () => { 
              document.getElementsByClassName('training__thanks').style.display = 'flex'; 
          }); 
        });

        form.reset();
      } else {
        alert('Ошибка');
      }
    } else {
      alert('Заполните обязательные поля');
    }
  }

PHP

<?php
	use PHPMailer\PHPMailer\PHPMailer;
	use PHPMailer\PHPMailer\Exception;
	require "./PHPMailer/src/PHPMailer.php";
	require "./PHPMailer/src/Exception.php";
	require "./PHPMailer/src/SMTP.php";

	$mail = new PHPMailer(true);
	$mail->isSMTP(); 
	$mail->Host = 'smtp.gmail.com';  
	$mail->SMTPAuth = true;  
	$mail->Username  = '[e-mail]'; 
	$mail->Password  = 'secret'; 
	$mail->SMTPSecure = "tls";  
	$mail->Port = 587;
	$mail->CharSet = "UTF-8";
	$mail->IsHTML(true);

	$mail->setFrom('[e-mail], 'САИКТ');
	$mail->addAddress("[e-mail]", "САИКТ");
	
	$theme = '[ЗАЯВКА НА ТРЕНИНГ]';
	$mail->Subject = $theme;

	$body = '<h1>Данные заявки</h1>';

	$name = $_POST["name"];
	$tel = $_POST["tel"];
	$email = $_POST["email"];

	if(trim(!empty($name))){
		$body.='<p><strong>Имя:</strong> '.$name.'</p>';
	}
	if(trim(!empty($tel))){
		$body.='<p><strong>Телефон:</strong> '.$tel.'</p>';
	}
	if(trim(!empty($email))){
		$body.='<p><strong>От:</strong> '.$email.'</p>';
	}
	$mail->Body = $body;
	
	if(!$mail->send()) {
		$message = 'Ошибка!';
	} else {
		$message = 'Данные отправлены!';
	}

	$response = ['message' => $message];

	header('Content-type: application/json');
	echo json_encode($response);

	$mail->smtpClose();
?>

Подскажите как исправить

Comments

[black1277]

ну как минимум у вас не закрыта кавычка тут (после почты)
$mail->setFrom('[e-mail], 'САИКТ');

[Yulia Khavaeva]

black1277, не в этом дело, я выделила текст, который не работает

async function formSend(e) {
    e.preventDefault();
    
    let error = formValidate(form);

    let formData = new FormData(form);

    if(error === 0){
      let response = await fetch('sendemail.php',{
        method: 'POST',
        body: formData
      });
      if (response.ok) {
        let result = await response.json();
        alert(result.message);

/* ========================================================================== */
        document.querySelectorAll('#btn').forEach(item => { 
          item.addEventListener('onsubmit', () => { 
              document.getElementsByClassName('training__thanks').style.display = 'flex'; 
          }); 
        });
/* ========================================================================== */

        form.reset();
      } else {
        alert('Ошибка');
      }
    } else {
      alert('Заполните обязательные поля');
    }
  }

[Elvis]

Yulia Khavaeva, getElementsByClassName возвращает список объектов, а не один объект.

Answer 1

[DoNiFF]

Попробуй вместо этого

document.getElementsByClassName('training__thanks').style.display = 'flex';

написать это

document.querySelector('training__thanks').style.display = 'flex';

Comments

[Yulia Khavaeva]

Не помогло(

[Alexey Levicky]

Функция formSend как вызывается?

[Yulia Khavaeva]

Aleksey Levickyj, она работает, отметила какая часть не срабатывает, возможно это нужно как-то по-другому написать

document.addEventListener('DOMContentLoaded', function() {
  const form = document.querySelector(".js-form");  
  form.addEventListener('submit', formSend);

  async function formSend(e) {
    e.preventDefault();
    
    let error = formValidate(form);

    let formData = new FormData(form);

    if(error === 0){
      let response = await fetch('sendemail.php',{
        method: 'POST',
        body: formData
      });
      if (response.ok) {
        let result = await response.json();
        alert(result.message);

/*================ Не работает ================*/
        document.querySelectorAll('#btn').forEach(item => { 
          item.addEventListener('onsubmit', () => { 
              document.getElementByClassName('training__thanks').style.display = 'flex'; 
          }); 
        });
/*================ Не работает ================*/

        form.reset();
      } else {
        alert('Ошибка');
      }
    } else {
      alert('Заполните обязательные поля');
    }
  }

  function formValidate(form){
    let error = 0;
    let formReq = document.querySelectorAll('.req');

    for (let index = 0; index < formReq.length; index++){
      const input = formReq[index];
      formRemoveError(input);

      if(input.classList.contains('email')){
        if (emailTest(input)){
          formAddError(input);
          error ++;
        }
      } else if(input.classList.contains('phone')) {
        if (phoneTest(input)){
          formAddError(input);
          error ++;
        }
      } else if(input.getAttribute("type") === "checkbox" && input.checked === false) {
        formAddError(input);
        error++;
      } else {
        if (input.value === '') {
          formAddError(input);
          error ++;
        }
      }
    }
    return error;
  }

  function formAddError(input) {
    input.parentElement.classList.add('error');
    input.classList.add('error');
  }

  function formRemoveError(input) {
    input.parentElement.classList.remove('error');
    input.classList.remove('error');
  }
  // --------------------- Validate -------------------- //
  function emailTest(input) {
    return !/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(input.value);
  }
  
  function phoneTest(input) {
    return !/^(\+7|7|8)?[\s\-]?\(?[489][0-9]{2}\)?[\s\-]?[0-9]{3}[\s\-]?[0-9]{2}[\s\-]?[0-9]{2}$/.test(input.value);
  }
});

[Alexey Levicky]

Вы пытаетесь вызвать onSubmit внутри onSubmit. Если респонс ок, то хендлер на кнопку - нужно нажать на кнопку сабмит если респонс ок, и это не ок))

if (response.ok) {
        document.getElementByClassName('training__thanks').style.display = 'flex'; 

        form.reset();
      }

[Yulia Khavaeva]

Aleksey Levickyj, ооо спасибо большое, наконец-то сработало и поняла что не так!