Help. Função CEP com ajax + jquery

Front-end
,
#1

Olá senhores, sou leigo em jquery e ajax, comecei a aprender js recentemente para desenvolver um site, e estou bem perdido com uma função de preenchimento automático de endereços que é feita em ajax e jquery. Ela funciona quando o usuário digita o cep e muda de campo, preenchendo a rua, estado, cidade, etc, automaticamente.

Meu formulário é um contrato,com um ou mais administradores, (que são adicionados conforme o usuário solicita), e cada administrador tem um endereço diferente, o problema está em usar a função cep quando crio novos adm, porque ela funciona somente com campos fixos determinados manualmente dentro da função.

Em JS eu precisei de uma função que somava os campos conforme eram adicionados, e resolvi buscando os campos por um getElementByTagName, e então manipulo os id’s, etc, mas em jquery e ajax não sei nem por onde começar, se alguém puder dar uma luz, agradeço muito. Segue o código no git pra quem se interessar.

Esse código cria um form com endereço, e adiciona mais endereços conforme solicitado.

CEP

#2

Não entendi a dúvida.
Pode ser mais específico e mostrar o código?

#3

Agradeço sua atenção, e me desculpe, vou tentar explicar melhor.

o código funcionando tá aqui:

https://codepen.io/maxpereira/pen/jRwNyV?editors=1010

se executar o código e prencher com um cep, vai ver como funciona.

MAS, se você acrescentar mais um endereço no botão “adicionar endereço”, e prencher o cep, não funciona.

e é isso que preciso, modificar a função pra ela continuar prenchendo os inputs novos que são criados pela função addEnd();

o que eu estou tentando fazer, (e que já fiz em uma função JS que vai somando os campos conforme são adicionados), abaixo explico nos comentários

  //modificar a função pra ela funcionar com o onchange="cep(name)", assim escrevo diretamente no input e invoco ela 

//passar uma variavel nome ( atributo name do input  )
    function cep(nome) {
       
         //pego todos os inputs do html com o atributo name = nome que passei
         var vetor = document.getElementByTagName("nome");

          $.ajax({
   //o $(this).val() precisa enviar cep que está no vetor: vetor[0].id
		    url: 'https://viacep.com.br/ws/' +  $(this).val() + '/json/unicode/',
		    dataType: 'json',.
            //na function eu passo o cep que está na posição 0
		    success: function(vetor[0].id) {
             //aqui eu passo o valor do id de cada input que eu quero que a função preencha
             //eu sei onde está cada elemento no vetor porque o getElement me trás na ordem os inputs
		      $("vetor[0].id").val(resposta.cep);
		      $("#vetor[2].id").val(resposta.logradouro);
		      $("#vetor[3].id").val(resposta.complemento);
		      $("#vetor[4].id").val(resposta.bairro);
		      $("#vetor[5].id").val(resposta.localidade);
		      $("#vetor[6].id").val(resposta.uf);
		      $("#vetor[7].id").focus();  
		      
		    }
		  });
		});

´´´
Enfim, é isso, espero ter conseguido explicar melhor haha
#4

O primeiro passo é identificar se o que você montou ali, com esses vetores, está funcionando.
Talvez criar um padrão do tipo

<input type="text" id="logradouro1" name="rua"/>

E ir incrementando os valores, criando via jQuery fica fácil fazer isso.

#5

Issoo,
eu consigo fazer na função addEnd(), dentro do innerHTML, utilizando a variável qtdeCamposEnd, assim todo conjunto de campos que eu criar, o id das input vão vir incrementados, fica assim:

id='cep"+qtdeCamposEnd+"'

document.getElementById("endF"+qtdeCamposEnd).innerHTML = "<fieldset id='endereco'> <input id='cep"+qtdeCamposEnd+"' type='text' name='CEP' placeholder='CEP' size='12' required autocomplete='off'> " ... " </fieldset> <input type='button' value='Adicionar Endereço' onclick='addEnd()''> <input type='button' onClick='removerEnd("+qtdeCamposEnd+")' value='Apagar campo'>";
                qtdeCamposEnd++;
              
        }
#6

Você só aceita solução com JQuery?

Uma solução com Angular 1 (legado)

Html

<div ng-app="app" class="container mt-5">
  <div ng-controller="ctrl">
    <div ng-repeat="it in items">
      <div class="row mb-2">
        <div class="col-md-2 mb-2">
          <input type="text" ng-model="it.cep" placeholder="cep" ng-blur="onCepBlur($index)" class="form-control">  
        </div>
        <div class="col-md-6 mb-2">
          <input type="text" ng-model="it.logradouro" placeholder="logradouro" class="form-control">
        </div>
        <div class="col-md-2 mb-2">
          <input type="text" ng-model="it.complemento" placeholder="complemento" class="form-control">
        </div>
        <div class="col-md-2 mb-2">
          <input type="text" ng-model="it.bairro" placeholder="bairro" class="form-control">
        </div>
        <div class="col-md-4 mb-2">
          <input type="text" ng-model="it.localidade" placeholder="localidade" class="form-control">
        </div>
        <div class="col-md-2 mb-2">
          <input type="text" ng-model="it.uf" placeholder="uf" class="form-control">
        </div>
        <div class="col-md-2 mb-2">
          <input type="text" ng-model="it.unidade" placeholder="unidade" class="form-control">
        </div>
        <div class="col-md-2 mb-2">
          <input type="text" ng-model="it.ibge" placeholder="ibge" class="form-control">  
        </div>
        <div class="col-md-2  mb-2">
          <input type="text" ng-model="it.gia" placeholder="gia" class="form-control">
        </div>
      </div>
      <div class="row mb-2">
        <div class="col-md-12">
        <button ng-click="remove($index)" class="btn btn-outline-danger btn-block">Remover</button>
        <hr />
        </div>
      </div>
    </div>    
    <button ng-click="add()" class="btn btn-outline-primary btn-block">Adicionar</button>
  </div>  
</div>

Javascript (Angular)

var app = angular.module('app', []);
app.controller('ctrl', function($scope, $http){
  $scope.item = {
    "cep": "",
    "logradouro": "",
    "complemento": "",
    "bairro": "",
    "localidade": "",
    "uf": "",
    "unidade": "",
    "ibge": "",
    "gia": ""
  };
  $scope.items = [];
  $scope.add = function(){
    $scope.items.push(angular.copy($scope.item));
  }
  $scope.remove = function(id) {
    $scope.items.splice(id,1);
  }
  $scope.change = function(id, item){
    $scope.items[id] = item;
  }
  $scope.onCepBlur = function(id) {
    const v = $scope.items[id].cep;
    $http.get('https://viacep.com.br/ws/' + v + '/json/')
      .then(function(response){
        $scope.items[id] = response.data;
      }, function(error) {
        console.log(error);
      })
  }
  $scope.add();
})

s1b
s1b.png1126×240 4.56 KB

1ba
1ba.png1119×405 8.05 KB

O legal que ele faz o papel que precisa de uma maneira lógica e atraente, sem tem que escrever muito código e a sua manutenção melhora consequentemente

#7

Cara, aceito sim, ficou exatamente como preciso haha,

Mas… como uso um código feito em angular? tem que importar alguma biblio?
Porque até agora usei HTML + JS apenas.
Não sei nem como imprime um “hello word” em angular haha
Eu tentei só colar o código no arquivo html e colocar os scripts etc, mas não foi.

#8

Esqueci mencionar tem que pegar angular.js no site
https://angularjs.org

E use os códigos que passei. Qualquer dúvida pergunte