Проблема с кнопкой в form при переходе из неактивного в активное состояние и наоборот

@Alla2002 · Регистрация: 23.12.2020

Студворк — интернет-сервис помощи студентам

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

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<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>

Код JS

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
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)

@voraa · 22.09.2024, 14:14

Сообщение от Alla2002

Так же это происходит, когда осуществляется корректировка уже введенных значений. Если изменить в поле Select an accasion (optional) уже введенное значение на None, то кнопка не перейдет сразу в неактивное состояние как это я пытался сделать с помощью код, а перейдет лишь после того, когда будут изменены данные в любом другом обязательном поле.

Ну так у вас

JavaScript
1
2
3
4
5
6
7
8
9
10
11
 accasionSelect.addEventListener('change', function () {
      accasionOptional.value = accasionSelect.value; // Обновляем значение кастомного поля
 
      // Если выбрано значение "None", сразу делаем кнопку неактивной
      if (accasionSelect.value === 'valueNotGivenPopreserv') {
          confirmButton.disabled = true; // Деактивируем кнопку
      }
 
      // Проверяем остальные поля на валидность
      checkFormValidity();
  });

После проверки в select вы деактивируете кнопку. А потом проверяете обязательные поля, которые снова могут ее активировать. Через else надо.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
 accasionSelect.addEventListener('change', function () {
      accasionOptional.value = accasionSelect.value; // Обновляем значение кастомного поля
 
      // Если выбрано значение "None", сразу делаем кнопку неактивной
      if (accasionSelect.value === 'valueNotGivenPopreserv') {
          confirmButton.disabled = true; // Деактивируем кнопку
      } else {
 
      // Проверяем остальные поля на валидность
           checkFormValidity();
      }
  });

@MilkaCG · 22.09.2024, 15:17

Сообщение от voraa

После проверки в select вы деактивируете кнопку. А потом проверяете обязательные поля, которые снова могут ее активировать. Через else надо.

Приветствую. Без изменений. Так тоже пробывала

@Alla2002 · 22.09.2024, 15:44 **[ТС]**

MilkaCG, Не сработало

Может быть тут нюанс связан как по JS само кастомное поле реализовано?

@voraa · 22.09.2024, 16:51

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

Новые блоги и статьи Все статьи Все блоги /
Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит токи на L и напряжения на C в установ. режимах до и. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@Alla2002 2 / 2 / 0 Регистрация: 23.12.2020 Сообщений: 103
	22.09.2024, 15:44 [ТС]
	MilkaCG, Не сработало Может быть тут нюанс связан как по JS само кастомное поле реализовано? 0

@voraa 1245 / 1148 / 178 Регистрация: 21.01.2024 Сообщений: 5,301
	22.09.2024, 16:51
	Я не знаю, как работает ваш кастомный селект и откуда там приходят значения и на что вешать обработчик. Остается только в отладчике сидеть. 0