Created
September 18, 2013 18:00
-
-
Save fdaciuk/6612974 to your computer and use it in GitHub Desktop.
Buscar endereço de webservice utilizando somente o CEP
Dependëncias: jQuery
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var cep_search = function( fields ) { | |
| // Passa os campos em variáveis | |
| var $field_cep = fields.cep | |
| , $field_estado = fields.estado | |
| , $field_cidade = fields.cidade | |
| , $field_endereco = fields.endereco | |
| , $field_bairro = fields.bairro | |
| , $field_numero = fields.numero | |
| // Pega o valor do CEP | |
| , cep = $field_cep.val(); | |
| $.ajax({ | |
| // URL do webservice. Remove tudo o que não for digitos do CEP | |
| url : 'http://cep.correiocontrol.com.br/' + cep.replace( /\D/g, '' ) + '.js', | |
| dataType: 'jsonp', | |
| jsonpCallback : 'correiocontrolcep' | |
| }) | |
| .done(function( data ) { | |
| // Mostra os dados retornados | |
| console.log( data ); | |
| // Se não der erro, preenche os campos e dá o foco no campo de número | |
| if( ! data.erro ) { | |
| $field_estado.val( data.uf ); | |
| $field_cidade.val( data.localidade ); | |
| $field_endereco.val( data.logradouro ); | |
| $field_bairro.val( data.bairro ); | |
| $field_numero.val( '' ).focus(); | |
| return; | |
| } | |
| // Se der algum erro, limpa todos os campos e dá o foco no campo de endereço | |
| $field_estado.val( '' ); | |
| $field_cidade.val( '' ); | |
| $field_endereco.val( '' ).focus(); | |
| $field_bairro.val( '' ); | |
| $field_numero.val( '' ); | |
| }); | |
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $( '#cep' ).on( 'blur', function( e ) { | |
| cep_search({ | |
| cep : $( this ), | |
| estado : $( '#estado' ), | |
| cidade : $( '#cidade' ), | |
| endereco : $( '#endereco' ), | |
| bairro : $( '#bairro' ), | |
| numero : $( '#numero' ) | |
| }); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="pt-br"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Formulário</title> | |
| </head> | |
| <body> | |
| <form action="./" method="post"> | |
| <fieldset> | |
| <ul> | |
| <li> | |
| <label for="cep">CEP:</label> | |
| <input type="text" name="cep" id="cep" placeholder="Seu CEP" /> | |
| </li> | |
| <li> | |
| <label for="endereco">Endereço:</label> | |
| <input type="text" name="endereco" id="endereco" placeholder="Seu Endereço" /> | |
| </li> | |
| <li> | |
| <label for="numero">Número:</label> | |
| <input type="text" name="numero" id="numero" placeholder="Seu Número" /> | |
| </li> | |
| <li> | |
| <label for="bairro">Bairro:</label> | |
| <input type="text" name="bairro" id="bairro" placeholder="Seu Bairro" /> | |
| </li> | |
| <li> | |
| <label for="estado">Estado:</label> | |
| <input type="text" name="estado" id="estado" placeholder="Seu Estado" /> | |
| </li> | |
| <li> | |
| <label for="cidade">Cidade:</label> | |
| <input type="text" name="cidade" id="cidade" placeholder="Sua" Cidade="" /> | |
| </li> | |
| </ul> | |
| </fieldset> | |
| </form> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment