Теория.
Получаете ответ от обработчика форм / бека - считываете ответ. Если успех -> вызываете функцию открытия формы с успехом, если ошибка -> форма с ошибкой (по id или data attr нужной формы).
А еще это форма то может быть одна, просто вы в форму можете вставлять свои сообщения.
Если форму пишите с нуля, то вам нужно сделать html разметку, css стили.
Функция вызова формы - можно просто добавлять нужные классы для открытия формы.
А если используете какой-то css фреймворк, допустим bootstrap, то там есть функции вызова формы и вообще сама форма готовая.
Далее простой пример
<!-- Модальное окно успешного результата -->
<div id="modal-success" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h2>Успех!</h2>
<p>Данные успешно отправлены.</p>
</div>
</div>
<!-- Модальное окно с ошибкой -->
<div id="modal-error" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h2>Ошибка!</h2>
<p>Произошла ошибка при отправке данных.</p>
</div>
</div>
// При успешной отправке данных
const showSuccessModal = () => {
document.getElementById("modal-success").style.display = "block";
};
// При ошибке отправки данных
const showErrorModal = () => {
document.getElementById("modal-error").style.display = "block";
};
// Закрытие модального окна при клике на крестик
const closeButtons = document.getElementsByClassName("close");
for (let i = 0; i < closeButtons.length; i++) {
closeButtons[i].addEventListener("click", function() {
const modal = this.parentElement.parentElement;
modal.style.display = "none";
});
}
//пример обработки ответа с формы
const form = document.querySelector('form');
form.addEventListener('submit', async (event) => {
event.preventDefault();
const formData = new FormData(form);
const response = await fetch('/api/submit-form', {
method: 'POST',
body: formData
});
if (response.ok) {
const result = await response.json();
// обработка успешного ответа
console.log(result);
} else {
const error = await response.text();
// обработка ошибки
console.error(error);
}
});
// а это пример с promise .then
const form = document.getElementById("myForm");
form.addEventListener("submit", function(event) {
event.preventDefault(); // Предотвращаем отправку формы по умолчанию
// Получаем данные из формы
const formData = new FormData(form);
// Отправляем данные на сервер с помощью Fetch API
fetch("URL_СЕРВЕРА", {
method: "POST",
body: formData
})
.then(function(response) {
if (response.ok) {
showSuccessModal(); // Показываем модальное окно успешного результата
} else {
showErrorModal(); // Показываем модальное окно с ошибкой
}
})
.catch(function(error) {
console.error("Ошибка:", error);
showErrorModal(); // Показываем модальное окно с ошибкой
});
});
.modal {
display: none; /* Скрываем модальное окно по умолчанию */
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
