Dynamically populate fields according to CEP JSP Javascript

Question

I want that when typing my zip code and clicking on the search button, it returns the data from the street,state,neighborhood and Uf but when clicking on the search button it is not calling the function that searches the data from a mail webservice.

 <script type="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>

Answer 1

Take a look at this webservice:

https://viacep.com.br/exemplo/jquery/

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 >
  <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">
    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>