Здравствуйте!
Возможно вопрос детский, но я только, только начинаю разбираться с такой интересной темой )
Цель, настроить отправку формы без перезагрузки страницы.
Есть файл js с настройкой валидации форм и отправка полученных данных с помощью ajax технологии
"use strict"
document.addEventListener ('DOMContentLoaded', function () {
const form = document.getElementById('form');
form.addEventListener('submit', formSend);
async function formSend(e) {
e.preventDefault();
let error = formValidate(form);
let formData = new FormData(form);
formData.append('image', formImage.files[0]);
if (error === 0) {
form.classList.add('_sending');
let response = await fetch('sendmail.php', {
method: 'POST',
body: formData
});
if (response.ok) {
let result = await response.json();
alert(result.message);
formPreview.innerHTML = '';
form.reset();
form.classList.remove('_sending');
} else {
alert("Ошибка");
form.classList.remove('_sending');
}
} 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.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');
}
// Функция текста email - валидация
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);
}
// Получение инпут file в переменную далее для вложенного файла
const formImage = document.getElementById('formImage');
// Получение div для превью в переменную
const formPreview = document.getElementById('formPreview');
// Слушаем изменения в инпуте file
formImage.addEventListener('change', () => {
uploadFile(formImage.files[0]);
});
function uploadFile(file) {
// проверка типа файла
if (!['image/jpeg', 'image/png', 'image/gif'].includes(file.type)) {
alert('Разрешены только изображенияю');
formImage.value = '';
return;
}
// проверка размера файла (<2 мб)
if (file.size > 2 * 1024 * 1024) {
alert('Файл должен быть менее 2 МБ.');
return;
}
var reader = new FileReader();
reader.onload = function (e) {
formPreview.innerHTML = `<img srs="${e.target.result}" alt="Фото">`;
};
reader.onerror = function (e) {
alert('Ошибка');
};
reader.readAsDataURL(file);
}
});
Валидация отрабатывается но с отправкой формы засада.
Ни как не пойму, данные вообще отправляются? Если да, то почему после отправки ничего не происходит, т.е. вообще ничего, нет ни писем на почте и сообщения об ошибке при отправке сообщения?
<?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('alkamo@inbox.ru', 'Вижу цель');
// Кому отправить
$mail->addAddress('alkamo@inbox.ru');
// Тема письма
$mail->Subject = "Заявка с сайта";
// Рука :)
$hand = "Правая";
if($_POST['hand'] == 'left'){
$hand = "Левая";
}
// Тело письма
$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['hand']))){
$body.='<p><strong>Рука:</strong> '.$hand.'</p>';
}
if(trim(!empty($_POST['aga']))){
$body.='<p><strong>Возраст:</strong> '.$_POST['age'].'</p>';
}
if(trim(!empty($_POST['message']))){
$body.='<p><strong>Сообщение:</strong> '.$_POST['message'].'</p>';
}
// Прикрепить файл
if (!empty($_FILES['image']['tmp_name'])) {
// путь загрузки файла
$filePath = __DIR__ . "/files/" . $_FILES['image']['name'];
// грузим файл
if(copy($_FILES['image']['tmp_name'], $filePath)){
$fileAttach = $filePath;
$body.='<p><strong>Фото в приложении</strong>';
$mail->addAttachment($fileAttach);
}
}
$mail->Body = $body;
// Отправляем
if (!$mail->send()) {
$message = 'Ошибка';
} else {
$message = 'Данные отправлены!';
}
$response = ['message' => $message];
header('Content-type: application/json');
echo json_encode($response);
?>
