Dynamically fill fields according to JSP CEP Javascript

Question

Dynamically fill fields according to JSP CEP Javascript

Navigation

#1 by (3 votes)

0

I want that when I type my zip and click the search button, it returns the data of the public place, state, neighborhood and uf but clicking on the search button it is not calling the function that searches the data of a webService of the mail.

<scripttype="text/javascript">

 $(document).ready(function(){
$("#buscar_cep").click(function(e){
    if($.trim($("#cep").val()) != ""){
        $.getScript("http://cep.republicavirtual.com.br/web_cep.php?
 formato=javascript&cep="+$("#cep").val(), function(){
            if(resultadoCEP["resultado"]){
                $("#rua").val(unescape(resultadoCEP["tipo_logradouro"])+": 
 "+unescape(resultadoCEP["logradouro"]));
                $("#bairro").val(unescape(resultadoCEP["bairro"]));
                $("#cidade").val(unescape(resultadoCEP["cidade"]));
                $("#estado").val(unescape(resultadoCEP["uf"]));
            }else{
                alert("Não foi possivel encontrar o endereço");
            }
        });             
    }
})
});
    </script>

      <form >
 <div class="row">
 <div class="col-6 col-md-4">
    Nome Completo:<input type="text" id="nome_passageiro2" name="nome"><br/>
 <br/>
 </div>


 <div class="col-6 col-md-4">

     CEP:<input type="text" id="cep" name="cep"><button type="button" id="buscar_cep"><i class="fa fa-search" action="" ></i></button> <br/><br/>
 </div>

 <div class="col-6 col-md-4">
    Celular:<input type="text" id="nr_celular" name="celular"><br/><br/>
 </div>

  <div class="col-6 col-md-4">
    CPF:<input type="text" id="cpf" name="cpf" ><br/><br/>
  </div>

  <div class="col-6 col-md-4">
    UF:<input type="text" id="uf" name="uf" ><br/><br/>
 </div>

 <div class="col-6 col-md-4">
    Cidade:<input type="text" id="cidade" name="uf"><br/><br/>
 </div>
    </div>

    <div class="row">

        <div class="col-6 col-md-4">
    Rua:<input type="text" id="rua" name="endereco"><br/><br/>
 </div>

           <div class="col-6 col-md-4">
    Estado:<input type="text" id="estado" name="endereco"><br/><br/>
 </div>

         <div class="col-6 col-md-4">
    Bairro:<input type="text" id="bairro" name="endereco"><br/><br/>
 </div>
        <div class="col-6 col-md-4">
    Telefone:<input type="text" id="modelo" name="telefone"><br/><br/>
        </div>

        <div class="col-6 col-md-4">
    Login:<input type="text" id="login" name="login"><br/><br/>
        </div>

        <div class="col-6 col-md-4">
            Senha:<input type="password" id="senha" name="senha"><br/><br/>
        </div>

        <div class="col-6 col-md-4">
            Confirmar Senha:<input type="password" id="senha" name="confirma_senha"><br/><br/>
        </div>
        <div class="col-6 col-md-4">
     Data de Nascimento:<input type="text" id="nascimento_dt" name="nascimento"><br/><br/>
 </div>

            <div class="col-6 col-md-4">
    Estado Civil:  <label for="s1">Solteiro(a)</label>
        <input type="radio" id="ativo" name="status"  value="ativo"/>

        <label for="s2">Casado(a)</label>
        <input type="radio" id="inativo" name="status" value="inativo"/>
  <br/><br/>
            </div>





             <div class="col-6 col-md-4">
    Sexo:  <label for="s4">Masculino</label>
        <input type="radio" id="masc" name="sexo" value="masculino"/>

        <label for="s6">Feminino</label>
        <input type="radio" id="fem" name="sexo" value="feminino"/><br/>
    <br/>

        </div>
    </div>

        <button type="submit" onclick="validar()" >Cadastrar</button> 


    </form>

javascript java html jsp

asked by anonymous 20.09.2017 / 20:57

1 answer

Results coming from the database repeated Error in PHPmailer: Configuration by Hostnet

score 3 · Accepted Answer

Take a look at this webservice :

link

Here is an example of how to use it.

$(function(){

  $("#buscar_cep").click(function(){
  
    //Nova variável "cep" somente com dígitos.
    var cep = $("#cep").val().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)) {

         //Consulta o webservice viacep.com.br/
        $.getJSON("//viacep.com.br/ws/"+ cep +"/json/?callback=?", function(dados) {

                if (!("erro" in dados)) {
                    //Atualiza os campos com os valores da consulta.
                    $("#rua").val(dados.logradouro);
                    $("#bairro").val(dados.bairro);
                    $("#cidade").val(dados.localidade);
                    $("#uf").val(dados.uf);
                } //end if.
                else {
                    //CEP pesquisado não foi encontrado.
                    console.log("CEP não encontrado.");
                }
            });
        } //end if.
        else {
            console.log("Formato de CEP inválido.");
        }
    } //end if.
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><form><divclass="row">
    <div class="col-6 col-md-4">
      Nome Completo:
      <input type="text" id="nome_passageiro2" name="nome">
      <br/><br/>
  </div>
 <div class="col-6 col-md-4">
  CEP:
  <input type="text" id="cep" name="cep">
  <button type="button" id="buscar_cep">
    buscar
    <i class="fa fa-search" action="" ></i>
  </button>
  <br/><br/>
 </div>
 <div class="col-6 col-md-4">
    Celular:<input type="text" id="nr_celular" name="celular"><br/><br/>
 </div>

  <div class="col-6 col-md-4">
    CPF:<input type="text" id="cpf" name="cpf" ><br/><br/>
  </div>

  <div class="col-6 col-md-4">
    UF:<input type="text" id="uf" name="uf" ><br/><br/>
 </div>

 <div class="col-6 col-md-4">
    Cidade:<input type="text" id="cidade" name="uf"><br/><br/>
 </div>
    </div>

    <div class="row">

        <div class="col-6 col-md-4">
    Rua:<input type="text" id="rua" name="endereco"><br/><br/>
 </div>

           <div class="col-6 col-md-4">
    Estado:<input type="text" id="estado" name="endereco"><br/><br/>
 </div>

         <div class="col-6 col-md-4">
    Bairro:<input type="text" id="bairro" name="endereco"><br/><br/>
 </div>
        <div class="col-6 col-md-4">
    Telefone:<input type="text" id="modelo" name="telefone"><br/><br/>
        </div>

        <div class="col-6 col-md-4">
    Login:<input type="text" id="login" name="login"><br/><br/>
        </div>

        <div class="col-6 col-md-4">
            Senha:<input type="password" id="senha" name="senha"><br/><br/>
        </div>

        <div class="col-6 col-md-4">
            Confirmar Senha:<input type="password" id="senha" name="confirma_senha"><br/><br/>
        </div>
        <div class="col-6 col-md-4">
     Data de Nascimento:<input type="text" id="nascimento_dt" name="nascimento"><br/><br/>
 </div>

            <div class="col-6 col-md-4">
    Estado Civil:  <label for="s1">Solteiro(a)</label>
        <input type="radio" id="ativo" name="status"  value="ativo"/>

        <label for="s2">Casado(a)</label>
        <input type="radio" id="inativo" name="status" value="inativo"/>
  <br/><br/>
            </div>





             <div class="col-6 col-md-4">
    Sexo:  <label for="s4">Masculino</label>
        <input type="radio" id="masc" name="sexo" value="masculino"/>

        <label for="s6">Feminino</label>
        <input type="radio" id="fem" name="sexo" value="feminino"/><br/>
    <br/>

        </div>
    </div>

        <button type="submit" onclick="validar()" >Cadastrar</button> 


    </form>