Un formulario es un componente fundamental para el desarrollo web, pues nos permite hacer que el usuario interactúe con nuestra aplicación, recibiendo datos directamente de esta interacción. Además, hay muchas maneras de controlar el comportamiento de un formulario. En este post, te enseñaremos cómo habilitar botón al rellenar formulario en JavaScript para controlar el envío por parte del usuario.
¿Cómo habilitar botón al rellenar formulario en JavaScript?
Para habilitar botón al rellenar formulario en JavaScript, debemos programar una lógica similar a la siguiente: si todos mis inputs tienen un valor, habilito el botón. Si cualquiera de mis inputs no tiene valor, no lo habilito.
El primer paso para ejecutar esta lógica es revisar el valor de cada uno de los input cada vez que se ejecute un cambio en alguno de ellos. Para ello, deberemos escuchar cambios en un input desde JavaScript. A continuación, te mostramos las líneas de código que nos permiten hacer esto:
suscribeToEvents ( ) {
const inputElements = this.formElement.querySelector (‘all’);
inputElements.forEach (inputElement) => {
inputElement.addEventListener (“input”, ( ) => {
// acción a ejecutar como reacción
});
});
}
}
Con las líneas de código anteriores, hemos seleccionado los distintos input de nuestro formulario y los hemos recorrido con el método forEach de JavaScript, con el que hemos añadido un método addEventListener a cada uno de los elementos. Este método recibe el evento input, que se dispara cuando sucede un cambio en un input. Ahora, para habilitar botón al rellenar formulario en JavaScript debemos ejecutar la lógica anterior en el segundo parámetro de este addEventListener.
Recuerda que el método addEventListener recibe dos parámetros: el primero es el evento a escuchar y el segundo es la reacción a ese evento. Para conocer más sobre este método, te recomendamos leer el artículo EventTarget.addEventListener ( ) en Mozilla Developer Network.
¿Cuál es la lógica que debemos ejecutar? Pues aquella que nos dice que, si todos los input están llenos, se habilita el botón. Para ello, debemos hacer que, cada vez que haya un cambio en un input, se compruebe o revise si los demás input están llenos. Para hacer esta comprobación, podemos usar los métodos some y every en JavaScript, que nos devuelven un valor booleano según la lógica que programemos.
Para habilitar botón al rellenar formulario en JavaScript, podemos usar el método every y, así, comparar si el hecho de que todos los input estén llenos es true o false.
inputElements.every (inputElement => inputElement.value)
La línea de código anterior nos permite comprobrar si todos los elementos dentro de inputElements tienen valor. Entonces, si algunos de estos input no tiene valor, obtendremos un false. En el caso contrario, obtendremos un true.
Pensando en que usaremos un método para modificar un array, la variable sobre la que aplicaremos el método debe devolver un array. Sin embargo, como puedes leer en nuestro post sobre qué devuelve el método querySelectorAll, este método devuelve un NodeList, no un array. Por ello, deberemos insertar el comando array.from antes del nodo seleccionado.
Ahora, el siguiente paso para habilitar botón al rellenar formulario en JavaScript es quitar el atributo disabled de HTML de nuestro botón. Para ello, usaremos el método removeAttribute (solo útil si antes hemos definido que este botón tiene el atributo disabled).
A continuación, te mostramos las líneas de código finales que nos permiten habilitar botón al rellenar formulario en JavaScript. En ellas, hemos agregado una lógica condicional if…else en la que removemos el atributo disabled del botón cuando todos los input tienen un valor. En el caso contrario, añadimos el atributo usando el método setAttribute. Para ello, hemos usado el método para seleccionar nodos del DOM querySelector y hemos seleccionado la etiqueta button.
Además, hemos guardado el método every bajo una constante areAllInputsFilled para facilitar su acceso y comprobación.
suscribeToEvents ( ) {
const inputElements = this.formElement.querySelector (‘all’);
inputElements.forEach (inputElement) => {
inputElement.addEventListener (“input”, ( ) => {
const areAllInputsFilled = inputElements.every (
(inputElement) => inputElement.value
);
if (areAllInputsFilled) {
this.formElement.querySelector (“button”).removeAttribute (“disabled”);
} else {
this.formElement.querySelector (“button”).setAttribute (“disabled, ” “);
}
});
});
}
}
¿Cuál el siguiente paso?
Ahora que sabes cómo habilitar botón al rellenar formulario en JavaScript, ¡te invitamos a seguir aprendiendo sobre el desarrollo frontend! Para ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás, entre muchas otras cosas, a desarrollar elementos y comportamientos en el navegador con JavaScript, HTML, CSS y React. ¿A qué esperas para dar el siguiente paso en tu formación? ¡Inscríbete ya y conviértete en un experto en poco tiempo!
