Показать сообщение отдельно
  #1 (permalink)  
Старый 26.08.2018, 16:55
DVV DVV вне форума
Кандидат Javascript-наук
Отправить личное сообщение для DVV Посмотреть профиль Найти все сообщения от DVV
 
Регистрация: 26.12.2017
Сообщений: 125

Ошибка работы скрипта
Скрипт отправки формы на сервер через 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 = '';
		}
	});
Ответить с цитированием