Friends I’m trying to do a zip search using javascript, where am I missing?

Asked

Viewed 134 times

0

Javascript:

<script type="text/javascript" >

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

function meu_callback(conteudo) {
   if (!("erro" in conteudo)) {
      //Atualiza os campos com os valores.
      document.getElementById('endereco').value=(conteudo.logradouro);
      document.getElementById('bairro').value=(conteudo.bairro);
      document.getElementById('cidade').value=(conteudo.localidade);

   } //end if.
   else {
      //CEP não Encontrado.
      limpa_formulário_cep();
      alert("CEP não encontrado.");
   }
}

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('endereco').value="...";
         document.getElementById('bairro').value="...";
         document.getElementById('cidade').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_formulário_cep();
         alert("Formato de CEP inválido.");
      }
   } //end if.
   else {
      //cep sem valor, limpa formulário.
      limpa_formulário_cep();
   }
};
</script>

<script language="JavaScript">

 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);
     }
 }
 </script>

HTML:

<form name="form" method="POST" action="insert.php">
   <div id="container">
      <a href="http://www.wysiwygwebbuilder.com" target="_blank"><img src="images/builtwithwwb12.png" alt="WYSIWYG Web Builder" style="position:absolute;left:89px;top:562px;border-width:0;z-index:250"></a>
   </div>
   <div id="wb_LayoutGrid1">
      <div id="LayoutGrid1">
         <div class="row">
            <div class="col-1">
               <div id="wb_Shape1" style="display:inline-block;width:763px;height:49px;z-index:0;position:relative;">
                  <img src="images/img0003.png" id="Shape1" alt="" style="width:763px;height:49px;">
               </div>
            </div>
            <div class="col-2">
               <hr id="Line1" style="display:block;width:100%;height:18px;z-index:1;">
               <div id="wb_Text1">
                  <span style="color:#FFFFFF;font-family:Tahoma;font-size:16px;"><strong>Seja Bem-Vindo!</strong></span>
               </div>
            </div>
            <div class="col-3">
               <hr id="Line3" style="display:block;width:100%;height:12px;z-index:3;">
               <input type="text" id="Editbox1" style="display:block;width:100%;height:26px;line-height:26px;z-index:4;" name="Editbox1" value="" spellcheck="false">
            </div>
         </div>
      </div>
   </div>
   <div id="wb_LayoutGrid2">
      <div id="LayoutGrid2">
         <div class="row">
            <div class="col-1">
            </div>
            <div class="col-2">
               <div id="wb_ResponsiveMenu1" style="display:inline-block;width:107px;height:53px;z-index:5;">
                  <label class="toggle" for="ResponsiveMenu1-submenu" id="ResponsiveMenu1-title">Menu<span id="ResponsiveMenu1-icon"><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span></span></label>
                  <input type="checkbox" id="ResponsiveMenu1-submenu">
                  <ul class="ResponsiveMenu1" id="ResponsiveMenu1">
                     <li><a href="#"><i class="fa fa-home fa-2x">&nbsp;</i><br>Home</a></li>
                  </ul>
               </div>
            </div>
            <div class="col-3">
            </div>
            <div class="col-4">
            </div>
            <div class="col-5">
            </div>
         </div>
      </div>
   </div>
   <div id="wb_LayoutGrid3">
      <div id="LayoutGrid3">
         <div class="row">
            <div class="col-1">
         </div>
         <div class="col-2">
            <hr id="Line2" style="display:block;width:100%;height:17px;z-index:28;">
            <div id="wb_Shape2" style="display:inline-block;width:249px;height:23px;z-index:29;position:relative;">
               <img src="images/img0004.png" id="Shape2" alt="" style="width:249px;height:23px;">
            </div>
            <hr id="Line4" style="display:block;width:100%;height:23px;z-index:30;">
            <div id="wb_LayoutGrid7">
               <div id="LayoutGrid7">
                  <div class="row">
                     <div class="col-1">
                        <input type="text" id="Editbox9" style="display:block;width:100%;height:49px;line-height:49px;z-index:6;" name="Editbox2" value="" disabled spellcheck="false" placeholder="Cadastre seu ve&#237;culo">
                     </div>
                  </div>
               </div>
            </div>
            <div id="wb_LayoutGrid4">
               <div id="LayoutGrid4">
                  <div class="row">
                     <div class="col-1">
                        <input type="text" id="Editbox2" style="display:block;width:100%;height:36px;line-height:36px;z-index:7;" name="Editbox2" value="" disabled spellcheck="false" placeholder="CPF*">
                        <input type="text" id="cpf" style="display:block;width:100%;height:29px;line-height:29px;z-index:8;" name="cpf" value="" autofocus spellcheck="false" maxlength="14" autofocus onkeypress="mascara(this, '###.###.###-##')">
                     </div>
                     <div class="col-2">
                        <input type="text" id="Editbox3" style="display:block;width:100%;height:36px;line-height:36px;z-index:9;" name="Editbox2" value="" disabled spellcheck="false" placeholder="Nome">
                        <input type="text" id="nome" style="display:block;width:100%;height:29px;line-height:29px;z-index:10;" name="nome" value="" spellcheck="false">
                     </div>
                  </div>
               </div>
            </div>
            <div id="wb_LayoutGrid6">
               <div id="LayoutGrid6">
                  <div class="row">
                     <div class="col-1">
                        <input type="text" id="Editbox10" style="display:block;width:100%;height:36px;line-height:36px;z-index:11;" name="Editbox2" value="" disabled spellcheck="false" placeholder="Email">
                     </div>
                     <div class="col-2">
                        <input type="text" id="Editbox4" style="display:block;width:100%;height:36px;line-height:36px;z-index:12;" name="Editbox2" value="" disabled spellcheck="false" placeholder="DDD">
                     </div>
                     <div class="col-3">
                        <input type="text" id="Editbox7" style="display:block;width:100%;height:36px;line-height:36px;z-index:13;" name="Editbox2" value="" disabled spellcheck="false" placeholder="Telefone">
                     </div>
                     <div class="col-4">
                        <input type="text" id="Editbox14" style="display:block;width:100%;height:36px;line-height:36px;z-index:14;" name="Editbox2" value="" disabled spellcheck="false" placeholder="CEP">
                     </div>
                  </div>
               </div>
            </div>
            <div id="wb_LayoutGrid5">
               <div id="LayoutGrid5">
                  <div class="row">
                     <div class="col-1">
                        <input type="text" id="email" style="display:block;width:100%;height:29px;line-height:29px;z-index:15;" name="email" value="" spellcheck="false">
                     </div>
                     <div class="col-2">
                        <input type="text" id="ddd" style="display:block;width:100%;height:29px;line-height:29px;z-index:16;" name="ddd" value="" spellcheck="false">
                     </div>
                     <div class="col-3">
                        <input type="text" id="telefone" style="display:block;width:100%;height:29px;line-height:29px;z-index:17;" name="telefone" value="" spellcheck="false" maxlength="9" onkeypress="mascara(this, '####-#####')">
                     </div>
                     <div class="col-4">
                        <input name="cep" type="text" id="cep" value="sddssd" size="10" maxlength="9" onblur="pesquisacep(this.value);" style="display:block;width:100%;height:29px;line-height:29px;z-index:18;">
                     </div>
                  </div>
               </div>
            </div>
            <div id="wb_LayoutGrid9">
               <div id="LayoutGrid9">
                  <div class="row">
                     <div class="col-1">
                        <input type="text" id="Editbox15" style="display:block;width:100%;height:36px;line-height:36px;z-index:19;" name="Editbox2" value="" disabled spellcheck="false" placeholder="Endere&#231;o">
                     </div>
                     <div class="col-2">
                        <input type="text" id="Editbox16" style="display:block;width:100%;height:36px;line-height:36px;z-index:20;" name="Editbox2" value="" disabled spellcheck="false" placeholder="Complemento">
                     </div>
                     <div class="col-3">
                        <input type="text" id="Editbox11" style="display:block;width:100%;height:36px;line-height:36px;z-index:21;" name="Editbox2" value="" disabled spellcheck="false" placeholder="Bairro">
                     </div>
                  </div>
               </div>
            </div>
            <div id="wb_LayoutGrid10">
               <div id="LayoutGrid10">
                  <div class="row">
                     <div class="col-1">
                        <input type="text" id="endereco" style="display:block;width:100%;height:29px;line-height:29px;z-index:22;" name="endereco" value="" spellcheck="false">
                     </div>
                     <div class="col-2">
                        <input type="text" id="complemento" style="display:block;width:100%;height:29px;line-height:29px;z-index:23;" name="complemento" value="" spellcheck="false">
                     </div>
                     <div class="col-3">
                        <input type="text" id="bairro" style="display:block;width:100%;height:29px;line-height:29px;z-index:24;" name="bairro" value="" spellcheck="false">
                     </div>
                  </div>
               </div>
            </div>
            <div id="wb_LayoutGrid11">
               <div id="LayoutGrid11">
                  <div class="row">
                     <div class="col-1">
                        <div id="wb_Checkbox1" style="display:inline-block;width:20px;height:20px;opacity:0.00;z-index:25;">
                           <input type="checkbox" id="Checkbox1" name="status" value="Inativo" checked style="display:inline-block;"><label for="Checkbox1"></label>
                        </div>
                     </div>
                     <div class="col-2">
                     </div>
                     <div class="col-3">
                        <hr id="Line5" style="display:block;width:100%;height:10px;z-index:26;">
                        <input type="submit" id="Button1" name="" value="ENVIAR" style="display:inline-block;width:60px;height:25px;z-index:27;">
                     </div>
  • What is the problem or error?

  • stays in the three points, loading and does not bring the information!

  • I don’t use town on the form!

  • But in the code above you have 3 lines trying to put value in an id element "city" that does not exist, and so gives error.

  • I’ll take it here and answer, thank you!

  • DVD Thank you very much!!!!!!

  • I posted an answer to give the question as answered. Just dial there to finish, please. Thanks!

Show 2 more comments

1 answer

0


The error is in 3 lines referring to a id cidade nonexistent in the code:

document.getElementById('cidade')...

When Javascript, through document.getElementById, tries to take the value of an element or assign a value to an element that does not have the id specified, results in the error below and the rest of the script is aborted:

Uncaught Referenceerror

Make sure your HTML needs this id or delete these Javascript references.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.