Buscar Endereço por CEP em um campo de endereço dinâmico via Javascript

[lgbruno]

Tenho um campo dinamico de endereco que ao adicionar mais conjunto de campos ele so preenche o primeiro campo, tenho que digitar manualmente cada conjunto de campos do endereço e tambem nao repete a mascara do cep nos campos adicionados. Tem  alguma forma de fazer isso de forma automatica somente digitando os cep e todos campos serem preenchidos de cada conjunto de endereco adicionado com as mascaras do onkeypress?

nessa parte tenho os inputs com o botao de adicionar mais campos:

<div id="endereco">
	<div class="grupo_endereco">
		<button type="button" onclick="adicionarCampo()">+</button>
		<br><br>
		<input type="text" name="cep[]" id="cep" maxlength="9" placeholder="CEP" onblur="pesquisacep(this.value);" onkeypress="$(this).mask('#####-###');"><br>
		<input type="text" name="rua[]" id="rua" placeholder="Rua">
		<input type="text" name="numero[]" id="numero" placeholder="n">
		<input type="text" name="complemento[]" id="complemento" placeholder="Complemento">
		<input type="text" name="bairro[]" id="bairro" placeholder="Bairro">
		<input type="text" name="cidade[]" id="cidade" placeholder="Cidade">
		<input type="text" name="uf[]" id="uf" placeholder="UF">
	</div>
</div>

após clicar em adicionar mais campos ele entra nesse codigo javascript onde repete a criação do conjunto de campos de endereço com botao de remover caso necessario o campo:

var controleCampo = 1;
function adicionarCampo(){
	controleCampo++;
	// console.log(controleCampo);
	document.getElementById('endereco').insertAdjacentHTML('beforeend', '<br><div class="grupo_endereco" id="campo' + controleCampo + '"><button type="button" id="' + controleCampo + '" onclick="removerCampo(' + controleCampo + ')"> - </button><br><br><input type="text" name="cep[]" id="cep" maxlength="9" placeholder="CEP"><br><input type="text" name="rua[]" id="rua" placeholder="Rua"><input type="text" name="numero[]" id="numero" placeholder="n"><input type="text" name="complemento[]" id="complemento" placeholder="Complemento"><input type="text" name="bairro[]" id="bairro" placeholder="Bairro"><input type="text" name="cidade[]" id="cidade" placeholder="Cidade"><input type="text" name="uf[]" id="uf" placeholder="UF"></div>');

}

function removerCampo(idCampo){
	// console.log("campo remover: " + idCampo);
	
	document.getElementById('campo' + idCampo).remove();
}

e o local onde faz a busca do cep esta dessa forma abaixo sendo utilizado pelo onblur do campo de cep:

function limpa_formulário_cep() {
    //Limpa valores do formulário de cep.
    document.getElementById('rua').value=("");
    document.getElementById('bairro').value=("");
    document.getElementById('cidade').value=("");
    document.getElementById('uf').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('uf').value=(conteudo.uf);
    } //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('rua').value="...";
        document.getElementById('bairro').value="...";
        document.getElementById('cidade').value="...";
        document.getElementById('uf').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();
    }
};

grato desde já quem puder dar uma ajuda com o problema so faltando isso pra eu conseguir finalizar esse sistema.

 

Editado Agosto 25, 2023 por lgbruno

[Kleverson Cruz]

O principal erro em seu código está na função meu_callback onde será obtido os elementos que tenham exatamente os ids: rua, bairro, cidade, uf. Ou seja, sempre será utilizado os elementos definidos no HTML.

Acredito que essa seja a melhor forma de fazer seu código funcional:

Modifiquei o HTML e defini o id no grupo_endereco e adicionei o atributo "data-grupoid" no input cep.

<!DOCTYPE html>

<head>
  <title>Teste</title>
  <script src="script.js"></script>
</head>

<body>
  <div id="endereco">
    <div class="grupo_endereco" id="campo1">
      <button type="button" onclick="adicionarCampo()">+</button>
      <br><br>
      <input type="text" name="cep[]" id="cep" data-grupoid="campo1" maxlength="9" placeholder="CEP" onblur="pesquisacep(this);"
        onkeypress="$(this).mask('#####-###');"><br>
      <input type="text" name="rua[]" id="rua" placeholder="Rua">
      <input type="text" name="numero[]" id="numero" placeholder="n">
      <input type="text" name="complemento[]" id="complemento" placeholder="Complemento">
      <input type="text" name="bairro[]" id="bairro" placeholder="Bairro">
      <input type="text" name="cidade[]" id="cidade" placeholder="Cidade">
      <input type="text" name="uf[]" id="uf" placeholder="UF">
    </div>
  </div>
</body>

</html>

 

Criei uma variável global para definir qual é o grupo de endereço que está sendo modificado. Essa variável será utilizada nas outras funções para manipular os elementos.

Também adicionei o atributo data-grupoid e função onBlur nos elementos gerados dinamicamente.

var controleCampo = 1
var grupoAtual

function adicionarCampo() {
  controleCampo++
  // console.log(controleCampo);
  document
    .getElementById('endereco')
    .insertAdjacentHTML(
      'beforeend',
      '<br><div class="grupo_endereco" id="campo' +
        controleCampo +
        '"><button type="button" id="' +
        controleCampo +
        '" onclick="removerCampo(' +
        controleCampo +
        ')"> - </button><br><br><input type="text" name="cep[]" id="cep" data-grupoid="campo' + controleCampo + '" maxlength="9" placeholder="CEP" onblur="pesquisacep(this);"><br><input type="text" name="rua[]" id="rua" placeholder="Rua"><input type="text" name="numero[]" id="numero" placeholder="n"><input type="text" name="complemento[]" id="complemento" placeholder="Complemento"><input type="text" name="bairro[]" id="bairro" placeholder="Bairro"><input type="text" name="cidade[]" id="cidade" placeholder="Cidade"><input type="text" name="uf[]" id="uf" placeholder="UF"></div>'
    )
}

function removerCampo(idCampo) {
  document.getElementById('campo' + idCampo).remove()
}

function limpa_formulario_cep() {
  grupoAtual.querySelector('#rua').value = ''
  grupoAtual.querySelector('#bairro').value = ''
  grupoAtual.querySelector('#cidade').value = ''
  grupoAtual.querySelector('#uf').value = ''
}

function meu_callback(conteudo) {
  if (!('erro' in conteudo)) {
    grupoAtual.querySelector('#rua').value = conteudo.logradouro;
    grupoAtual.querySelector('#bairro').value = conteudo.bairro
    grupoAtual.querySelector('#cidade').value = conteudo.localidade
    grupoAtual.querySelector('#uf').value = conteudo.uf
  }
  else {
    limpa_formulario_cep()
    alert('CEP não encontrado.')
  }
}

function pesquisacep(input) {
  // Obtém o ID definido no atributo data-grupoid.
  var grupoId = input.getAttribute('data-grupoid')
  // Define a variável global grupoAtual com o elemento do grupo.
  grupoAtual =  document.getElementById(grupoId)
  var valor = input.value

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

  if (cep != '') {
    var validacep = /^[0-9]{8}$/

    if (validacep.test(cep)) {
      grupoAtual.querySelector('#rua').value = '...'
      grupoAtual.querySelector('#bairro').value = '...'
      grupoAtual.querySelector('#cidade').value = '...'
      grupoAtual.querySelector('#uf').value = '...'

      var script = document.createElement('script')
      script.src = 'https://viacep.com.br/ws/'+ cep + '/json/?callback=meu_callback'

      
      document.body.appendChild(script)
    } 
    else {
      limpa_formulario_cep()
      alert('Formato de CEP inválido.')
    }
  }
  else {
    limpa_formulario_cep()
  }
}

 

Não ficou muito bonito, mas está funcional hehe