Cep preenche endereço,bairro,estado
OI!!!!
Neste endereço;
Tem um exemplo bem simples funcional e bem explicado que da pra aplicar a qualquer formulário de cadastro sem muita dificuldade.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Buscando informações de um endereço através do CEP</title>
</head>
<body>
CEP: <input type="text" id="cep" maxlength="9" placeholder="Ex: 13483-087"/><br/>
Endereço: <input type="text" id="endereco"/><br/>
Bairro: <input type="text" id="bairro"/><br/>
Cidade: <input type="text" id="cidade"/><br/>
UF: <input type="text" id="uf"/>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
// Registra o evento blur do campo "cep", ou seja, quando o usuário sair do campo "cep" faremos a consulta dos dados
$("#cep").blur(function(){
// Para fazer a consulta, removemos tudo o que não é número do valor informado pelo usuário
var cep = this.value.replace(/[^0-9]/, "");
// Validação do CEP; caso o CEP não possua 8 números, então cancela a consulta
if(cep.length!=8){
return false;
}
// Utilizamos o webservice "viacep.com.br" para buscar as informações do CEP fornecido pelo usuário.
// A url consiste no endereço do webservice ("http://viacep.com.br/ws/"), mais o cep que o usuário
// informou e também o tipo de retorno que desejamos, podendo ser "xml", "piped", "querty" ou o que
// iremos utilizar, que é "json"
var url = "http://viacep.com.br/ws/"+cep+"/json/";
// Aqui fazemos uma requisição ajax ao webservice, tratando o retorno com try/catch para que caso ocorra algum
// erro (o cep pode não existir, por exemplo) o usuário não seja afetado, assim ele pode continuar preenchendo os campos
$.getJSON(url, function(dadosRetorno){
try{
// Insere os dados em cada campo
$("#endereco").val(dadosRetorno.logradouro);
$("#bairro").val(dadosRetorno.bairro);
$("#cidade").val(dadosRetorno.localidade);
$("#uf").val(dadosRetorno.uf);
}catch(ex){}
});
});
</script>
</body>
</html>Eu consegui colocor no cadastro da minha loja Oscommerce, mas o problema é que alguns CEP´s demoram pra retornar, alguém tem alguma idéia de como c0olocar uma imagem gif do lado do campo CEP tipo frete fácil pagseguro que gira enquanto retorna os dados?
Claro que eu aceito qualquer outra ideia que de ao usuário a noção que ele deve esperar os campos serem carregados,
De mais eu só posso continuar a agradecer a ajuda e o tempo que vcs dispenam pra ajudar nas respostas.
De novo o meu muito obrigado.
Marcelo
Discussão (10)
Carregando comentários...