post
Preenchimento de Endereço Automático pelo Campo CEP
Publicado em: 09/08/2023
Caso queira montar uma aplicação ou um site que tenha um formulário de endereço, e precise que ele preencha o endereço automaticamente quando o usuário preencher o CEP, este código pode lhe ajudar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Consulta de CEP</title>
</head>
<body>
<form id="cepForm">
<label for="cep">CEP:</label>
<input type="text" id="cep" maxlength="8" />
<br>
<label for="logradouro">Logradouro:</label>
<input type="text" id="logradouro" />
<br>
<label for="complemento">Complemento:</label>
<input type="text" id="complemento" />
<br>
<label for="bairro">Bairro:</label>
<input type="text" id="bairro" />
<br>
<label for="localidade">Localidade:</label>
<input type="text" id="localidade" />
<br>
<label for="uf">UF:</label>
<input type="text" id="uf" />
<br>
<label for="ibge">IBGE:</label>
<input type="text" id="ibge" />
<br>
<label for="gia">GIA:</label>
<input type="text" id="gia" />
<br>
<label for="ddd">DDD:</label>
<input type="text" id="ddd" />
<br>
<label for="siafi">SIAFI:</label>
<input type="text" id="siafi" />
</form>
<p id="mensagem-erro" style="color: red; display: none;">CEP não encontrado</p>
<script>
const mensagemErro = document.getElementById('mensagem-erro');
document.getElementById('cep').addEventListener('input', function() {
const cep = this.value;
if (cep.length === 8) {
const url = `https://viacep.com.br/ws/${cep}/json/`;
fetch(url)
.then(response => response.json())
.then(data => {
if (data.erro) {
mensagemErro.style.display = 'block';
resetFields();
} else {
mensagemErro.style.display = 'none';
document.getElementById('logradouro').value = data.logradouro;
document.getElementById('complemento').value = data.complemento;
document.getElementById('bairro').value = data.bairro;
document.getElementById('localidade').value = data.localidade;
document.getElementById('uf').value = data.uf;
document.getElementById('ibge').value = data.ibge;
document.getElementById('gia').value = data.gia;
document.getElementById('ddd').value = data.ddd;
document.getElementById('siafi').value = data.siafi;
}
})
.catch(error => {
console.error('Erro ao buscar CEP:', error);
mensagemErro.style.display = 'block';
resetFields();
});
}
});
function resetFields() {
document.getElementById('logradouro').value = '';
document.getElementById('complemento').value = '';
document.getElementById('bairro').value = '';
document.getElementById('localidade').value = '';
document.getElementById('uf').value = '';
document.getElementById('ibge').value = '';
document.getElementById('gia').value = '';
document.getElementById('ddd').value = '';
document.getElementById('siafi').value = '';
}
</script>
</body>
</html>
Teste o código rodando online agora mesmo: https://preenchimento-automatico-de-endereco-pelo-cep.brunoalbim.repl.co
Link de compartilhamento
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.
bruno.art.br/pb/3014
ID de Referência: 3014
Sugira uma publicação
Envie uma mensagem para mim, e sugira alguma publicação de algum tema que tenha dificuldades de resolver.