ViaCEP Webservice

[Dexter Morgan 7]

Estou tendo um problema na hora de pegar os conteudos após colocar o CEP código original:

<script type="text/javascript">
function limpa_formulário_cep(){
document.getElementById("rua").value = ("");
document.getElementById("bairro").value = ("");
document.getElementById("cidade").value = ("");
document.getElementById("uf").value = ("");
document.getElementById("ibge").value = ("");
}
function meu_callback(conteudo){
if(!("erro" in conteudo)){
document.getElementById("rua").value = (conteudo.logradouro);
document.getElementById("bairro").value = (conteudo.bairro);
document.getElementById("cidade").value = (conteudo.localidade);
document.getElementById("uf").value = (conteudo.uf);
document.getElementById("ibge").value = (conteudo.ibge);
}
else{
limpa_formulário_cep();
alert("CEP não encontrado.");
}
}
function pesquisacep(valor){
var cep = valor.replace(/\D/g, "");
if(cep != ""){
var validacep = /^[0-9]{8}$/;
if(validacep.test(cep)){
document.getElementById("rua").value = "...";
document.getElementById("bairro").value = "...";
document.getElementById("cidade").value = "...";
document.getElementById("uf").value = "...";
document.getElementById("ibge").value = "...";
var script = document.createElement("script");
script.src = "//viacep.com.br/ws/"+ cep + "/json/?callback=meu_callback";
document.body.appendChild(script);
}
else{
limpa_formulário_cep();
alert("Formato de CEP Inválido.");
}
}
else{
limpa_formulário_cep();
}
};
</script>

<form method="get" action=".">
<label>Cep:
<input name="cep" type="text" id="cep" value="" size="10" maxlength="9" onblur="pesquisacep(this.value);" /></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>

preciso colocar em um sistema de cadastro, porém os campos são preenchidos apenas com ...

echo "<form id=\"loading-button\" name=\"form\" action=\"client_insert.php\" method=\"post\" enctype=\"multipart/form-data\">";

echo "<td width=\"30%\"><input class=\"input\" id=\"cep\" name=\"cep\" type=\"text\" size=\"35\" maxlength=\"9\" onblur=\"pesquisacep(this.value);\" onkeypress=\"maskForm(this, cepForm)\" pattern=\"\d{5}-?\d{3}\" required /></td>";

fiz o teste o problema que só funciona com o form assim:

<form method="get" action=".">

 

[wootzor 103]

Aconselho a não usar acentos na definição de nomes de variáveis e funções.

 

Para além disso, tens algum erro na consola do browser?

 

Finalmente, dá uma olhada neste projecto do gabrieldarezzo. É certo que o exemplo dele está a usar jQuery em vez de apenas JavaScript nativo, mas é capaz de dar uma ajuda.

[gabrieldarezzo 255]

Pow não seja por isso haha:

 

Exemplo de busca por Cep sem jQuery/Plugin/CSS

https://github.com/gabrieldarezzo/gabrieldarezzo.github.io/blob/master/busca_cep/vanilla.html

 

Live Demo:

http://gabrieldarezzo.github.io/busca_cep/vanilla.html

[Dexter Morgan 7]

Muito obrigado pessoal, utilizando o exemplo do gabrieldarezzo funcionou

[angelorubin 142]

Minha contribuição com o tópico, fiz um com Vue.js, Axios, Bulma e ViaCep - aqui