Javascript – Habilitar e Desabilitar Formulário

Categoria: JavascriptPublicado em: 19/12/2008

Formulário é mato na internet. Todo site tem. Seja um formulário de busca, de cadastro, de newsletter, de comentários, de pedidos, não tem jeito.

Então não pode faltar os controles em javascript para manipular estes formulários. E um pedido recorrente do pessoal é a opção de habilitar e desabilitar alguns campos do formulário de acordo com uma escolha.

No exemplo abaixo, vou usar um caso muito comum, para que todos possam entender e adaptar a cada necessidade.

No código temos um formulário de cadastro, com campos de pessoa física e pessoa jurídica, logo, teremos campos diferentes para o mesmo cadastro.

Eu coloquei uma opção em radio button, pro usuário escolher se deseja cadastrar como pessoa física ou jurídica, vejamos o código:

<html>
<head>
<title>teste</title>

<script type="text/javascript">
<!--
function habilita( tipo_pessoa ) {
    if ( tipo_pessoa == "fisica" ) {
        document.getElementById("edt_nome").disabled=false;
        document.getElementById("edt_cpf").disabled=false;
        document.getElementById("edt_razao").disabled=true;
        document.getElementById("edt_cnpj").disabled=true;
    } else if ( tipo_pessoa == "juridica" ) {
        document.getElementById("edt_nome").disabled=true;
        document.getElementById("edt_cpf").disabled=true;
        document.getElementById("edt_razao").disabled=false;
        document.getElementById("edt_cnpj").disabled=false;
    }
}
//-->
</script>

</head>
<body>

<form name="formulario" action="teste.html" method="POST">
<p>
<input type="radio" name="op_pessoa" id="op_pessoa" value="fisica" onclick="javascript:habilita(this.value);" CHECKED>pessoa fisica
<input type="radio" name="op_pessoa" id="op_pessoa" value="juridica" onclick="javascript:habilita(this.value);">pessoa juridica
</p>
<p><label>nome:</label><input type="text" name="edt_nome" id="edt_nome"></p>
<p><label>cpf:</label><input type="text" name="edt_cpf" id="edt_cpf"></p>
<p><label>razao social:</label><input type="text" name="edt_razao" id="edt_razao" disabled></p>
<p><label>cnpj:</label><input type="text" name="edt_cnpj" id="edt_cnpj" disabled></p>
<p><label>endereco:</label><input type="text" name="edt_endereco" id="edt_endereco"></p>
<p><label>telefone:</label><input type="text" name="edt_phone" id="edt_phone"></p>
<p><input type="submit" value="enviar"><input type="reset" value="limpar"></p>
</form>

</body>
</html>

Aparentemente bem simples. Quem dispara a ação é o radio button no evento onclick, passando o value do próprio.

Já na função é verificado qual o valor do radio, se for pessoa física, desabilita os campos de pessoa jurídica e habilita os de pessoa física. E se o valor for de pessoa jurídica, faz o inverso. Simples assim.

Outras opções que você pode estar incluindo ai, é o de limpar os campos sempre que fizer a mudança. E também pode pintar o fundo (background-color) dos campos (inputs) que ficarão desabilitados.

Alguns navegadores já mudam a cor do fundo dos campos desabilitados. Mas testes realizados no firefox 3 e no IE 8 mostraram que os campos continuam com a cor branca, mudando apenas o contorno (a borda) deles. Esse código também foi testado no chrome.

Sucesso!



Sobre o Autor

MarioSAM é faixa preta 2Dan de Taekwondo. Entusiasta do marketing online. Especulador do mercado financeiro. Projetista web com certificação SCJP da SUN. Com 10 anos de experiência em desenvolvimento de sistemas.