Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.09.2024, 12:01
Интересующийся
Отправить личное сообщение для MorenO410 Посмотреть профиль Найти все сообщения от MorenO410
 
Регистрация: 18.01.2024
Сообщений: 21

Порядок заполнение полей
Добрый день.
Есть небольшая форма с 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";
			}
		}
	});
});
Изображения:
Тип файла: jpg 1.jpg (11.4 Кб, 4 просмотров)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Авто заполнение похожих полей формы CyberWolf jQuery 2 29.03.2016 03:28
Автоматическое заполнение полей формы скриптом jpokorp Общие вопросы Javascript 20 22.12.2015 11:29
Заполнение полей формы в новом окне Soundwave Элементы интерфейса 3 23.03.2012 03:25
jqgrid. Заполнение обязательных полей treef Javascript под браузер 0 13.09.2011 01:37
Динамические создание полей ввода и заполнение их данными vitasya Events/DOM/Window 2 29.03.2009 23:51