Это делается в один абзац кода на чистом JavaScript:
<script>
// Обрабочик для отслеживания готовности страницы:
document.addEventListener('DOMContentLoaded', function() {
// Ставим на форму обработчик срабатывающий при отправке формы:
document.querySelector('form').addEventListener('submit', async function() {
var this_form = this; // Получаем ссылку на форму
event.preventDefault(); // Отменяем обычную отправку
// Блокируем нажатия по форме:
this_form.style.opacity = '0.5';
this_form.style.pointerEvents = 'none';
// Блок кода для отправки формы:
try {
// Отправляем форму без перезагрузки страницы и выводим ответ сервера на месте формы, как обычный текст:
this_form.outerHTML = await (await fetch(this_form.action, { method: 'POST', body: new FormData(this_form) })).text();
}
// Блок кода для обработки ошибок:
catch(err) {
// Вывод ошибки, если вдруг отправка неудачная:
console.error(err); this_form.outerHTML = err.toString();
// Разблокируем форму:
this_form.style.opacity = '';
this_form.style.pointerEvents = '';
}
});
});
</script>
