Как выводить определенное модальное окно?

Question

[RustyS]

Как выводить определенное модальное окно в зависимости от результата данных формы(ошибка/успех)? Есть ли для этого специальная функция js? Можете посоветовать какие-нибудь материалы?

Answer 1

[Иван]

Теория.
Получаете ответ от обработчика форм / бека - считываете ответ. Если успех -> вызываете функцию открытия формы с успехом, если ошибка -> форма с ошибкой (по id или data attr нужной формы).
А еще это форма то может быть одна, просто вы в форму можете вставлять свои сообщения.
Если форму пишите с нуля, то вам нужно сделать html разметку, css стили.
Функция вызова формы - можно просто добавлять нужные классы для открытия формы.

А если используете какой-то css фреймворк, допустим bootstrap, то там есть функции вызова формы и вообще сама форма готовая.

Далее простой пример

<!-- Модальное окно успешного результата -->
<div id="modal-success" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2>Успех!</h2>
    <p>Данные успешно отправлены.</p>
  </div>
</div>

<!-- Модальное окно с ошибкой -->
<div id="modal-error" class="modal">
  <div class="modal-content">
    <span class="close">&times;</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;
}

Comments

[RustyS]

Большое спасибо за столь развернутый и полноценный ответ. Буду пользоваться, как только получше разберусь и попробую