В режиме симуляции запроса все работает...
<style>
.form-awaiting {
background-image: url(http://javascript.ru/cat/list/project.jpg);
}
.form-success {
background-image: url(http://javascript.ru/cat/list/donkey.gif);
}
.form-failure {
background-image: url(http://javascript.ru/cat/list/js.gif);
}
</style>
<div class="main-form">
<input type="text">
</div>
<script>
let form = document.querySelector('.main-form'),
request = form.querySelector('input'),
statusMessage = document.createElement('div'),
i = 0;
statusMessage.style="width:50px;height:50px;";
form.appendChild(statusMessage);
request.onchange = function() {
var classList = statusMessage.classList;
while (classList.length > 0) {
classList.remove(classList.item(0));
}
if (request.value == "1") {
//Добавляем картинку при ожидании отправки формы
statusMessage.classList.add('form-awaiting');
} else if (request.value == "2") {
//Добавляем картинку при удачной отправке формы
statusMessage.classList.add('form-success');
}
else {
//Добавляем картинку при неудачной отправке формы
statusMessage.classList.add('form-failure');
}
};
function send(){
setTimeout(function(){
i = Math.round(Math.random() * 2) + 1;
request.value = i;
var event = new Event('change');
request.dispatchEvent(event);
send();
},2000)
}
send();
</script>
Непринципиальный момент, но у вас лишнее условие
if (request.status == 200
&& request.status < 300)
Уж если равно 200, то что еще нужно?