Criei um pequeno formulário e gostaria de Habilitar um botão apenas quando os inputs estiverem preenchidos... Como faço?
Criei um pequeno formulário e gostaria de Habilitar um botão apenas quando os inputs estiverem preenchidos... Como faço?
Na primeira resposta do link abaixo tem um exemplo
https://stackoverflow.com/questions/46917270/javascript-disable-button-until-all-fields-are-filled
No exemplo, ele adiciona um listener para todos os campos input, e utiliza um array temporário para controlar o conteúdo de cada campo.
Quando não existir um elemento vazio no array (ou seja, todos os campos tiverem algum conteúdo), ele libera o botão submit
Boa noite fduduf,
Dê uma olhada nesse código
HTML
<input type="text" id="input">
<button class="button" id="botao" >Enviar</button>
Javascript
//desabilita o botão no início
document.getElementById("botao").disabled = true;
//cria um event listener que escuta mudanças no input
document.getElementById("input").addEventListener("input", function(event){
//busca conteúdo do input
var conteudo = document.getElementById("input").value;
//valida conteudo do input
if (conteudo !== null && conteudo !== '') {
//habilita o botão
document.getElementById("botao").disabled = false;
} else {
//desabilita o botão se o conteúdo do input ficar em branco
document.getElementById("botao").disabled = true;
}
});
Você também pode testar aqui no codepen
Abraços