Estou com uma dúvida.
Como consigo fazer com que meus campos de endereço sejam preenchidos automáticamente, ao inserir o CEP?
Preenchimento de endereço automático por CEP
- Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
- Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
- Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
- Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
- Clique aqui para mais detalhes sobre o funcionamento do fluig Forum!
1 resposta
-
A solução ideal é você contratar um serviço pago que fornecerá uma API rest para consumir as informações e usando o Jquery você pode popular os campos conforme o resultado. Segue um script de exemplo que lhe ajudará de um serviço gratuito chamado viaCEP, por tanto não tem garantias de funcionamento pleno. Mas pode ser usado como exemplo de como voce realizar o mesmo em um serviço pago com Jquery.
<html> <head> <title>ViaCEP Webservice</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- Adicionando JQuery --> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <!-- Adicionando Javascript --> <script type="text/javascript" > $(document).ready(function() { function limpa_formulário_cep() { // Limpa valores do formulário de cep. $("#rua").val(""); $("#bairro").val(""); $("#cidade").val(""); $("#uf").val(""); $("#ibge").val(""); } //Quando o campo cep perde o foco. $("#cep").blur(function() { //Nova variável "cep" somente com dígitos. var cep = $(this).val().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. $("#rua").val("..."); $("#bairro").val("..."); $("#cidade").val("..."); $("#uf").val("..."); $("#ibge").val("..."); //Consulta o webservice viacep.com.br/ $.getJSON("https://viacep.com.br/ws/"+ cep +"/json/?callback=?", function(dados) { if (!("erro" in dados)) { //Atualiza os campos com os valores da consulta. $("#rua").val(dados.logradouro); $("#bairro").val(dados.bairro); $("#cidade").val(dados.localidade); $("#uf").val(dados.uf); $("#ibge").val(dados.ibge); } //end if. else { //CEP pesquisado não foi encontrado. limpa_formulário_cep(); alert("CEP não encontrado."); } }); } //end if. else { //cep é inválido. limpa_formulário_cep(); alert("Formato de CEP inválido."); } } //end if. else { //cep sem valor, limpa formulário. limpa_formulário_cep(); } }); }); </script> </head> <body> <!-- Inicio do formulario --> <form method="get" action="."> <label>Cep: <input name="cep" type="text" id="cep" value="" size="10" maxlength="9" /></label><br /> <label>Rua: <input name="rua" type="text" id="rua" size="60" /></label><br /> <label>Bairro: <input name="bairro" type="text" id="bairro" size="40" /></label><br /> <label>Cidade: <input name="cidade" type="text" id="cidade" size="40" /></label><br /> <label>Estado: <input name="uf" type="text" id="uf" size="2" /></label><br /> <label>IBGE: <input name="ibge" type="text" id="ibge" size="8" /></label><br /> </form> </body> </html> -