Для правильной синхронизации поля формы с состоянием кнопки в JavaScript, вы можете воспользоваться слушателями событий и установкой атрибута состояния кнопки в зависимости от значения поля формы.
Вот пример кода, который позволяет синхронизировать поле формы типа текст (например, <input type="text" />) с состоянием кнопки (например, <button></button>):
HTML:
<input type="text" id="my-input" /> <button id="my-button">Submit</button>
JavaScript:
// Получаем элементы формы
const input = document.getElementById('my-input');
const button = document.getElementById('my-button');
// Функция для обновления состояния кнопки
function toggleButtonState() {
button.disabled = input.value.trim() === ''; // Устанавливаем атрибут disabled в зависимости от значения поля формы (если пустое значение - кнопка становится неактивной)
}
// Слушатель события ввода текста в поле формы
input.addEventListener('input', toggleButtonState);
// Инициализация состояния кнопки
toggleButtonState();
В этом примере мы получаем элементы формы (input и button) с помощью getElementById. Затем мы определяем функцию toggleButtonState, которая будет обновлять состояние кнопки в зависимости от значения поля формы. Функция проверяет, является ли значение поля пустым после удаления пробелов с помощью trim. Если значение пустое, то мы устанавливаем атрибут disabled кнопки в true, что делает кнопку неактивной. Если значение поля не пустое, то атрибут disabled снимается и кнопка становится активной.
Затем мы добавляем слушатель события input на поле input, чтобы при каждом вводе текста вызывалась функция toggleButtonState. Это позволяет нам мгновенно обновлять состояние кнопки при изменении значения поля.
Наконец, мы вызываем функцию toggleButtonState после инициализации, чтобы установить начальное состояние кнопки в соответствии с значением поля формы.