Quiero eliminar el atributo deshabilitado del botón cuando se completa cada campo. Mi código funciona cuando se llena una sola entrada. ¿Qué estoy haciendo mal aquí?
Aquí están los HTML y JS
checkInput() function checkInput() { let input = document.querySelectorAll('.form-control') const button = document.querySelector('.submit-btn') input.forEach(function (e) { let disabled = true; e.addEventListener('keyup', function () { if (e.value !== '') { disabled = false } else { disabled = true return false } if(disabled) { button.setAttribute('disabled', 'disabled') } else { button.removeAttribute('disabled') } }) }) } <div class="form-group"> <label for="name">Name*</label> <input class="form-control" type="text" id="name" placeholder="Name"> </div> <div class="form-group"> <label for="lastName">lastName*</label> <input class="form-control" type="text" id="lastName" placeholder="lastName"> </div> <div class="form-group"> <label for="fiscalCode">fiscalCode*</label> <input class="form-control" type="text" id="fiscalCode" placeholder="fiscalCode"> </div> <button type="submit" disabled="disabled" class="submit-btn">Continue</button>No funciona porque desea que todas las entradas afecten el estado de un botón, pero solo verifica una variable para agregar/eliminar la propiedad deshabilitada.
Aquí hay un fragmento de código de trabajo con un ejemplo en el que creé una matriz de propiedades, una para cada entrada, a la que puedo referirme en cada evento de activación de tecla activada.
checkInput() function checkInput() { let input = document.querySelectorAll('.form-control') const button = document.querySelector('.submit-btn') const disabled = Array(input.length).fill(true); input.forEach(function (e, index) { e.addEventListener('input', function () { disabled[index] = e.value === ''; // simplified if/else statement of yours if(disabled.some(Boolean)) { button.setAttribute('disabled', 'disabled') } else { button.removeAttribute('disabled') } }) }) } <div class="form-group"> <label for="name">Name*</label> <input class="form-control" type="text" id="name" placeholder="Name"> </div> <div class="form-group"> <label for="lastName">lastName*</label> <input class="form-control" type="text" id="lastName" placeholder="lastName"> </div> <div class="form-group"> <label for="fiscalCode">fiscalCode*</label> <input class="form-control" type="text" id="fiscalCode" placeholder="fiscalCode"> </div> <button type="submit" disabled="disabled" class="submit-btn">Prosegui</button>Además, detener la ejecución de la función al asignar disabled = true en la primera declaración else también es un enfoque incorrecto, ya que lo más probable es que desee no solo asignar el valor de deshabilitación, sino también la propiedad deshabilitada del botón.
EDITAR: como se menciona en el comentario de CID, es razonable cambiar el detector de eventos a entrada para que podamos manejar los eventos de copiar y pegar también
Está agregando un evento keyup para cada campo de entrada. ese evento solo verifica el campo de entrada actual si está vacío o no. no verifica los 3 campos de entrada en sí mismo
Esto debería funcionar:
checkInput() function checkInput() { let input = document.querySelectorAll('.form-control') const button = document.querySelector('.submit-btn') input.forEach(function (e) { let disabled = true; e.addEventListener('keyup', function () { const emptyFields = Array.from(input).filter( input => input.value === ""); disabled = emptyFields.length > 0; if(disabled) { button.setAttribute('disabled', 'disabled') } else { button.removeAttribute('disabled') } }) }) }keyup de cualquiera de las 3 entradas. Entonces se habilita en cualquiera de las 3 entradas.return en flujo deshabilitado para deshabilitar después de borrar. checkInput() function checkInput() { let input = document.querySelectorAll('.form-control') const button = document.querySelector('.submit-btn') input.forEach(function (e) { let disabled = true; e.addEventListener('keyup', function () { if (e.value !== '') { disabled = false } else { disabled = true // return false <-- this makes function exit before your disable button } if(disabled) { button.setAttribute('disabled', 'disabled') } else { button.removeAttribute('disabled') } }) }) } <div class="form-group"> <label for="name">Name*</label> <input class="form-control" type="text" id="name" placeholder="Name"> </div> <div class="form-group"> <label for="lastName">lastName*</label> <input class="form-control" type="text" id="lastName" placeholder="lastName"> </div> <div class="form-group"> <label for="fiscalCode">fiscalCode*</label> <input class="form-control" type="text" id="fiscalCode" placeholder="fiscalCode"> </div> <button type="submit" disabled="disabled" class="submit-btn">Continue</button>