Добрый день.
Есть небольшая форма с 3 обязательными полями и кнопка для формы.
Кнопка для формы по коду Js стает активной лишь после того как все поля будут заполнены.
Проблема заключается в том, что при заполнении или изменении полей кнопка станет активной лишь при условии, что в обязательном порядке input id="partySizeBookTable" будет заполняться или корректироваться (если даже в это поле не нужно вносить изменения) строго в последнюю очередь.
Мне нужно чтобы поля, для активации кнопки, могли заполнятся или изменяться в любом порядке вне зависимости от поля input id="partySizeBookTable".
В связи с этим прошу помочь, так как не могу разобраться где моя ошибка в коде чтобы он работал корректно.
Заранее благодарен.
document.addEventListener("DOMContentLoaded", function () {
function generateRandomNumber() {
return (
"#" +
Math.floor(Math.random() * 1000000)
.toString()
.padStart(6, "0")
);
}
const dateInput = document.getElementById("dateBookTable");
const timeInput = document.getElementById("timeBookTable");
const partySizeInput = document.getElementById("partySizeBookTable");
const btnBook = document.getElementById("btnBookATable");
btnBook.disabled = true;
btnBook.classList.add("disabled-btn");
function checkInputs() {
if (
dateInput.value.trim() !== "" &&
timeInput.value.trim() !== "" &&
partySizeInput.value.trim() !== ""
) {
btnBook.disabled = false;
btnBook.classList.remove("disabled-btn");
} else {
btnBook.disabled = true;
btnBook.classList.add("disabled-btn");
}
}
function updatePartySizeMessage() {
const partySize = parseInt(partySizeInput.value.replace(/\D+/g, ""), 10);
let message = "";
let partySizeText = partySizeInput.value.replace(/\D+/g, "");
if (!isNaN(partySize) && partySize >= 1 && partySize <= 100) {
if (partySize === 1) {
message = "people (Single seedlings)";
} else if (partySize >= 2 && partySize <= 4) {
message = "people (Standard seating)";
} else if (partySize >= 5 && partySize <= 10) {
message = "people (Extended seating)";
} else if (partySize >= 11 && partySize <= 50) {
message = "people (Corporate seating)";
} else if (partySize >= 51 && partySize <= 100) {
message = "people (Clarify with the administrator)";
}
const cursorPosition = partySizeInput.selectionStart;
partySizeInput.value = `${partySizeText} ${message}`.trim();
partySizeInput.classList.add("party-size-message");
partySizeInput.setSelectionRange(partySizeText.length, partySizeText.length);
partySizeInput.classList.remove("error");
partySizeInput.classList.remove("fatal"); // Убираем ошибочные классы
} else if (partySize > 100) {
partySizeInput.value = "";
partySizeInput.placeholder = "The maximum number of people 100 people";
partySizeInput.classList.add("fatal");
partySizeInput.classList.remove("error"); // Удаляем синий класс ошибки
} else {
partySizeInput.value = "";
partySizeInput.placeholder = "Enter the number of guests from 1 to 100";
partySizeInput.classList.add("error");
partySizeInput.classList.remove("fatal"); // Удаляем красный класс
}
}
partySizeInput.addEventListener("input", function () {
const partySize = parseInt(partySizeInput.value.replace(/\D+/g, ""), 10);
if (partySize > 100) {
partySizeInput.value = "";
partySizeInput.placeholder = "The maximum number of people 100 people";
partySizeInput.classList.add("fatal");
partySizeInput.classList.remove("error");
} else {
updatePartySizeMessage();
}
});
dateInput.addEventListener("input", checkInputs);
timeInput.addEventListener("input", checkInputs);
partySizeInput.addEventListener("input", checkInputs);
btnBook.addEventListener("click", function () {
if (btnBook.disabled) return;
const dateValue = dateInput.value;
const timeValue = timeInput.value;
const partySizeValue = partySizeInput.value;
const dateOrderReservation = document.getElementById("dateOrderReservation");
const timeOrderReservation = document.getElementById("timeOrderReservation");
const dataOrderPartySize = document.getElementById("dataOrderPartySize");
if (dateOrderReservation) dateOrderReservation.textContent = dateValue;
if (timeOrderReservation) timeOrderReservation.textContent = timeValue;
if (dataOrderPartySize) dataOrderPartySize.textContent = partySizeValue;
const blDeskDateConfirmation = document.getElementById("blDeskDateConfirmation");
const blDeskTimeConfirmation = document.getElementById("blDeskTimeConfirmation");
const blDeskPartyConfirmation = document.getElementById("blDeskPartyConfirmation");
const numberIdOrderConfirmation = document.getElementById("numberIdOrderConfirmation");
if (blDeskDateConfirmation) blDeskDateConfirmation.textContent = dateValue;
if (blDeskTimeConfirmation) blDeskTimeConfirmation.textContent = timeValue;
if (blDeskPartyConfirmation) blDeskPartyConfirmation.textContent = partySizeValue;
const randomNumber = generateRandomNumber();
if (numberIdOrderConfirmation) numberIdOrderConfirmation.textContent = randomNumber;
const blDeskDateCancel = document.getElementById("blDeskDateCancel");
const blDeskTimeCancel = document.getElementById("blDeskTimeCancel");
const blDeskPartyCancel = document.getElementById("blDeskPartyCancel");
const numberIdOrderCancel = document.getElementById("numberIdOrderCancel");
if (blDeskDateCancel) blDeskDateCancel.textContent = dateValue;
if (blDeskTimeCancel) blDeskTimeCancel.textContent = timeValue;
if (blDeskPartyCancel) blDeskPartyCancel.textContent = partySizeValue;
if (numberIdOrderCancel) numberIdOrderCancel.textContent = randomNumber;
const popupSelector = btnBook.getAttribute("data-popup");
if (popupSelector) {
const popup = document.querySelector(popupSelector);
if (popup) {
popup.style.display = "block";
}
}
});
});