Drop Down Endereço

Gilberto Jr · Agosto 1, 2014

Bom dia;

Mais uma vez aqui pra vocês me ajudarem.

Seguinte, no meu formulario eu tenho o campo CEP, ENDEREÇO, BAIRRO, CIDADE, ESTADO. No campo CEP quando a pessoa digita o CEP e o FOCUS sai do campo ele faz o drop down com o evento ONBLUR.

O codigo do meu formulario é esse.

<form id="signupForm" method="post" action="insertuser.asp" enctype="multipart/form-data">
<table class="tabelaformulariocadastrouserbolao" border="1">
  <tr>
    <td align="right">CEP:</td>
    <td><input id="cep" name="cep" value="" onblur="showEndereco(this.value)" autocomplete="off" type="text"></td>
    <td align="left">  
    </td>
    </tr>
  <tr id="endereco">
    <td align="right">Endereço:</td>
    <td colspan="2"><input type="text" id="endereco" autocomplete="off" value="" name="endereco"></td>
    </tr>
  <tr>
    <td align="right">Cidade:</td>
    <td id="cidade"><input id="cidade" name="cidade" value="" autocomplete="off" type="text"></td>
    <td align="left">UF:
      <input id="telefone" name="uf" value="" autocomplete="off" type="text"></td>
    </tr>
</table>
</form>

E o codigo em AJAX para fazer o GET e buscar os dados é esse.

<script>
function showEndereco(str) {
  if (str=="") {
    document.getElementById("endereco").innerHTML="";
    return;
  } 
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else { // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("endereco").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","endereco.asp?endereco="+str,true);
  xmlhttp.send();

}
</script>

A pagina que recebe os dados é essa

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
Response.AddHeader "Content-Type", "text/html; charset=utf-8"
Response.AddHeader "Pragma", "no-cache"
response.Charset="utf-8"
%>

<%

endereco = replace(request.QueryString("endereco"),"-","")
cidade = replace(request.QueryString("cidade"),"-","")

			set xml = Server.CreateObject("Microsoft.XMLHTTP")
			xml.open "GET", "http://republicavirtual.com.br/web_cep.php?cep='"&endereco&"'&formato=xml" & cat, false
			xml.send
			 
			set objXML = xml.responseXML
			 
			set raiz = objXML.getElementsByTagName("webservicecep")
			set uf = objXML.getElementsByTagName("uf")
			set cidade = objXML.getElementsByTagName("cidade")
			set bairro = objXML.getElementsByTagName("bairro")
			set tipo_logradouro = objXML.getElementsByTagName("tipo_logradouro")
			set logradouro = objXML.getElementsByTagName("logradouro")
			 
			for i = 0 to raiz.length-1
			uf = uf.item(i).text
			cidade = cidade.item(i).text
			bairro = bairro.item(i).text
			tipo_logradouro = tipo_logradouro.item(i).text
			logradouro = logradouro.item(i).text
			next	 
			 
			set xml = nothing
			set objXML = nothing
			'********************************************
		
			
'response.Write("<tr>")
'response.Write("<td align='right'>Endereço:</td>")
response.Write("<td colspan='3'><input type='text' id='endereco' autocomplete='off' value='"&tipo_logradouro&" "&logradouro&"' name='endereco'></td>")
'response.Write("</tr>")
'response.Write("<tr>")
'response.Write("<td align='right'>Cidade:</td>")
response.Write("<td><input id='cidade' name='cidade' value='"&cidade&"' autocomplete='off' type='text'></td>")
'response.Write("<td colspan='2' align='left'>UF:")
response.Write("<input id='telefone' name='uf' value='"&uf&"' autocomplete='off' type='text'></td>")
'response.Write("</tr>")
			
%>
<!--******************************fim consulta cepef-->

O problema é que eu não estou conseguindo jogar os valores dentro os input's do meu formulario.

Alguém já passou por uma situação dessa e poderia me ajudar?

Desde já agradeço!

Att;

Ronaldo Bueno · Agosto 2, 2014

Gilberto,

Tenho isso pronto, amanha coloco aqui, estou fora de sampa.

Arquivo Js

	function Querystring(qs) { 		this.params = {};				if (qs == null) qs = location.search.substring(1, location.search.length);		if (qs.length == 0) return;			qs = qs.replace(/\+/g, ' ');		var args = qs.split('&'); // parse out name/value pairs separated via &					for (var i = 0; i < args.length; i++) {			var pair = args[i].split('=');			var name = decodeURIComponent(pair[0]);						var value = (pair.length==2)				? decodeURIComponent(pair[1])				: name;						this.params[name] = value;		}	}	Querystring.prototype.get = function(key, default_) {		var value = this.params[key];		return (value != null) ? value : default_;	}	Querystring.prototype.contains = function(key) {		var value = this.params[key];		return (value != null);	}	function ajaxInit() {        var req;        try {            req = new ActiveXObject("Microsoft.XMLHTTP");        } catch(e) {            try {                req = new ActiveXObject("Msxml2.XMLHTTP");            } catch(ex) {                try {                    req = new XMLHttpRequest();                } catch(exc) {                    alert("Esse browser não suporta Ajax");                    req = null;                }            }        }        return req;    }    function buscaCEP(valor){		Cep = document.all.cepc.value		ajax = ajaxInit();		ajax.open("GET","clientes-procura-cep.asp?cep="+Cep,true);		ajax.onreadystatechange=function(){			if (ajax.readyState==1){				document.all.enderecoc.value = "Aguarde Carregando ...";			}			if (ajax.readyState==4){				if(ajax.status==200){					var href = ajax.responseText;					var qs = new Querystring( href );										$("input[name='enderecoc']").val( qs.get('endereco') );					$("input[name='bairroc']").val( qs.get('bairro') );					$("input[name='cidadec']").val( qs.get('cidade') );					$("input[name='estadoc']").val( qs.get('estado') );					$("input[name='siglac']").val( qs.get('sigla') );					}			}			}		ajax.setRequestHeader("Pragma", "no-cache");        ajax.send(null);	}

No ASP que busca o cep a linha de retorno tem que estar com string

Response.Write "<a href=""?cep="&cep&"&endereco="&endereco&"&bairro="&nomeBairro&"&cidade="&nomeCidade&"&estado="&nomeEstado&"&sigla="&siglaEstado&""

e no campo CEP, não recomendo do jeito que esta fazendo: ao perder foco, eu coloco sempre ao digitar também

onKeyDown="buscaCEP(this);" onKeyUp="buscaCEP(this);"

xanburzum · Agosto 2, 2014

coloquei um jQuery que faz isso também no fórum de JS.

Gilberto Jr · Agosto 4, 2014

Bom dia

Ronaldo Bueno

Tentei fazer aqui e não consegui.

Na página que digito o cep ficou com o seguinte código.

default.asp

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Busca Endereço</title>
<script>
	function Querystring(qs) { 
		this.params = {};
		
		if (qs == null) qs = location.search.substring(1, location.search.length);
		if (qs.length == 0) return;
	

		qs = qs.replace(/\+/g, ' ');
		var args = qs.split('&'); // parse out name/value pairs separated via &
		
			for (var i = 0; i < args.length; i++) {
			var pair = args[i].split('=');
			var name = decodeURIComponent(pair[0]);
			
			var value = (pair.length==2)
				? decodeURIComponent(pair[1])
				: name;
			
			this.params[name] = value;
		}
	}

	Querystring.prototype.get = function(key, default_) {
		var value = this.params[key];
		return (value != null) ? value : default_;
	}

	Querystring.prototype.contains = function(key) {
		var value = this.params[key];
		return (value != null);
	}

	function ajaxInit() {
        var req;
        try {
            req = new ActiveXObject("Microsoft.XMLHTTP");
        } catch(e) {
            try {
                req = new ActiveXObject("Msxml2.XMLHTTP");
            } catch(ex) {
                try {
                    req = new XMLHttpRequest();
                } catch(exc) {
                    alert("Esse browser não suporta Ajax");
                    req = null;
                }
            }
        }
        return req;
    }


    function buscaCEP(valor){
		Cep = document.all.cepc.value
		ajax = ajaxInit();
		ajax.open("GET","clientes-procura-cep.asp?cep="+Cep,true);
		ajax.onreadystatechange=function(){
			if (ajax.readyState==1){
				document.all.enderecoc.value = "Aguarde Carregando ...";
			}
			if (ajax.readyState==4){
				if(ajax.status==200){
					var href = ajax.responseText;
					var qs = new Querystring( href );
					
					$("input[name='enderecoc']").val( qs.get('endereco') );
					$("input[name='bairroc']").val( qs.get('bairro') );
					$("input[name='cidadec']").val( qs.get('cidade') );
					$("input[name='estadoc']").val( qs.get('estado') );
					//$("input[name='siglac']").val( qs.get('sigla') );
	
				}
			}
			}
		ajax.setRequestHeader("Pragma", "no-cache");
        ajax.send(null);
	}
</script>
</head>

<body>
<p>CEP</p>
<p><input type="text" id="endereco" onKeyDown="buscaCEP(this);" onKeyUp="buscaCEP(this);" autocomplete="off" value="" name="cep"></p>

<p>ENDEREÇO</p>
<p><input type="text" id="endereco" autocomplete="off" value="" name="enderecoc"></p>

<p>BAIRRO</p>
<p><input type="text" id="endereco" autocomplete="off" value="" name="bairroc"></p>

<p>CIDADE</p>
<p><input type="text" id="endereco" autocomplete="off" value="" name="cidadec"></p>

<p>ESTADO</p>
<p><input type="text" id="endereco" autocomplete="off" value="" name="estadoc"></p>

</body>
</html>

Na pagina que busca o endereço ficou com o seguinte código

clientes-procura-cep.asp

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
Response.AddHeader "Content-Type", "text/html; charset=utf-8"
Response.AddHeader "Pragma", "no-cache"
response.Charset="utf-8"
%>
<%

cep = replace(request.QueryString("cep"),"-","")
'cidade = replace(request.QueryString("cidade"),"-","")

			set xml = Server.CreateObject("Microsoft.XMLHTTP")
			xml.open "GET", "http://republicavirtual.com.br/web_cep.php?cep='"&cep&"'&formato=xml" & cat, false
			xml.send
			 
			set objXML = xml.responseXML
			 
			set raiz = objXML.getElementsByTagName("webservicecep")
			set uf = objXML.getElementsByTagName("uf")
			set cidade = objXML.getElementsByTagName("cidade")
			set bairro = objXML.getElementsByTagName("bairro")
			set tipo_logradouro = objXML.getElementsByTagName("tipo_logradouro")
			set logradouro = objXML.getElementsByTagName("logradouro")
			 
			for i = 0 to raiz.length-1
			estado = uf.item(i).text
			cidade = cidade.item(i).text
			bairro = bairro.item(i).text
			endereco = tipo_logradouro.item(i).text&" "&logradouro.item(i).text
			next	 
			 
			set xml = nothing
			set objXML = nothing
			'********************************************
		
			
%>

Qual foi o erro que não deixou funcionar?

Att;

Ronaldo Bueno · Agosto 4, 2014

Primeiros erros que vi olhando a grosso modo

- replace do traco do cep, tem que ser na requisição, faz depois de:

Cep = document.all.cep.value

- os nomes do campos deixa tudo como

cep

endereço

bairro

cidade

estado

e tira os Ids iguais, deixa assim

exemplo:

e para fazer a requisição eu uso banco de dados próprio, para pegar desse virtual acho que tem que adaptar mais coisa

Gilberto Jr · Agosto 4, 2014

Bom dia;

Consegui esse script que faz o que eu quero.

<!doctype html>
<html lang="pt-br">
    <head>
        <title>Exemplo da consulta de CEP</title>
        <meta charset="UTF-8">
        <style type="text/css">
            .ocultar{display:none}            
        </style>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                /**
                 * Atribuo ao elemento #cep, o evento blur
                 * Blur, dispara uma ação, quando o foco
                 * sair do elemento, no nosso caso cep 
                 */
                $("#cep").blur(function(){
                    /**
                     * Resgatamos o valor do campo #cep
                     * usamos o replace, pra remover tudo que não for numérico,
                     * com uma expressão regular
                     */
                    var cep     = $(this).val().replace(/[^0-9]/, ''); 
                    //Armazena a referência da div#boxCampos
                    var boxes   = $("#boxCampos");
                     //Armazena a referência da div#mensagemErro
                    var msgErro = $("#mensagemErro");
                    
                    /**
                     * Por padrão, vamos ocultar
                     * div#boxCampos e também #mensagemErro
                     */
                    boxes.addClass('ocultar');
                    msgErro.addClass('ocultar');
                    
                    //Verifica se não está vazio
                    if(cep !== ""){
                         //Cria variável com a URL da consulta, passando o CEP
                         var url = 'http://cep.correiocontrol.com.br/'+cep+'.json';
                         
                         /**
                          * Fazemos um requisição a URL, como vamos retornar json, 
                          * usamos o método $.getJSON;
                          * Que é composta pela URL, e a função que vai retorna os dados
                          * o qual passamos a variável json, para recuperar os valores
                          */
                         $.getJSON(url, function(json){
                                //Atribuimos o valor aos inputs
                                $("#rua").val(json.logradouro);
                                $("#bairro").val(json.bairro);
                                $("#cidade").val(json.localidade);
                                $("#uf").val(json.uf);
                                /**
                                 * Removemos a classe ocultar, para mostrar os campos
                                 * preenchidos
                                 */
                                boxes.removeClass('ocultar');
                                
                                //Usamos o método fail, caso não retorne nada
                            }).fail(function(){
                             //Não retornando um valor válido, ele mostra a mensagem
                             msgErro.removeClass('ocultar').html('CEP inexistente')
							 //var boxes   = $("#boxCampos");
                        });
                    }
                });
            });
        </script>
    </head>
    <body>
        <form action="" method="post">
            <label for="cep"> CEP: </label> <input type="text" name="cep" id="cep" /><br />
            <!--Caso não exista o CEP, irá mostrar uma mensagem aqui-->
            <div id="mensagemErro" class="ocultar"></div>
            
            <!--Aqui onde estarão os campos que serão preenchidos-->
            <div id="boxCampos">
                <label for="rua">Rua</label> <input type="text" name="rua" id="rua" /> <br />
                <label for="bairro">Bairro</label> <input type="text" name="bairro" id="bairro" /></label><br />
                <label for="cidade">Cidade</label> <input type="text" name="cidade" id="cidade" /></label><br />
                <label for="uf">UF</label> <input type="text" name="uf" id="uf" /></label><br />
            </div>
        </form>
    </body>
</html>

Porem o seguinte, se a pessoa digitar o CEP inexistente ele vai mostrar a mensagem abaixo CEP inexistente e apaga a div boxCampos que mostra os dados encontrados.

Eu gostaria que aparecesse a mensagem de CEP INEXISTENTE mas não apagasse os campos onde vai as informações.

Como deve fazer nesse jquery para que pare de sumir a a div boxCampos caso o CEP seja INEXISTENTE?

Att;

xanburzum · Agosto 4, 2014

faz um if nele e caso não tenha exibe outra DIV

Gilberto Jr · Agosto 4, 2014

Consegui esse código aqui que resolveu o meu problema.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="utf-8" />
<title></title>
<script>
function atualizacep(cep){
cep = cep.replace(/\D/g,"")
url="http://cep.correiocontrol.com.br/"+cep+".js"
s=document.createElement('script')
s.setAttribute('charset','utf-8')
s.src=url
document.querySelector('head').appendChild(s)
}

function correiocontrolcep(valor){
if (valor.erro) {
alert('Cep não encontrado');
//document.getElementById("cep").focus();
//document.getElementById("cep").value = "";
return;
};
document.getElementById('logradouro').value=valor.logradouro
document.getElementById('bairro').value=valor.bairro
document.getElementById('localidade').value=valor.localidade
document.getElementById('uf').value=valor.uf
}

</script>
</head>
<body>
<h1>Busca de cep do Correio</h1>
<label>CEP</label>
<input id="cep" onblur="atualizacep(this.value)" /><br />
<label>Logradouro</label>
<input id="logradouro" /><br />
<label>Bairro</label>
<input id="bairro" /><br />
<label>Cidade</label>
<input id="localidade" /><br />
<label>UF</label>
<input id="uf" />
</body>
</html>

Att;

xanburzum · Agosto 6, 2014

ficou legal...

Arquivado

Drop Down Endereço

Recommended Posts

Gilberto Jr 26

Compartilhar este post

Link para o post

Compartilhar em outros sites

Ronaldo Bueno 23

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gilberto Jr 26

Compartilhar este post

Link para o post

Compartilhar em outros sites

Ronaldo Bueno 23

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gilberto Jr 26

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gilberto Jr 26

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Dúvida em Relação a Teclas

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Fóruns

Tempo Real

Informação importante