0

У меня есть модальное окно с обратной связью, при его открытии кнопка (button) "Отправить" должна быть некликабельна (состояние disabled). Но как только в наше поле обратной связи (textarea) вводится больше 5 букв, кнопка становится активной. При нажатии на нее, откроется второе модальное окно с благодарностью.

Искала варианты и тут, и в общем доступе, не получается. Пришлю вариант, в котором у нас проверяется значение texarea и выводит alert если меньше 5 сиволов, но при открытии кнопка активна.

const openModal = document.querySelector("#modal_btn_feedback"); // кнопка открытия
const closeModal = document.querySelector("#close_btn_feed"); // кнопка закрытия
const modal = document.querySelector("#modal_feedback_thanks"); // модальное окно
const inputText = document.querySelector(".modal_textarea");

openModal.addEventListener("click", openWin);

function openWin() {
  if (inputText.value.length >= 5) {
    openModal.disabled = "false"
    modal.style.display = "flex";
    modalO.style.display = "none";
  } else {
    alert("Напиши побольше");
  }
}

closeModal.addEventListener("click", closeWin);

function closeWin() {
  modal.style.display = "none";
}
<section class="modal" id="modal_feedback">
  <div class="modal_wrapper">
    <form onsubmit="return false">
      <div class="modal_wrap_feedback">
        <h2 class="modal_title">Обратная связь</h2>
        <textarea class="modal_textarea" cols="85" rows="11" placeholder="Минимум 5 символов" data-countchar-limit="400"></textarea>
        <div class="modal_exit">
          <div class="modal_text">*Напиши пару слов о том, почему решил уйти из отряда.</div>
          <button id="modal_btn_feedback" type="submit" class="modal_btn">Отправить</button>
        </div>
      </div>
      <div class="close_wrap">
        <button type="button" id="close_btn_feedback" class="close_btn">
                            <img src="img/cross.png" alt="cross_close" class="close_img">
                        </button>
      </div>
    </form>
  </div>
</section>

1 ответ 1

0

Можно сделать так. Сначала делаем кнопку неактивной ведь текста нет. Потом при изменении (и вставке из буфера) мы делаем проверку и решаем что будет с состоянием кнопки.

const modal = document.querySelector("#modal_feedback_thanks"); // модальное окно
const openModal = document.querySelector("#modal_btn_feedback"); // кнопка открытия
const closeModal = document.querySelector("#close_btn_feedback"); // кнопка закрытия
const inputText = document.querySelector(".modal_textarea");

openModal.addEventListener("click", sendFeedback);
closeModal.addEventListener("click", closeWin);
inputText.addEventListener("input", openWin)   // при отпускании клавиши

function openWin() {
   openModal.disabled = inputText.value.length < 5
}

function sendFeedback() {
    openModal.disabled = "false"
    modal.style.display = "flex";
    modalO.style.display = "none";
}

function closeWin() {
  modal.style.display = "none";
}
<section class="modal" id="modal_feedback">
  <div class="modal_wrapper">
    <form onsubmit="return false">
      <div class="modal_wrap_feedback">
        <h2 class="modal_title">Обратная связь</h2>
        <textarea class="modal_textarea" cols="85" rows="2" placeholder="Минимум 5 символов" data-countchar-limit="400"></textarea>
        <div class="modal_exit">
          <div class="modal_text">*Напиши пару слов о том, почему решил уйти из отряда.</div>
          <button id="modal_btn_feedback" type="submit" class="modal_btn" disabled>Отправить</button>
        </div>
      </div>
      <div class="close_wrap">
        <button type="button" id="close_btn_feedback" class="close_btn">
           <img src="img/cross.png" alt="cross_close" class="close_img">
        </button>
      </div>
    </form>
  </div>
</section>

7
  • 1
    Почему бы не следить за событием input? 26 мар 2023 в 11:34
  • @OliverPatterson да, с ним проще) 26 мар 2023 в 11:50
  • Вариант рабочий, но появилась другая проблема: При закомментрированном - modal.style.display = "flex"; и modalO.style.display = "none"; мы не можем нажать на кнопку отправить, а если я раскоментриую данные свойства то, как только мы ввели 5 букв, у нас сразу открывается второе модальное окно, не давая пользователю ввести больше 5 букв, и после этого не работает кнопка закрытия модального окна
    – Дарья
    26 мар 2023 в 12:05
  • Я ведь правильно понял это должно происходить по нажатии на кнопку отправить? Нужна еще одна функция сейчас поправлю код 26 мар 2023 в 12:10
  • @Екатерина поправил, заодно чуть-чуть оптимизировал код. 26 мар 2023 в 12:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.