Порядок заполнение полей
Вложений: 1
Добрый день.
Есть небольшая форма с 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"; } } }); }); |
Часовой пояс GMT +3, время: 09:42. |