Consulta por CEP
HTML
<form>
<label for="edtZipCode">CEP</label><br />
<input type="text" name="edtZipCode" id="edtZipCode" class="fieldLarger" placeholder="Digite o CEP e Enter" /><br />
<label for="edtRegion">Estado</label><br />
<input type="text" name="edtRegion" id="edtRegion" class="fieldLarger" /><br />
<label for="edtCity">Cidade</label><br />
<input type="text" name="edtCity" id="edtCity" class="fieldLarger" /><br />
<label for="optPlaceType">Tipo de Logradouro</label><br />
<select name="optPlaceType" id="optPlaceType" class="fieldLarger">
<option value="" selected="selected"></option>
<option value="Rua" label="Rua">Rua</option>
<option value="Aeroporto" label="Aeroporto">Aeroporto</option>
<option value="Avenida" label="Avenida">Avenida</option>
<option value="Alameda" label="Alameda">Alameda</option>
<option value="Área" label="Área">Área</option>
<option value="Campo" label="Campo">Campo</option>
<option value="Chácara" label="Chácara">Chácara</option>
<option value="Colônia" label="Colônia">Colônia</option>
<option value="Condomínio" label="Condomínio">Condomínio</option>
<option value="Distrito" label="Distrito">Distrito</option>
<option value="Esplanada" label="Esplanada">Esplanada</option>
<option value="Estação" label="Estação">Estação</option>
<option value="Estância" label="Estância">Estância</option>
<option value="Estrada" label="Estrada">Estrada</option>
<option value="Favela" label="Favela">Favela</option>
<option value="Fazenda" label="Fazenda">Fazenda</option>
<option value="Feira" label="Feira">Feira</option>
<option value="Gleba" label="Gleba">Gleba</option>
<option value="Granja" label="Granja">Granja</option>
<option value="Jardim" label="Jardim">Jardim</option>
<option value="Ladeira" label="Ladeira">Ladeira</option>
...
CSS
body {margin:10px;font-family:arial;font-size:75%}
.fieldMini { width:055px; }
.fieldMedium { width:105px; }
.fieldLarger { width:195px; }
.fieldBig { width:415px; }
.fieldDefault { width:305px; }
.fieldDate { width:130px; }
.fieldExtra1 { width:215px; }
.textareaDefault { height:80px; }
form input.fieldLoading {
background:...
JavaScript
/*
* ESSE SCRIPT SERVE APENAS PARA EXEMPLO!
* O SERVIDOR DE DADOS DE CEP PODE SER MODIFICADO A QUALQUER MOMENTO SEM AVISO!
* NÃO UTILIZE EM SEUS PROJETOS EM PRODUÇÃO!
*/
$(function() {
$('#edtZipCode').bind('keypress blur', function() {
if (event.type == 'keypress' && event.which == 13)
{
event.preventDefault();
$(this).getAddressBR();
}
else if (event.type == 'blur')
{
$(this).getAddressBR();
}
});
});
/**
* Busca CEP (Brasil)
*/
$.fn.getAddressBR = function() {
var elm = $(this);
var url = 'http://gsguma.com.br/web_service/cep/cep-json.php';
var cep = $.trim($(this).val());
var usr = 'temp';
var chv = 'secreta';
$.ajax({
crossDomain : true,
cache : false,
dataType : 'json',
type : 'post',
url : url,
data :
{
'cep' : cep,
'usuario' : usr,
'chave' : chv
},
beforeSend : function() {
elm.addClass('fieldLoading');
},
complete : function() {
elm.removeClass('fieldLoading');
},
error : function(xhr, ajaxOptions, thrownError) {
console.log('\nFunction/Method: getAddressBR\nError: ' + xhr.status + '\n' + thrownError);
},
success : function(data) {
if (data.erro != '')
{
console.log('Erro: ' +data.erro);
}
if (data.status == 1)
{
$('#optPlaceType ').val(unescape(data.logradouro_tipo));
$('#edtPlace ').val(unescape(data.logradouro));
$('#edtNeighborhoodt').val(unescape(data.bairro));
$('#edtCity ').val(unescape(data.cidade));
$('#edtRegion ').val(unescape(data.estado));
}
else
{
...