Publicado em 26 de jun.

Página De Login Com Cep + Criar Conta Com Endereço Preenchido

#javascript #cadastro de clientes #cep ajax #login #oscommerce

Oi. eu estou tentando fazer que o usuário digite o CEP na página de login e quando ele clicar e for pra página de cadastro autopreencher o endereço cep em ajax,

o cep em ajax já esta funcionando mas com o evento burn (?) que é quando o usuário digita o campo cep e sai do campo, neste momento o cep é preenchido.

Exemplo? OK

https://www.apopular.com.br/login.php

clique em novo cliente

o que eu já fiz ajuntando códigos da NET

no login.php

 <form method="post" action="create_account.php" onsubmit="cep()">
	<strong>CEP:</strong>
	<input type="text" name="cepLogin" size="15" class="InputBorda">

 <input type="image" src="/images/login.gif" alt="Criar conta">

 </form>

e no create_account

No campo CEP

<?php echo tep_draw_input_field('postcode', '', ' size="9" maxlength="9" class="InputBorda" id="cep" value=" ' . $_POST["cepLogin"] . '"') . ' ' . (tep_not_null(ENTRY_POST_CODE_TEXT) ? '<span class="inputRequirement">' . ENTRY_POST_CODE_TEXT . '</span>': ''); ?>

Ainda no create_account ( coloquei o jquery que preenche o CEP no fim do documento)

<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]/, "");

 Eu tentei trocar

 

 

<body onload="cep()">

$("#cep").onLoad(function(){

Alguem pode me ajudar?

Obriogadão,
Marcelo

Discussão (10)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Snowden· 26 de jun.

add $.trigger()

$('#cep').blur(function()
 {
 [...]
 }
).trigger('blur');

Maujor· 26 de jun.

Antes de mais nada você precisa corrigir o carregamento da jQuery nas páginas do seu site.
Seu site usa o protocolo seguro HTTPS e a jQuery está sendo solicitada de um CDN com protolocolo HTTP.
Isso não funciona!

angelorubin· 26 de jun.

Já ouviu falar de vuejs?

http://www.vedovelli.com.br/web-development/vue-js-data-binding-e-componentes/

MarcDu· 27 de jun.

add $.trigger()

$('#cep').blur(function()
 {
 [...]
 }
).trigger('blur');

Eu não entendi onde colocar este código , eu acho que é aqui:

<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 = "https://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>
 <!-- FIM - Preencho o endereço a partir do CEP //-->

 return false;

 }

 // 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(){
	$('#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;
 }
 ).trigger('blur');

Mas não carrega

>
Antes de mais nada você precisa corrigir o carregamento da jQuery nas páginas do seu site.

Seu site usa o protocolo seguro HTTPS e a jQuery está sendo solicitada de um CDN com protolocolo HTTP.

Isso não funciona!

Obrigado pelqa dica, mas eu não tenho idéia do que fazer, quando é

>
Já ouviu falar de vuejs?

http://www.vedovelli.com.br/web-development/vue-js-data-binding-e-componentes/

Obrigadão, eu vou tentar ler com calma pra ver se entendo a idéia

MarcDu· 28 de jun.

@Hugo Sóstenes

Eu li todos os exemplos, mesmo e testei pra me familializar, o único que eu consegui fazer funcionar foi o " submit" , mas não é o que eu preciso, o seu exemplo de texto parece mega simples, mas eu não consegui implementar , da erro no

) <-----
.trigger('blur');

e não completa os campos, desculpa, mas o que eu estou fazendo de errado?

<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(){
// var event = jQuery.Event( "submit" );

$('#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 = "https://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){}
 });
 });

)
.trigger('blur');
 </script>
 <!-- FIM - Preencho o endereço a partir do CEP //-->

angelorubin· 29 de jun.

Aqui um exemplo que montei outro dia, veja se ajuda - http://codepen.io/angelorubin/pen/ZGBGQW

Snowden· 29 de jun.

oque aparece no console? (Ctrl+Shif+J)

MarcDu· 29 de jun.

oque aparece no console? (Ctrl+Shif+J)

eu copiei

"Invalid App Id: Must be a number or numeric string representing the application id." all.js:64:238
"FB.getLoginStatus() called before calling FB.init()." all.js:64:238
Este site usa um certificado SHA-1; é recomendado o uso de certificados com os algoritmos da assinatura que usem funções hash mais fortes que SHA-1.[Saiba mais] uol-text-regular.woff
Este site usa um certificado SHA-1; é recomendado o uso de certificados com os algoritmos da assinatura que usem funções hash mais fortes que SHA-1.[Saiba mais] ico-config.png
Este site usa um certificado SHA-1; é recomendado o uso de certificados com os algoritmos da assinatura que usem funções hash mais fortes que SHA-1.[Saiba mais] 1056650882
Este site usa um certificado SHA-1; é recomendado o uso de certificados com os algoritmos da assinatura que usem funções hash mais fortes que SHA-1.[Saiba mais] loading.svg
Este site usa um certificado SHA-1; é recomendado o uso de certificados com os algoritmos da assinatura que usem funções hash mais fortes que SHA-1.[Saiba mais] bg-transactions.png
Este site usa um certificado SHA-1; é recomendado o uso de certificados com os algoritmos da assinatura que usem funções hash mais fortes que SHA-1.[Saiba mais] uol-text-bold.woff
Este site usa um certificado SHA-1; é recomendado o uso de certificados com os algoritmos da assinatura que usem funções hash mais fortes que SHA-1.[Saiba mais] uol-text-light.woff
Este site usa um certificado SHA-1; é recomendado o uso de certificados com os algoritmos da assinatura que usem funções hash mais fortes que SHA-1.[Saiba mais] tr
Este site usa um certificado SHA-1; é recomendado o uso de certificados com os algoritmos da assinatura que usem funções hash mais fortes que SHA-1.[Saiba mais] r
nenhum elemento encontrado conn:1:1
O método getPreventDefault() não deve mais ser usado. No lugar, use defaultPrevented. jquery-1.8.2.min.js:2:0
Este site usa um certificado SHA-1; é recomendado o uso de certificados com os algoritmos da assinatura que usem funções hash mais fortes que SHA-1.[Saiba mais] venda-pela-internet-1422283799098_470x350.gif
Este site usa um certificado SHA-1; é recomendado o uso de certificados com os algoritmos da assinatura que usem funções hash mais fortes que SHA-1.[Saiba mais] bg-maquininha-video3-1428433589843_1496x506.jpg
Este site usa um certificado SHA-1; é recomendado o uso de certificados com os algoritmos da assinatura que usem funções hash mais fortes que SHA-1.[Saiba mais] modal.sjs
Este site usa um certificado SHA-1; é recomendado o uso de certificados com os algoritmos da assinatura que usem funções hash mais fortes que SHA-1.[Saiba mais] icos-ul-maq-video-1427842803741_18x121.png
Este site usa um certificado SHA-1; é recomendado o uso de certificados com os algoritmos da assinatura que usem funções hash mais fortes que SHA-1.[Saiba mais] 1056650882
Este site usa um certificado SHA-1; é recomendado o uso de certificados com os algoritmos da assinatura que usem funções hash mais fortes que SHA-1.[Saiba mais] activeview
Este site usa um certificado SHA-1; é recomendado o uso de certificados com os algoritmos da assinatura que usem funções hash mais fortes que SHA-1.[Saiba mais] activeview
Este site usa um certificado SHA-1; é recomendado o uso de certificados com os algoritmos da assinatura que usem funções hash mais fortes que SHA-1.[Saiba mais] gen_204
Este site usa um certificado SHA-1; é recomendado o uso de certificados com os algoritmos da assinatura que usem funções hash mais fortes que SHA-1.[Saiba mais] all.js
Bloqueado carregamento de conteúdo ativo mesclado “http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js”[Saiba mais] login.php
ReferenceError: jQuery is not defined login.php:540:0
Este site usa um certificado SHA-1; é recomendado o uso de certificados com os algoritmos da assinatura que usem funções hash mais fortes que SHA-1.[Saiba mais] analytics.js
Este site usa um certificado SHA-1; é recomendado o uso de certificados com os algoritmos da assinatura que usem funções hash mais fortes que SHA-1.[Saiba mais] collect
Este site usa um certificado SHA-1; é recomendado o uso de certificados com os algoritmos da assinatura que usem funções hash mais fortes que SHA-1.[Saiba mais] ping
Este site usa um certificado SHA-1; é recomendado o uso de certificados com os algoritmos da assinatura que usem funções hash mais fortes que SHA-1.[Saiba mais] like_box.php

fbstatic-a.akamaihd.net : server does not support RFC 5746, see CVE-2009-3555 <desconhecido>
fbcdn-profile-a.akamaihd.net : server does not support RFC 5746, see CVE-2009-3555 <desconhecido>

ReferenceError: cep is not defined login.php:1:0
Um formulário foi enviado com a codificação windows-1252. Ela não possui todos os caracteres Unicode, portanto os dados do usuário podem ter sido corrompidos. Para evitar este problema, a página deve ser modificada para que o formulário seja enviado com a codificação UTF-8. Isso pode ser feito modificando a codificação da própria página para UTF-8 ou especificando accept-charset=utf-8 no elemento form. login.php
Bloqueado carregamento de conteúdo ativo mesclado “http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js”[Saiba mais] create_account.php
String vazia passada para getElementById(). lytebox.js:1270:0
ReferenceError: jQuery is not defined create_account.php:1114:0
SyntaxError: expected expression, got '}' create_account.php:1274:0
Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead jquery-1.9.0.min.js:4:0
"The "fb-root" div has not been created, auto-creating" all.js:64:238
String vazia passada para getElementById(). lytebox.js:1270:0
TypeError: cep is not a function create_account.php:1:0
Este site usa um certificado SHA-1; é recomendado o uso de certificados com os algoritmos da assinatura que usem funções hash mais fortes que SHA-1.[Saiba mais] ping
"O URL informado não é permitido pela configuração do aplicativo: Uma ou mais dos URLs fornecidos não são permitidos nas configurações do aplicativo. O URL deve corresponder ao URL do site ou URL do Canvas, ou o domínio deve ser um subdomínio de um dos domínios do aplicativo." ping:1:50
Este site usa um certificado SHA-1; é recomendado o uso de certificados com os algoritmos da assinatura que usem funções hash mais fortes que SHA-1.[Saiba mais]

Snowden· 29 de jun.

troque

<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(){
// var event = jQuery.Event( "submit" );

$('#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 = "https://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){}
 });
 });

}
.trigger('blur');
 </script>

por

$('#cep').blur(function(){
 var cep = this.value.replace(/[^0-9]/, '');
 if(cep.length != 8) return false;
 $.getJSON('//viacep.com.br/ws/'+cep+'/json/', function(dadosRetorno){
 if (typeof dadosRetorno.erro == 'undefined'){
 $("#endereco").val(dadosRetorno.logradouro);
 $("#bairro").val(dadosRetorno.bairro);
 $("#cidade").val(dadosRetorno.localidade);
 $("#uf").val(dadosRetorno.uf);
 }
 });
}).trigger('blur');

E aponte para todos os links sem o protocolo http/https

exemplo:

<script type='text/javascript' src='http://ajax.googleapis.com.../min.js'></script>

<script type='text/javascript' src='//ajax.googleapis.com.../min.js'></script>

MarcDu· 29 de jun.

Hugo Sóstenes

Puxa, não sei nem como te agradecer, você não deu uma dica, você reescreveu, muito, muito, muito obrigado Hugo, se algum dia eu puder retribuir por favor me contacte,

Muito obrigado!!!!!!!!