Busca cep e endereço para adionar no form.

[Cleimar Lemes]

  <!-- Etapa 2 -->
    <div class="etapa hidden">
  <label class="block mb-2">CEP:
    <input type="text" id="cep" name="cep"
           value="<?= htmlspecialchars($cliente['cep'] ?? '') ?>"
           class="mt-1 block w-full border-gray-300 rounded-md" required>
  </label>

  <label class="block mb-2">Endereço:
    <input type="text" id="endereco" name="endereco"
           value="<?= htmlspecialchars($cliente['endereco'] ?? '') ?>"
           class="mt-1 block w-full border-gray-300 rounded-md" required>
  </label>

  <label class="block mb-2">Setor/Bairro:
    <input type="text" id="setor" name="setor"
           value="<?= htmlspecialchars($cliente['setor'] ?? '') ?>"
           class="mt-1 block w-full border-gray-300 rounded-md" required>
  </label>

  <label class="block mb-2">Cidade:
    <input type="text" id="cidade" name="cidade"
           value="<?= htmlspecialchars($cliente['cidade'] ?? '') ?>"
           class="mt-1 block w-full border-gray-300 rounded-md" required>
  </label>

  <label class="block mb-2">Estado:
    <input type="text" id="estado" name="estado"
           value="<?= htmlspecialchars($cliente['estado'] ?? '') ?>"
           class="mt-1 block w-full border-gray-300 rounded-md" required>
  </label>

  <!-- Campo oculto para código IBGE, se quiser armazenar -->
  <input type="hidden" id="ibge" name="ibge">
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
        crossorigin="anonymous"></script>

<script>
$(document).ready(function() {

  function limpaFormularioCep() {
    $("#endereco").val("");
    $("#setor").val("");
    $("#cidade").val("");
    $("#estado").val("");
    $("#ibge").val("");
  }

  $("#cep").blur(function() {
    var cep = $(this).val().replace(/\D/g, '');

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

      if (validacep.test(cep)) {
        $("#endereco").val("...");
        $("#setor").val("...");
        $("#cidade").val("...");
        $("#estado").val("...");
        $("#ibge").val("...");

        $.getJSON("https://viacep.com.br/ws/" + cep + "/json/?callback=?", function(dados) {
          if (!("erro" in dados)) {
            $("#endereco").val(dados.logradouro);
            $("#setor").val(dados.bairro);
            $("#cidade").val(dados.localidade);
            $("#estado").val(dados.uf);
            $("#ibge").val(dados.ibge);
          } else {
            limpaFormularioCep();
            alert("CEP não encontrado.");
          }
        });
      } else {
        limpaFormularioCep();
        alert("Formato de CEP inválido.");
      }
    } else {
      limpaFormularioCep();
    }
  });
});
</script>

segue o codigo da parte do formulario de endereço e abaixo o script de busca.. o cep deve ser digitado sem - ou . assim: 75402035

Editado 18 horas atrás por Cleimar Lemes
adicionar foto exemplo.