Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.09.2024, 13:07
Интересующийся
Отправить личное сообщение для NastyaVs Посмотреть профиль Найти все сообщения от NastyaVs
 
Регистрация: 28.01.2024
Сообщений: 26

Проблема с кнопкой при переходе из неактивное в активное состояние
Приветствую. При реализации кода на Java Script возникла проблема с кнопкой в форме, которая не корректно переходит из неактивного в активное состояние и наоборот при заполнении/корректировки обязательных полей, а именно поля Select an accasion (optional).
Блок с формой имеет следующую структуру в HTML

<div class="reservation-block__order-form-wrap">
  <h2 class="reservation-block__caption-order-fr">Data order</h2>
  <form id="formReservation" class="reservation-block__data-order data-order" action="#" method="GET" enctype="multipart/form-data">

    <div class="data-order__inputs-box">
      <div class="data-order__box-input">
        <input id="dataOrderFirstName" type="text" class="data-order__input-field" name="first-name-data-order" placeholder="First name" required autocomplete="off">
      </div>
      <div class="data-order__box-input">
        <input id="dataOrderLastName" type="text" class="data-order__input-field" name="last-name-data-order" placeholder="Last name" required autocomplete="off">
      </div>
      <div class="data-order__box-input">
        <input id="dataOrderPhone" type="tel" pattern="\+?[0-9\s\-\(\)]+" class="data-order__input-field" name="phone-data-order" required placeholder="Phone number">
      </div>
      <div class="data-order__box-input">
        <input id="dataOrderMail" type="email" class="data-order__input-field" name="mail__data-order" placeholder="Email address" required autocomplete="off">
      </div>

      <div class="data-order__box-input data-order__box-input--accasion">

        <input id="accasionInputOptional" type="text" class="data-order__label-input data-order__label-input--mark" placeholder="Select an accasion (optional)" required autocomplete="off" readonly>

        <div id="dataOrderListAccasion" class="data-order__set-elements">

          <select id="dataOrderAccasion" class="data-order__box-accasion data-order__box-accasion--category-name" name="accasion__category" style="display: none;">

            <option id="valueNotGivenPopreserv" value="none-value" class="data-order__none-option">None</option>
            <option value="birthday" class="data-order__option">Birthday</option>
            <option value="anniversary" class="data-order__option">Anniversary</option>
            <option value="corporate" class="data-order__option">Corporate</option>
            <option value="themed_party" class="data-order__option">Themed party</option>
            <option value="wedding" class="data-order__option">Wedding</option>
            <option value="charity_event" class="data-order__option">Charity event</option>
            <option value="conference" class="data-order__option">Conference</option>
            <option value="business_meeting" class="data-order__option">Business meeting</option>
            <option value="networking" class="data-order__option">Networking</option>
          </select>

          <!-- Создаем кастомный ul, который будет заменять select -->
          <ul id="accasionFantomList" class="data-order__list">
            <!-- Элементы будут добавлены через JavaScript -->
          </ul>
        </div>
      </div>

      <div class="data-order__box-input">
        <input id="DataOrderSpecialRequest" type="text" class="data-order__input-field" name="special-request-data-order" placeholder="Add a special request" autocomplete="off">
      </div>

    </div>

    <div class="data-order__box-form box-form">
      <div class="box-form__column">
        <div id="boxFormRadioBtn" class="box-form__radio-btn">
          <!-- * Radio-btn #1 -->
          <div class="box-form__inner-radio">
            <input id="termOneBoxForm" type="radio" class="box-form__radio-input" value="radio-term-one" name="radio-terms" required>
            <label for="termOneBoxForm" class="box-form__label-radio">I agree with what is stated above</label>
          </div>
          <!-- * Radio-btn #2 -->
          <div class="box-form__inner-radio">
            <input id="termOneBoxTwo" type="radio" class="box-form__radio-input" value="radio-term-two" name="radio-terms" required>
            <label for="termOneBoxTwo" class="box-form__label-radio">Sign me up to receive dining offers and news from this restaurant by email.</label>
          </div>
          <!-- * Radio-btn #3 -->
          <div class="box-form__inner-radio">
            <input id="termOneBoxThree" type="radio" class="box-form__radio-input" value="radio-term-three" name="radio-terms" required>
            <label for="termOneBoxThree" class="box-form__label-radio">Sign me up to receive dining offers and news from this restaurant by email.</label>
          </div>
        </div>

        <button id="buttonConfirmReservationInForm" type="button" class="box-form__confirm-button" data-popup="#confirmation" data-da=".data-order__box-form,767">Confirm reservation</button>
      </div>
      
      <article class="box-form__column">
        <h2 class="box-form__subcaption">
          Restaurant informations
        </h2>
        <div class="box-form__paragraph">
          <p>
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
          </p>
          <p>
            Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam.
          </p>
        </div>
      </article>
    </div>

  </form>
</div>
Изображения:
Тип файла: jpg 1.jpg (15.7 Кб, 2 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 22.09.2024, 13:07
Интересующийся
Отправить личное сообщение для NastyaVs Посмотреть профиль Найти все сообщения от NastyaVs
 
Регистрация: 28.01.2024
Сообщений: 26

Код JS
document.addEventListener('DOMContentLoaded', function () {
  // Получаем элементы формы
  const firstName = document.getElementById('dataOrderFirstName');
  const lastName = document.getElementById('dataOrderLastName');
  const phone = document.getElementById('dataOrderPhone');
  const email = document.getElementById('dataOrderMail');
  const accasionSelect = document.getElementById('dataOrderAccasion');
  const accasionOptional = document.getElementById('accasionInputOptional');
  const radioOne = document.getElementById('termOneBoxForm');
  const radioTwo = document.getElementById('termOneBoxTwo');
  const radioThree = document.getElementById('termOneBoxThree');
  const confirmButton = document.getElementById('buttonConfirmReservationInForm');

  // Проверка на заполнение всех обязательных полей
  function checkFormValidity() {
      const isFirstNameFilled = firstName.value.trim() !== '';
      const isLastNameFilled = lastName.value.trim() !== '';
      const isPhoneFilled = phone.value.trim() !== '';
      const isEmailFilled = email.value.trim() !== '';
      const isAccasionSelected = accasionSelect.value !== 'valueNotGivenPopreserv'; // Проверяем, чтобы не было выбрано значение "None"
      const isRadioSelected = radioOne.checked || radioTwo.checked || radioThree.checked;

      // Проверка всех полей на заполнение
      if (isFirstNameFilled && isLastNameFilled && isPhoneFilled && isEmailFilled && isAccasionSelected && isRadioSelected) {
          confirmButton.disabled = false; // Активируем кнопку
      } else {
          confirmButton.disabled = true; // Деактивируем кнопку
      }
  }

  // Навешиваем события для проверки ввода данных в полях
  firstName.addEventListener('input', checkFormValidity);
  lastName.addEventListener('input', checkFormValidity);
  phone.addEventListener('input', checkFormValidity);
  email.addEventListener('input', checkFormValidity);
  
  // Отслеживание изменений в select (раскрывающий список)
  accasionSelect.addEventListener('change', function () {
      accasionOptional.value = accasionSelect.value; // Обновляем значение кастомного поля

      // Если выбрано значение "None", сразу делаем кнопку неактивной
      if (accasionSelect.value === 'valueNotGivenPopreserv') {
          confirmButton.disabled = true; // Деактивируем кнопку
      }

      // Проверяем остальные поля на валидность
      checkFormValidity();
  });

  // Проверка изменения радиокнопок
  radioOne.addEventListener('change', checkFormValidity);
  radioTwo.addEventListener('change', checkFormValidity);
  radioThree.addEventListener('change', checkFormValidity);

  // Делаем кнопку неактивной при загрузке страницы
  confirmButton.disabled = true;

  // Дополнительно проверим форму сразу при загрузке страницы
  checkFormValidity();
});

Помимо основного условия, что кнопка должна переходить из неактивного в активное состояние лишь в том случае когда все обязательные поля будут заполнены еще предусмотрено условие , что если в поле Select an accasion (optional) выбрано или изменено значение на None c id="valueNotGivenPopreserv" то кнопка Confirm reservation будет неактивной до тех пор пока не будет выбрано значение отличное от None. По умолчание в поле Select an accasion (optional) выбрано значение None которое замененено на запись в placeholder="Select an accasion (optional)". И в этом случае осуществляется некорректный переход кнопки из активного в активное состояние и наоборот.
А именно если первоначально заполнить все обязательные поля в форме, а поле Select an accasion (optional) оставить для заполнения в последнюю очередь, то после выбора значения отличного от None, кнопка не переходит в активное состояние до тех пор, пока не будет изменено любое другое значение из оставшихся обязательных полей.
Так же это происходит, когда осуществляется корректировка уже введенных значений. Если изменить в поле Select an accasion (optional) уже введенное значение на None, то кнопка не перейдет сразу в неактивное состояние как это я пытался сделать с помощью код, а перейдет лишь после того, когда будут изменены данные в любом другом обязательном поле.
На видео показано как это происходит
Помогите откорректировать код чтобы корректного отрабатывал для данного условие, которое предусматривается для поля Select an accasion (optional)
Ответить с цитированием
  #3 (permalink)  
Старый 24.09.2024, 14:45
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,672

Может просто так:
accasionSelect.addEventListener('change', checkFormValidity);

И там уже в функции checkFormValidity в нужное место вставить:
accasionOptional.value = accasionSelect.value;
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с загрузкой async при валидации страниц Stas1985 Мобильный JavaScript 3 31.05.2019 08:34
Сохранение блока при переходе на другую страницу Игорь Новик Общие вопросы Javascript 2 07.03.2019 18:52
Смена background при нажатии JIeuTo Общие вопросы Javascript 5 14.09.2018 18:48
Проблема при изменение типа в Store на ajax Ambassador ExtJS 2 06.09.2018 23:59
Заставить работать скрипт для навигации по странице при переходе извне geol.post jQuery 5 29.10.2015 13:35