Посылаю форму через файл send.php, всё отлично, но страница всё равно обновляется, то есть открывается по ссылке файл http://mysite/send.php.
При успешной отправке данных должен выводиться попап, но он тоже не появляется
"use strict";
(function() {
// Скрипт для формы обратной связи
var FORM_HANDLER_URL = 'php/send.php';
var feedbackBlock = document.querySelector('.contact-us');
if (feedbackBlock) {
var feedbackForm = feedbackBlock.querySelector('.contact-us__form');
var XHR_RESPONSE_TO_STATUS = {
1: 'success',
2: 'error',
0: 'validation error',
}
// Обработка события Submit - срабатывает только при условии валидности основных полей
window.onSubmit = function(xhr) {
// Определяем ответ сервера
var xhrResponseText = xhr.responseText;
// Задаем функцию показа попапа
var showPopup = function(serverResponseText) {
// Находим в разметке всплывающее окно
var popup = feedbackBlock.querySelector('.contact-us__sent-wrapper');
var status = XHR_RESPONSE_TO_STATUS[serverResponseText];
if (status === 'success') {
popup.classList.add('contact-us__sent-wrapper--open');
}
}
// Задаем поведение в зависимости от ответа сервера
switch (xhrResponseText) {
case "1":
case "2":
showPopup(xhrResponseText);
break;
case "0":
showError(captchaBlock);
captchaBlock.addEventListener('input', function() {
removeError(captchaBlock);
});
}
};
// Глобальный метод при ошибке отправки
window.onErrorSubmit = function() {
alert('Ошибка соединения. Попробуйте еще раз');
};
// Обработчик события submit
var onFormSubmit = function(evt) {
// Отменяем отправку формы по умолчанию
// evt.preventDefault();
// Собираем данные с формы
var data = new FormData(feedbackForm);
// Создаем xhr запрос
var xhr = new XMLHttpRequest();
xhr.responseType = '';
// Валидация полей:
var fields = feedbackForm.querySelectorAll('input');
// Задаем валидность по умолчанию = true
var validity = true;
// Валидируем поля формы
fields.forEach(function(field) {
var fieldName = field.name;
if (!field.validity.valid) {
validity = false;
evt.preventDefault();
var fieldLabel = document.querySelector("[for=" + fieldName + "-field]");
showError(field, fieldLabel);
field.addEventListener('input', function() {
if (field.validity.valid) {
validity = true;
removeError(field);
}
});
}
});
if (validity) {
xhr.open('POST', FORM_HANDLER_URL);
xhr.send(data);
}
}
feedbackForm.addEventListener('submit', onFormSubmit);
};
})();
.contact-us__sent-wrapper {
display: none;
}
.contact-us__sent-wrapper--open {
display: block;
}
<section class="contact-us">
<h2 class="contact-us__title">Свяжитесь с нами</h2>
<p class="contact-us__description">Наши менеджеры перезвонят Вам в скором времени</p>
<div class="contact-us__wrapper">
<form class="contact-us__form" action="../php/send.php" method="POST">
<fieldset class="contact-us__fieldset">
<legend class="visually-hidden">Данные</legend>
<ul class="contact-us__list">
<li class="contact-us__item">
<input type="text" pattern="[A-Za-zА-Яа-яЁё]{2,20}" name="name" placeholder="Ваше имя*" required>
</li>
<li class="contact-us__item">
<input id="phone" minlength="7" maxlength="20" pattern="((\+7)|8)?[\-\s]?\(?[0-9]{3}\)?[\-\s]?[0-9]{3}[\-\s]?[0-9]{2}[\-\s]?[0-9]{2}" type="tel" name="tel" placeholder="Контактный телефон*" required>
</li>
<li class="contact-us__item">
<input type="email" name="email" placeholder="Email*" required>
</li>
<li class="contact-us__item">
<textarea id="comment-field" placeholder="Комментарий" cols="20" rows="3" name="message"></textarea>
</li>
</ul>
</fieldset>
</div>
<div class="submit__wrapper">
<p class="submit__text">Нажимая на кнопку «Отправить запрос»,<br>вы принимаете условия обработки
</p>
<a class="submit__link" href="">персональных данных</a>
<button class="submit__button" type="submit">
<span>Отправить запрос</span>
</button>
</div>
</form>
</div>
</section>
<section class="contact-us__sent-wrapper">
<h2 class="contact-us__title contact-us__sent">Заявка отправлена</h2>
<p class="contact-us__description">Мы получили вашу заявку, в ближайшее время наш менеджер свяжется с вами.</p>
<div class="contact-us__wrapper">
<form class="contact-us-sent__form" action="" method="">
<fieldset class="contact-us__fieldset">
<legend class="visually-hidden">Данные</legend>
<ul class="contact-us__list">
<li class="contact-us__item">
<input type="text" minlength="2" pattern="[- A-zА-я]+" name="name" placeholder="Ваше имя*" required>
<label class="vusually-hidden" for="name">Имя</label>
</li>
<li class="contact-us__item">
<input id="phone-field" type="tel" minlength="7" maxlength="20" pattern="((\+7)|8)?[\-\s]?\(?[0-9]{3}\)?[\-\s]?[0-9]{3}[\-\s]?[0-9]{2}[\-\s]?[0-9]{2}" name="tel" placeholder="Контактный телефон*" required>
<label class="vusually-hidden" for="tel">Телефон</label>
</li>
<li class="contact-us__item">
<input type="email" name="email" placeholder="Email*" required>
<label class="vusually-hidden" for="email">Почта</label>
</li>
<li class="contact-us__item">
<textarea placeholder="Комментарий" cols="20" rows="3" name="message"></textarea>
<label class="vusually-hidden" for="message">Комментарий</label>
</li>
</ul>
</fieldset>
</div>
<div class="submit__wrapper">
<p class="submit__text">Нажимая на кнопку «Отправить запрос»,<br>вы принимаете условия обработки
</p>
<a class="submit__link" href="">персональных данных</a>
<button class="submit__button" type="submit">
<span>Отправить запрос</span>
</button>
</div>
</form>
</div>
</section>
evt.preventDefault();
раскомментируйте