Consultar Cep - Dúvida

Cleiton_Conceicao · Novembro 14, 2019, 1:54pm

o que tem de errado no meu código?, porque não consigo consultar CEP de jeito nenhum

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
    <title>Leone System - Inovação Tecnológica</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        h11 {
    color:red;
}

#logo {
        width:50%;
        height:50%;
}

.panel-heading{
    font-size:150%;
}
.panel-heading{
    position: fixed !important;
    width: 100% !important;
    z-index: 999 !important; 
    border-radius: 0 !important;    
   background: linear-gradient(to bottom, #079a8d, #148eb1)!important;   
   box-shadow:4px 2px 2px #065186 !important;
}

body{
 
  background:#08b0e1 !important;
  }

.panel-body{
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#00aee0))!important;
  background: linear-gradient(to bottom, #ffffff, #00aee0)!important;
  border:none !important;
  position: relative;
}
    </style>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<!DOCTYPE html>
<head>

    
</head>
<body>

<form class="form-horizontal" name="form1"> 

<div class=" panel-primary">
    <div class="panel-heading" style="text-align:center;">Cadastro de Fornecedor</div>
    
    <div class="panel-body">
<div class="form-group">

<div class="col-md-11 control-label">
        <p class="help-block"><h11>*</h11> Campo Obrigatório </p>
</div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-2 control-label" for="Nome">Fornecedor <h11>*</h11></label>  
  <div class="col-md-5">
  <input id="Nome" name="Nome" placeholder="PREENCHA COM O NOME DA EMPRESA OU COM O SEU PRÓPRIO NOME" class="form-control input-md" required="" type="text">
  </div>
   <label class="col-md-2 control-label" for="tipo">Tipo de Fornecedor <h11>*</h11></label>
  <div class="col-md-3"> 
    <label required="" class="radio-inline" for="radios-0" >
      <input name="tipo" id="PJ" value="PJ" for="tipo" type="radio" checked>
      Pessoa Jurídica
    </label> 
    <label class="radio-inline" for="radios-1">
      <input name="tipo" id="PF" value="PF" for="tipo" type="radio">
      Pessoa Física
    </label>
  </div>
</div>
<div class="form-group">
  <label class="col-md-2 control-label" for="Nome">Seguimento <h11>*</h11></label>  
  <div class="col-md-10">
  <input id="seguimento" name="seguimento" placeholder="Ex: COMÉRCIO VAREJISTA DE MATERIAIS DE CONSTRUÇÃO EM GERAL" class="form-control input-md" required="" type="text">
  </div>

</div>
<!-- Text input-->
<!-- Prepended text-->
<div class="form-group">
  <label class="col-md-2 control-label" for="cpf">CPF <h11>*</h11></label>
  <div class="col-md-2">
    <div class="input-group">
      <input id="cpf" name="cpf" class="form-control" type="text"
onKeyPress="MascaraCPF(form1.cpf);" maxlength="14">
    </div>
  </div>
    <label class="col-md-1 control-label" for="cnpj">CNPJ <h11>*</h11></label>
     <div class="col-md-2">
    <div class="input-group">
      <input id="cnpj" name="cnpj" class="form-control" type="text" maxlength="18" onKeyPress="MascaraCNPJ(form1.cnpj);" 
maxlength="18">
    </div>
  </div>
</div> 

<div class="form-group">
  <label class="col-md-2 control-label" for="celular">Celular <h11>*</h11></label>
  <div class="col-md-2">
    <div class="input-group">
      <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
      <input id="celular" name="celular" class="form-control" placeholder="XX XXXXX-XXXX" required="" type="text" maxlength="15">
    </div>
  </div>
  
    <label class="col-md-1 control-label" for="telefone">Telefone</label>
     <div class="col-md-2">
    <div class="input-group">
      <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
      <input id="telefone" name="telefone" class="form-control" placeholder="XX XXXXX-XXXX" type="text" maxlength="15" >
    </div>
  </div>
 </div> 
<!-- Prepended text-->
<div class="form-group">
  <label class="col-md-2 control-label" for="prependedtext">Email <h11>*</h11></label>
  <div class="col-md-5">
    <div class="input-group">
      <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
      <input id="prependedtext" name="prependedtext" class="form-control" placeholder="email@email.com" required="" type="text" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" >
    </div>
  </div>
</div>
<div class="form-group">
   <label class="col-md-2 control-label" for="receber">Receber E-mails de <h11>*</h11></label>
  <div class="col-md-10"> 
    <label required="" class="radio-inline" for="radios-0" >
      <input name="receber" id="1" value="1" for="receber" type="radio" checked>
      Apenas do meu município
    </label> 
    <label class="radio-inline" for="radios-1">
      <input name="receber" id="2" value="2" for="receber" type="radio">
      Apenas do meu município e redondezas
    </label>
    <label class="radio-inline" for="radios-1">
      <input name="receber" id="3" value="3" for="receber" type="radio">
      Apenas do meu estado
    </label>
    <label class="radio-inline" for="radios-1">
      <input name="receber" id="3" value="3" for="receber" type="radio">
      Todo o Brasil
    </label>
  </div>
</div>
<!-- Search input-->
<div class="form-group">
  <label class="col-md-2 control-label" for="CEP">CEP <h11>*</h11></label>
  <div class="col-md-2">
    <input id="cep" name="cep" placeholder="Apenas números" class="form-control input-md" required="" value="" type="search" onkeypress="mascara(this, '#####-###')" maxlength="9">
  </div>
  <div class="col-md-2">
      <button type="button" class="btn btn-primary" onclick="pesquisacep(cep.value)">Pesquisar</button>
    </div>
</div>

<!-- Prepended text-->
<div class="form-group">
  <label class="col-md-2 control-label" for="prependedtext">Endereço</label>
  <div class="col-md-4">
    <div class="input-group">
      <span class="input-group-addon">Rua</span>
      <input id="rua" name="rua" class="form-control" placeholder="" required=""  type="text">
    </div>
    
  </div>
    <div class="col-md-2">
    <div class="input-group">
      <span class="input-group-addon">Nº <h11>*</h11></span>
      <input id="numero" name="numero" class="form-control" placeholder="" required=""  type="text">
    </div>
    
  </div>
  
  <div class="col-md-3">
    <div class="input-group">
      <span class="input-group-addon">Bairro</span>
      <input id="bairro" name="bairro" class="form-control" placeholder="" required=""type="text">
    </div>
    
  </div>
</div>

<div class="form-group">
  <label class="col-md-2 control-label" for="prependedtext"></label>
  <div class="col-md-4">
    <div class="input-group">
      <span class="input-group-addon">Cidade</span>
      <input id="cidade" name="cidade" class="form-control" placeholder="" required=""   type="text">
    </div>
    
  </div>
  
   <div class="col-md-2">
    <div class="input-group">
      <span class="input-group-addon">Estado</span>
      <input id="estado" name="estado" class="form-control" placeholder="" required="" type="text">
    </div>
    
  </div>
</div>



<!-- Button (Double) -->
<div class="form-group">
  <label class="col-md-2 control-label" for="Cadastrar"></label>
  <div class="col-md-8">
    <button id="Cadastrar" name="Cadastrar" class="btn btn-success" type="Submit">Cadastrar</button>
    <button id="Cancelar" name="Cancelar" class="btn btn-danger" type="Reset">Cancelar</button>
  </div>
</div>

</div>
</div>


</form>

</body>
</html>
<script type="text/javascript">

    
    function limpa_formulario_cep() {
            //Limpa valores do formulário de cep.
            document.getElementById('rua').value=("");
            document.getElementById('bairro').value=("");
            document.getElementById('cidade').value=("");
            document.getElementById('estado').value=("");
            
    }

    function meu_callback(conteudo) {
        if (!("erro" in conteudo)) {
            //Atualiza os campos com os valores.
            document.getElementById('rua').value=(conteudo.logradouro);
            document.getElementById('bairro').value=(conteudo.bairro);
            document.getElementById('cidade').value=(conteudo.localidade);
            document.getElementById('estado').value=(conteudo.uf);
        } //end if.
        else {
            //CEP não Encontrado.
            limpa_formulario_cep();
            alert("CEP não encontrado.");
            document.getElementById('cep').value=("");
        }
    }
        
    function pesquisacep(valor) {

        //Nova variável "cep" somente com dígitos.

		
        var cep = valor.replace(/\D/g, '');

        //Verifica se campo cep possui valor informado.
        if (cep !== "") {

            //Expressão regular para validar o CEP.
            var validacep = /^[0-9]{8}$/;

            //Valida o formato do CEP.
            if(validacep.test(cep)) {

                //Preenche os campos com "..." enquanto consulta webservice.
                document.getElementById('rua').value="...";
                document.getElementById('bairro').value="...";
                document.getElementById('cidade').value="...";
                document.getElementById('estado').value="...";

                //Cria um elemento javascript.
                var script = document.createElement('script');

                //Sincroniza com o callback.
                script.src = '//viacep.com.br/ws/'+ cep + '/json/?callback=meu_callback';

                //Insere script no documento e carrega o conteúdo.
                document.body.appendChild(script);

            } //end if.
            else {
                //cep é inválido.
                limpa_formulario_cep();
                alert("Formato de CEP inválido.");
            }
        } //end if.
        else {
            //cep sem valor, limpa formulário.
            limpa_formulario_cep();
        }
    }

 function mascaraTelefone(o,f){
    v_obj=o
    v_fun=f
    setTimeout("execmascara()",1)
}
function execmascara(){
    v_obj.value=v_fun(v_obj.value)
}
function mtel(v){
    v=v.replace(/\D/g,"");             //Remove tudo o que não é dígito
    v=v.replace(/^(\d{2})(\d)/g,"($1) $2"); //Coloca parênteses em volta dos dois primeiros dígitos
    v=v.replace(/(\d)(\d{4})$/,"$1-$2");    //Coloca hífen entre o quarto e o quinto dígitos
    return v;
}
function id( el ){
    return document.getElementById( el );
}
window.onload = function(){
    id('telefone').onkeyup = function(){
        mascaraTelefone( this, mtel );
    }
	    id('celular').onkeyup = function(){
        mascaraTelefone( this, mtel );
    }
}

 function mascara(t, mask){
 var i = t.value.length;
 var saida = mask.substring(1,0);
 var texto = mask.substring(i)
 if (texto.substring(0,1) != saida){
 t.value += texto.substring(0,1);
 }
 }
function MascaraCPF(cpf){
        if(mascaraInteiro(cpf)==false){
                event.returnValue = false;
        }       
        return formataCampo(cpf, '000.000.000-00', event);
}

//valida telefone
function ValidaTelefone(tel){
        exp = /\(\d{2}\)\ \d{4}\-\d{4}/
        if(!exp.test(tel.value))
                alert('Numero de Telefone Invalido!');
}
function mascaraInteiro(){
        if (event.keyCode < 48 || event.keyCode > 57){
                event.returnValue = false;
                return false;
        }
        return true;
}
function formataCampo(campo, Mascara, evento) { 
        var boleanoMascara; 

        var Digitato = evento.keyCode;
        exp = /\-|\.|\/|\(|\)| /g
        campoSoNumeros = campo.value.toString().replace( exp, "" ); 

        var posicaoCampo = 0;    
        var NovoValorCampo="";
        var TamanhoMascara = campoSoNumeros.length;; 

        if (Digitato != 8) { // backspace 
                for(i=0; i<= TamanhoMascara; i++) { 
                        boleanoMascara  = ((Mascara.charAt(i) == "-") || (Mascara.charAt(i) == ".")
                                                                || (Mascara.charAt(i) == "/")) 
                        boleanoMascara  = boleanoMascara || ((Mascara.charAt(i) == "(") 
                                                                || (Mascara.charAt(i) == ")") || (Mascara.charAt(i) == " ")) 
                        if (boleanoMascara) { 
                                NovoValorCampo += Mascara.charAt(i); 
                                  TamanhoMascara++;
                        }else { 
                                NovoValorCampo += campoSoNumeros.charAt(posicaoCampo); 
                                posicaoCampo++; 
                          }              
                  }      
                campo.value = NovoValorCampo;
                  return true; 
        }else { 
                return true; 
        }
}
function MascaraCNPJ(cnpj){
        if(mascaraInteiro(cnpj)==false){
                event.returnValue = false;
        }       
        return formataCampo(cnpj, '00.000.000/0000-00', event);
}
function ValidarCNPJ(ObjCnpj){
        var cnpj = ObjCnpj.value;
        var valida = new Array(6,5,4,3,2,9,8,7,6,5,4,3,2);
        var dig1= new Number;
        var dig2= new Number;

        exp = /\.|\-|\//g
        cnpj = cnpj.toString().replace( exp, "" ); 
        var digito = new Number(eval(cnpj.charAt(12)+cnpj.charAt(13)));

        for(i = 0; i<valida.length; i++){
                dig1 += (i>0? (cnpj.charAt(i-1)*valida[i]):0);  
                dig2 += cnpj.charAt(i)*valida[i];       
        }
        dig1 = (((dig1%11)<2)? 0:(11-(dig1%11)));
        dig2 = (((dig2%11)<2)? 0:(11-(dig2%11)));

        if(((dig1*10)+dig2) != digito)  
                alert('CNPJ Invalido!');

}
</script>

mariodevjunior · Novembro 14, 2019, 2:00pm

Mais ocorre algum erro ou algo do tipo?

Vê se na ferramenta do desenvolvedor do chrome(F12) na aba Console vê se não mostra algo relacionada ao script… lá costuma mostrar alguns erros, talvez ajude…

Dragoon · Novembro 14, 2019, 2:24pm

Cleiton_Conceicao:

Leone System - Inovação Tecnológica h11 { color:red; } #logo { width:50%; height:50%; } .panel-heading{ font-size:150%; } .panel-heading{ position: fixed !important; width: 100% !important; z-index: 999 !important; border-radius: 0 !important; background: linear-gradient(to bottom, #079a8d, #148eb1)!important; box-shadow:4px 2px 2px #065186 !important; } body{ background:#08b0e1 !important; } .panel-body{ content: ""; width: 100%; height: 100%; display: block; background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#00aee0))!important; background: linear-gradient(to bottom, #ffffff, #00aee0)!important; border:none !important; position: relative; }

Cadastro de Fornecedor

* Campo Obrigatório

Fornecedor *

Tipo de Fornecedor *
Pessoa Jurídica Pessoa Física

Seguimento *

CPF *

CNPJ *

Celular *

Telefone

Email *

Receber E-mails de *
Apenas do meu município Apenas do meu município e redondezas Apenas do meu estado Todo o Brasil

CEP *

Pesquisar

Endereço

Rua

Nº *

Bairro

Cidade

Estado

Cadastrar Cancelar

Porque não está funcionando?

O seu código está errado, e o jeito que você fez não é melhor forma, pode fazer assim:

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('estado').value="...";

			$.get('https://viacep.com.br/ws/'+cep+'/json/')
				.then(function(result) {
					if (result) {
						document.getElementById('rua').value=result.logradouro;
						document.getElementById('bairro').value=result.bairro;
						document.getElementById('cidade').value=result.localidade;
						document.getElementById('estado').value=result.uf;
					}
				});

		}
		else {		
			limpa_formulario_cep();
			alert("Formato de CEP inválido.");
		}
	}
	else {	
		limpa_formulario_cep();
	}
}

mas, mesmo assim esse código mistura um Javascript Puro com jQuery, quando eu faço assim eu escolho colocar tudo jQuery …

Mas, fica ao seu encargo e outra coisa precisa debugar o código na janela console do navegador com a tecla F12 em busca de possíveis erros

Cleiton_Conceicao · Novembro 15, 2019, 2:40am

obrigado pelas ajuda e pela dica.

Consultar Cep - Dúvida

Cursos de Mobile

Cursos de Programação

Cursos de Front-end

Cursos de DevOps

Cursos de Design & UX

Cursos de Business

Cursos de Data & BI