Код 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)
