Como preencher endereço a partir do CEP com JavaScript
Neste tutorial, será mostrado como preencher o endereço automaticamente a partir do CEP usando JavaScript.
Primeiramente, será demonstrado como criar o formulário.
Em seguida, será explicado como recuperar o endereço a partir do CEP.
Por fim, será mostrado como preencher o endereço no formulário utilizando JavaScript.
Download do código fonte desenvolvido na aula: Download
Curso de PHP Developer: Mais Detalhes
Receber as aulas gratuitas do curso de PHP Developer: Acessar
Validar formulário com Rakit no PHP: Acessar
Para começar, crie o arquivo index.html com a estrutura básica do HTML e o formulário para cadastrar o endereço. Inclua também o arquivo js/custom.js, onde será inserido o JavaScript.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Celke</title>
</head>
<body>
<form method="POST" action="">
<label>Cep:</label>
<input name="cep" type="text" id="cep" value="" onblur="pesquisacep(this.value);"><br><br>
<label>Rua:</label>
<input name="rua" type="text" id="rua"><br><br>
<label>Bairro:</label>
<input name="bairro" type="text" id="bairro"><br><br>
<label>Cidade:</label>
<input name="cidade" type="text" id="cidade"><br><br>
<label>Estado:</label>
<input name="uf" type="text" id="uf"><br><br>
<label>IBGE:</label>
<input name="ibge" type="text" id="ibge"><br><br>
<input type="submit" value="Cadastrar">
</form>
<script src="js/custom.js"></script>
</body>
</html>No arquivo js/custom.js, é criada a função pesquisacep, que recebe o valor do input quando o usuário sai do campo 'cep'. Na mesma função, é feita a requisição para a API que retorna o endereço a partir do CEP. Após a API retornar o endereço, ele é enviado ao formulário utilizando JavaScript.
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('rua').value = "...";
document.getElementById('bairro').value = "...";
document.getElementById('cidade').value = "...";
document.getElementById('uf').value = "...";
document.getElementById('ibge').value = "...";
// Cria um elemento javascript.
var script = document.createElement('script');
// Sincroniza com o callback.
script.src = 'https://viacep.com.br/ws/' + cep + '/json/?callback=meu_callback';
// Insere script no documento e carrega o conteúdo.
document.body.appendChild(script);
} //end if.
else {
//cep é inválido.
limpa_formulario_cep();
alert("Formato de CEP inválido.");
}
} // end if.
else {
// cep sem valor, limpa formulário.
limpa_formulario_cep();
}
}
function limpa_formulario_cep() {
//Limpa valores do formulário de cep.
document.getElementById('rua').value = ("");
document.getElementById('bairro').value = ("");
document.getElementById('cidade').value = ("");
document.getElementById('uf').value = ("");
document.getElementById('ibge').value = ("");
}
function meu_callback(conteudo) {
if (!("erro" in conteudo)) {
// Atualiza os campos com os valores.
document.getElementById('rua').value = (conteudo.logradouro);
document.getElementById('bairro').value = (conteudo.bairro);
document.getElementById('cidade').value = (conteudo.localidade);
document.getElementById('uf').value = (conteudo.uf);
document.getElementById('ibge').value = (conteudo.ibge);
} //end if.
else {
// CEP não Encontrado.
limpa_formulario_cep();
alert("CEP não encontrado.");
}
}Baixar o código-fonte completo do projeto.
Bom, era isso. Espero que o tutorial tenha sido útil!