Как можно сактивировать кнопку только когда все поля ввода заполнены?

Каким образом можно реализовать функционал, при котором кнопка на странице будет отключена до момента заполнения определенных инпутов?
  • 1 марта 2024 г. 13:38
Ответы на вопрос 2
Для активации кнопки после заполнения всех полей ввода на странице можно использовать следующий метод:
1. Назначить каждому полю ввода событие `input`, которое будет вызывать функцию проверки заполнения полей.
2. В функции проверки сделать проверку заполнения всех полей ввода. Если все поля заполнены, то активировать кнопку, если хотя бы одно поле не заполнено, то оставить кнопку неактивной.
3. Дополнительно можно добавить условия проверки на валидность заполненных данных (например, проверка email на корректность).
Примерный код на JavaScript:

```javascript
document.addEventListener('DOMContentLoaded', function() {
  const inputs = document.querySelectorAll('input[type="text"]');
  const button = document.querySelector('button');
  
  inputs.forEach(input => {
    input.addEventListener('input', checkInputs);
  });
  
  function checkInputs() {
    let allFilled = true;
    
    inputs.forEach(input => {
      if (input.value === '') {
        allFilled = false;
      }
    });
    
    if (allFilled) {
      button.disabled = false;
    } else {
      button.disabled = true;
    }
  }
});
```

Таким образом, кнопка на странице будет отключена до момента заполнения всех полей ввода. При необходимости можно добавить дополнительную логику для проверки и валидации данных перед активацией кнопки.
Нуууу... Вот что мне выдаёт ChatGPT на этой: 

<!-- Your inputs -->
<input type="text" id="input1">
<input type="text" id="input2">
<input type="text" id="input3">

<!-- Your button -->
<button id="submitButton" disabled>Submit</button>


function checkInputs() {
    // Проверяем, заполнены ли все необходимые инпуты
    if (input1.value.trim() !== '' && input2.value.trim() !== '' && input3.value.trim() !== '') {
        // Если все заполнены, активируем кнопку
        submitButton.disabled = false;
    } else {
        // Если хотя бы один из них не заполнен, деактивируем кнопку
        submitButton.disabled = true;
    }
}

// Добавляем обработчик события input к каждому инпуту
input1.addEventListener('input', checkInputs);
input2.addEventListener('input', checkInputs);
input3.addEventListener('input', checkInputs);
Похожие вопросы