Скрипт отправки формы на сервер через Ajax должен выводить три картинки в зависимости от ситуации: ожидание ответа сервера, успешная отправка, сбой. Однако и на локальном сервере и на хостинге при отправке формы он выдает все время только одну картинку, первую (ожидание ответа). При этом, если картинки заменить текстовыми сообщениями, то все работает нормально и после отправки формы появляется сообщение об успешной операции.
let message = new Object();
let form = document.getElementsByClassName('main-form')[0],
input = form.getElementsByTagName('input'),
statusMessage = document.createElement('div');
form.addEventListener('submit', function(event) {
event.preventDefault();
form.appendChild(statusMessage);
// AJAX
let request = new XMLHttpRequest();
request.open("POST", 'server.php')
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
let formData = new FormData(form);
request.send(formData);
request.onreadystatechange = function() {
if (request.readyState < 4) {
//Добавляем картинку при ожидании отправки формы
statusMessage.classList.add('form-awaiting');
} else if (request.readyState === 4) {
if (request.status == 200 && request.status < 300) {
//Добавляем картинку при удачной отправке формы
statusMessage.classList.add('form-success');
}
else {
//Добавляем картинку при неудачной отправке формы
statusMessage.classList.add('form-failure');
}
}
};
//Очистка инпутов
for (let i = 0; i < input.length; i++) {
input[i].value = '';
}
});
//Оправка данных с формы в разделе "Контакты"
let contactForm = document.getElementById('form'),
contactFormInput = contactForm.getElementsByTagName('input');
contactForm.addEventListener('submit', function(event) {
event.preventDefault();
contactForm.appendChild(statusMessage);
// AJAX
let request = new XMLHttpRequest();
request.open("POST", 'server.php')
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
let contactFormData = new FormData(contactForm);
request.send(contactForm);
request.onreadystatechange = function() {
if (request.readyState < 4) {
//Добавляем картинку при ожидании отправки формы
statusMessage.classList.add('form-awaiting__contact-form');
} else if (request.readyState === 4) {
if (request.status == 200 && request.status < 300) {
//Добавляем картинку при удачной отправке формы
statusMessage.classList.add('form-success__contact-form');
}
else {
//Добавляем картинку при неудачной отправке формы
statusMessage.classList.add('form-failure__contact-form');
}
}
};
//Очистка инпутов
for (let i = 0; i < contactFormInput.length; i++) {
contactFormInput[i].value = '';
}
});