Como preencher campos automaticamente com CEP

Você já deve ter notado, ao preencher um formulário de cadastro online, como é prático ver seus dados, como endereço, bairro, cidade e UF, automaticamente inseridos nos campos correspondentes depois de você ter informado o seu código de endereçamento postal (CEP). Neste post veja como preencher campos automaticamente com CEP em Java Script.

Esse recurso poupa o tempo de quem está preenchendo um formulário, além de garantir a fidelidade dos dados, uma vez que é consultado um banco de dados com informações exatas sobre o CEP do usuário. Para ter esse recurso no seu site, basta seguir os procedimentos a seguir:

1. Crie um arquivo PHP com o nome “consultar_cep” com o seguinte conteúdo:

$cep = $_POST['cep']; //recupera o CEP informado no formulário
//transforma o banco em arquivo XML
$reg = simplexml_load_file("http://cep.republicavirtual.com.br/web_cep.php?formato=xml&cep="
 . $cep); //preenche automaticamente os campos do formulário:
$dados['sucesso'] = (string) $reg->resultado;
$dados['rua']     = (string) $reg->tipo_logradouro . ' ' . $reg->logradouro;
$dados['bairro']  = (string) $reg->bairro;
$dados['cidade']  = (string) $reg->cidade;
$dados['estado']  = (string) $reg->uf; 
echo json_encode($dados); //codifica pro formato JSON

2. Crie outro arquivo PHP com o nome “cep” para fazer as requisições AJAX:

$(document).ready( function() {

   /* Executa a requisição quando o campo CEP perder o foco */
   $('#cep').blur(function(){

           /* Configura a requisição AJAX */
           $.ajax({
                url : 'consultar_cep.php', /* URL que será chamada */ 
                type : 'POST', /* Tipo da requisição */ 
                data: 'cep=' + $('#cep').val(), /* dado que será enviado via POST */
                dataType: 'json', /* Tipo de transmissão */
                success: function(data){
                    if(data.sucesso == 1){
                        $('#rua').val(data.rua);
                        $('#bairro').val(data.bairro);
                        $('#cidade').val(data.cidade);
                        $('#estado').val(data.estado); 
                        $('#numero').focus();
                    }
                }
           });   
   return false;    
   })
});

3. Especifique os plugins Javascript (dentro das tags <head></head>) no documento HTML:

<script type="text/javascript" src="jquery-1.2.6.pack.js"›</script>
<script type='text/javascript' src="cep.js"></script>

Baixe o arquivo “jquery-1.2.6.pack.js” em https://code.google.com/p/jqueryjs/downloads/list.

4. Identifique o campo, no documento HTML, que será usado para pesquisa do CEP:

<input type="text" size="15" maxlength="10" name="cep" id="cep">

O parâmetro “id” será usado para fazer a requisição.

  function limpa_formulário_cep() {	
    //Limpa valores do formulário de cep.
    document.getElementById('endereco').value=("");
    document.getElementById('bairro').value=("");
    document.getElementById('cidade').value=("");
    document.getElementById('uf').value=("");
  }
  function meu_callback(conteudo) {
	if (!("erro" in conteudo)) {
      //Atualiza os campos com os valores.
        document.getElementById('endereco').value=(conteudo.logradouro);
        document.getElementById('bairro').value=(conteudo.bairro);
        document.getElementById('cidade').value=(conteudo.localidade);
        document.getElementById('uf').value=(conteudo.uf);
	}
    else {
      //CEP não Encontrado.
        limpa_formulário_cep();
        alert("CEP não encontrado.");
    }
}
        
  function pesquisacep(valor) {
    //Nova variável "cep" somente com dígitos.
    var cep = valor.replace(/\D/g, '');
    //Verifica se campo cep possui valor informado.
    if (cep != "") {
       //Expressão regular para validar o CEP.
        var validacep = /^[0-9]{8}$/;
       //Valida o formato do CEP.
        if(validacep.test(cep)) {
          //Preenche os campos com "..." enquanto consulta webservice.
            document.getElementById('endereco').value="...";
            document.getElementById('bairro').value="...";
            document.getElementById('cidade').value="...";
            document.getElementById('uf').value="...";

          //Cria um elemento javascript.
            var script = document.createElement('script');

          //Sincroniza com o callback.
            script.src = '//viacep.com.br/ws/'+ cep + '/json/?callback=meu_callback';

		  //Insere script no documento e carrega o conteúdo.
            document.body.appendChild(script);
         } 
         else {
		 //cep é inválido.
             limpa_formulário_cep();
             alert("Formato de CEP inválido.");
			 document.getElementById('cep').value="";			 
         }
       } 
       else {
       //cep sem valor, limpa formulário.
          limpa_formulário_cep();
        }
    };

Para chamar a função:

<input type="text" name="cep" id="cep" onKeyPress="return SomenteNum(event);" 
onBlur="pesquisacep(this.value);"/>

Percebam que foi chamada a função “SomenteNum()” de modo que somente números sejam permitidos no campo CEP:

 function SomenteNum(e){
	 var tecla=(window.event)?event.keyCode:e.which;
	 if((tecla>47 && tecla<58)) 
	  return true;
	 else
	 {
		 if (tecla==8 || tecla==0) 
		  return true;
		else  
		return false;
  }
 }

QUER SER UM PROGRAMADOR FULL-STACK E DOMINAR AS PRINCIPAIS TECNOLOGIAS DO MERCADO?

Aprenda através de projetos reais e aulas práticas. São 20 cursos completos + cursos bônus. Grupos privados exclusivos, atualizações constantes e lives semanais.

Python, PHP, Java Script, CSS, Node, Angular JS, MySQL, Photoshop, Flutter, AWS, Apache e muito mais!

CLIQUE NA IMAGEM ABAIXO E CONFIRA MAIS DETALHES: