Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Порядок заполнение полей (https://javascript.ru/forum/css-html/86096-poryadok-zapolnenie-polejj.html)

MorenO410 24.09.2024 12:01

Порядок заполнение полей
 
Вложений: 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.