Usar 2 auto-preenchimentos no mesmo formulário
-
N?o encontrei uma forma de utilizar 2 campos de CEP no mesmo formulário para autopreenchimento de 2 endere?os diferentes.
-
Olá, vou deixar a solu??o aqui, mesmo tendo demorado um tempo, mas pode ajudar outras pessoas, você vai precisar substituir o código do arquivo cf7-cep-autofill\assets\js\cf7-cep-autofill.js pelo seguinte conteudo:
jQuery(document).ready(function($) { ? ? function limpa_formulario_cep(obj) { ? ? ? ? // Limpa valores do formulário de cep. ? ? ? ? obj.closest('form').find(".cf7-cep-autofill__rua").val(""); ? ? ? ? obj.closest('form').find(".cf7-cep-autofill__bairro").val(""); ? ? ? ? obj.closest('form').find(".cf7-cep-autofill__cidade").val(""); ? ? ? ? obj.closest('form').find(".cf7-cep-autofill__uf").val(""); ? ? } ? ? // Quando o campo CEP perde o foco. ? ? $(".cf7-cep-autofill, .cf7-cep-autofill2, .cf7-cep-autofill3, .cf7-cep-autofill4, .cf7-cep-autofill5").blur(function() { ? ? ? ? var obj = $(this); ? ? ? ? var id = obj.attr('id'); ? ? ? ? var posfix = ''; ? ? ? ? if (id === 'cep1') posfix = '1'; ? ? ? ? else if (id === 'cep2') posfix = '2'; ? ? ? ? else if (id === 'cep3') posfix = '3'; ? ? ? ? else if (id === 'cep4') posfix = '4'; ? ? ? ? else if (id === 'cep5') posfix = '5'; ? ? ? ? var cep = obj.val().replace(/\D/g, ''); // Nova variável "cep" somente com dígitos. ? ? ? ? // 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. ? ? ? ? ? ? ? ? obj.closest('form').find(".cf7-cep-autofill__rua" + posfix).val("..."); ? ? ? ? ? ? ? ? obj.closest('form').find(".cf7-cep-autofill__bairro" + posfix).val("..."); ? ? ? ? ? ? ? ? obj.closest('form').find(".cf7-cep-autofill__cidade" + posfix).val("..."); ? ? ? ? ? ? ? ? obj.closest('form').find(".cf7-cep-autofill__uf" + posfix).val("..."); ? ? ? ? ? ? ? ? // Consulta o webservice viacep.com.br/ ? ? ? ? ? ? ? ? $.getJSON("https://viacep.com.br/ws/"+ cep +"/json/?callback=?", function(dados) { ? ? ? ? ? ? ? ? ? ? if (!("erro" in dados)) { ? ? ? ? ? ? ? ? ? ? ? ? // Atualiza os campos com os valores da consulta. ? ? ? ? ? ? ? ? ? ? ? ? obj.closest('form').find(".cf7-cep-autofill__rua" + posfix).val(dados.logradouro); ? ? ? ? ? ? ? ? ? ? ? ? obj.closest('form').find(".cf7-cep-autofill__bairro" + posfix).val(dados.bairro); ? ? ? ? ? ? ? ? ? ? ? ? obj.closest('form').find(".cf7-cep-autofill__cidade" + posfix).val(dados.localidade); ? ? ? ? ? ? ? ? ? ? ? ? obj.closest('form').find(".cf7-cep-autofill__uf" + posfix).val(dados.uf); ? ? ? ? ? ? ? ? ? ? } else { ? ? ? ? ? ? ? ? ? ? ? ? // CEP pesquisado n?o foi encontrado. ? ? ? ? ? ? ? ? ? ? ? ? limpa_formulario_cep(obj); ? ? ? ? ? ? ? ? ? ? ? ? alert("CEP n?o encontrado."); ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? }); ? ? ? ? ? ? } else { ? ? ? ? ? ? ? ? // CEP é inválido. ? ? ? ? ? ? ? ? limpa_formulario_cep(obj); ? ? ? ? ? ? ? ? alert("Formato de CEP inválido."); ? ? ? ? ? ? } ? ? ? ? } else { ? ? ? ? ? ? // CEP sem valor, limpa formulário. ? ? ? ? ? ? limpa_formulario_cep(obj); ? ? ? ? } ? ? }); });
Ao fazer isso você poderá utilizar até 5 ceps diferentes no mesmo formulário (que era o que eu precisava no momento), para fazer funcionar no CF7 você precisa configurar os campos da seguinte forma:
cep class:cf7-cep-autofill id:cep1
endereco class:cf7-cep-autofill__rua1
bairro class:cf7-cep-autofill__bairro1
cep2 class:cf7-cep-autofill id:cep2
endereco2 class:cf7-cep-autofill__rua2
bairro2 class:cf7-cep-autofill__bairro1
e assim por diante em cada cep que precisar
- The topic ‘Usar 2 auto-preenchimentos no mesmo formulário’ is closed to new replies.