Check Availability of Zip Code

Question

Check Availability of Zip Code

Navigation

#1 by (2 votes)
#2 by (2 votes)
#3 by (1 votes)

2

I'm trying to develop but I'm not familiar with programming with Ajax , jQuery and JavaScript , so I'd like help I have a field that takes the customer's zip and a button so that when he clicks the return button if that zip is covered there for delivery, if it is not display we do not deliver to that region anymore All this without leaving the page I'm all on the same page.

php javascript jquery ajax

asked by anonymous 07.11.2017 / 22:40

3 answers

2

You have stored the zip codes available for delivery, right?

Just make an ajax call in the following template:

            $.ajax({
                type: 'GET', //ou POST
                url: 'nome_da_pagina.php',
                data: {cep: $('#cep').val()},
                dataType: 'json',
                success: function(data){
                    //retorno uma variável booleana chamada success no json
                    if (data.success){
                        //sucesso: o cep verificado está disponível para entrega
                    }else{
                        //o cep verificado não está disponível
                    }
                },
                error: function(xhr){
                    //tratar o erro na chamada ajax
                }
            });

In the example the input tag has the id cep, just as the PHP script will receive the variable as cep as well. You can receive the value with the following line:

$cep = isset($_GET['cep']) ? $_GET['cep'] : '';

Within PHP you will query the database that will check if the value of the variable exists in the table.

I hope I have helped!

07.11.2017 / 22:54

1

I'm not going to explain myself, but basically, there's an array with the fruits, "Banana", "Orange", "Apple", "Manga" if you type one in the field, it gives you the answer, No, there is not, I even put the ifs to manipulate your answer. hug and good luck!

function myFunction() {
    variavel = document.getElementById("campo").value;
    var fruits = ["Banana", "Laranja", "Maçã", "Manga"];
    var a = fruits.indexOf(variavel);
if(a >= 0){
   retorno = "Há a variável";
} else {
   retorno = "nao há a variavel";
}
    document.getElementById("demo").innerHTML = retorno;
}

<input type="text" id="campo" name="campo" >
<button onclick=" myFunction()">verificar</button>
<div id="demo"></div>

08.11.2017 / 00:29

With or without Wordpress [closed] How to exit a method before ending in C #

score 2 · Accepted Answer

Here are some examples of how to verify zip by cities , to use just create an object with the first five digits of the in>, example:

The city of Campinas that is in the state of São Paulo the zip codes starts with 13000 and goes until 13139 .

jQuery and PHP

Archive

$getCEP = filter_input(INPUT_GET, 'cep');
// A variável $Abranage pode ser o retorno de consulta
$Abrange = [
    // CAMPINAS
    [
        'inicio' => 13000,
        'fim' => 13139,
        'cidade' => 'Campinas'
    ],
    // PAULINIA
    [
        'inicio' => 13140,
        'fim' => 13140,
        'cidade' => 'Paulinia'
    ],
    // COSMOPOLIS
    [
        'inicio' => 13150,
        'fim' => 13150,
        'cidade' => 'Cosmopolis'
    ]
];
// Pega os cinco primeiros digitos do CEP informado pelo usuário
$CincoPrimeirosDigitos = substr($getCEP, 0,5);
$Check = false;
foreach($Abrange as $cidade) {
  // Verifica se é igual ou se esta entre INICIO e FIM
  if ($CincoPrimeirosDigitos >= $cidade['inicio'] && $CincoPrimeirosDigitos <= $cidade['fim']) {
    $Check = true;
  }
}
if ($Check) {
  echo json_encode(true);
} else {
  echo json_encode(false);
}

HTML

<div class="alert success">Entregamos em sua região</div>
<div class="alert info">Lamentamos, não entregamos em sua região!</div>
<input type="text" name="cep" id="cep" placeholder="Informe um CEP" />
<input type="button" id="VerificarCEP" value="Verificar" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scripttype="text/javascript">
$("#VerificarCEP").on('click', function(e) {
  var campo = $('#cep');
  var check = false;
  // Verifica a quantidade de digitos
  if (campo.val().length < 8) return;
  var url = 'consultaCEP.php?cep=${cep}'.replace('${cep}', campo.val());

  $.getJSON(url, function (retorno) {
      console.log(retorno);
    if (retorno) {
        $(".success").show();
        $(".info").hide();
    } else {
        $(".success").hide();
        $(".info").show();
    }
  });
});
</script>

In the two examples below I'm using the API of ViaCEP site to perform the query.

jQuery

// Por Cidade
// Coloque somente os 5 primeiros digitos, exe:
// Campinas os CEPs tem a númeração començando por
// 13000 e vai até 13139
const abrange = [
  // CAMPINAS
  {
    inicio: 13000,
    fim: 13139,
    cidade: 'Campinas'
  },
  // PAULINIA
  {
    inicio: 13140,
    fim: 13140,
    cidade: 'Paulinia'
  },
  // COSMOPOLIS
  {
    inicio: 13150,
    fim: 13150,
    cidade: 'Cosmopolis'
  }
];

$("#VerificarCEP").on('click', function(e) {
  var campo = $('#cep');
  var check = false;
  // Verifica a quantidade de digitos
  if (campo.val().length < 8) return;
  var url = 'https://viacep.com.br/ws/${cep}/json/'.replace('${cep}', campo.val());
  
  $.getJSON(url, function (retorno) {
    if (retorno.erro) {
      $(".success, .info").hide();
      $(".erro").show();
    } else {
      var ini = retorno.cep.substring(0, 5);
      var t = $.grep(abrange, function(cep, i){
        if(ini >= cep.inicio && ini <= cep.fim) {
          check = true;
        }
      });
      
      if (check) {
        $(".erro, .info").hide();
        $(".success").show();
      } else {
        $(".erro, .success").hide();
        $(".info").show();
      }
    }
  });
});

.alert {
  padding: 20px;
  color: white;
  margin-bottom: 15px;
  display: none;
}
.erro {
  background-color: #f44336;
}
.success {
  background-color: green;
}
.info {
  background-color: #069;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="alert success">Entregamos em sua região</div>
<div class="alert erro">CEP Inválido</div>
<div class="alert info">Lamentamos, não entregamos em sua região!</div>
<input type="text" name="cep" id="cep" placeholder="Informe um CEP" />
<input type="button" id="VerificarCEP" value="Verificar" />

ES6

// Por Cidade
// Coloque somente os 5 primeiros digitos, exe:
// Campinas os CEPs tem a númeração començando por
// 13000 e vai até 13139
const abrange = [
  // CAMPINAS
  {
    inicio: 13000,
    fim: 13139,
    cidade: 'Campinas'
  },
    // PAULINIA
  {
    inicio: 13140,
    fim: 13140,
    cidade: 'Paulinia'
  },
  // COSMOPOLIS
  {
    inicio: 13150,
    fim: 13150,
    cidade: 'Cosmopolis'
  }
  // Basta adicionar mais cidades, ou retornar através de dados cadastrados no banco de dados.
];
const buscarCEP = (cep) => {
  let check = false;
  if (cep.length < 8) return;
  let url = 'https://viacep.com.br/ws/${cep}/json/'.replace('${cep}', cep);
  fetch(url)
    .then((res) => {
    if (res.ok) {
      res.json().then((json) => {
        if (json.erro) {
            document.querySelector('.success').style.display = 'none'; 
            document.querySelector('.info').style.display = 'none';
            document.querySelector('.erro').style.display = 'block';
        } else {
          abrange.forEach((e) => {
            // Pega os 5 primeiros digitos
            let ini = json.cep.substring(0, 5);
            // Verifica o intervalo
            if (ini >= e.inicio && ini <= e.fim) {
              console.log('Abrange');
              check = true;
            }
          });
      
          if (check) {
            document.querySelector('.success').style.display = 'block';
            document.querySelector('.info').style.display = 'none';
            document.querySelector('.erro').style.display = 'none';
          } else {
            document.querySelector('.success').style.display = 'none';
            document.querySelector('.info').style.display = 'block';
            document.querySelector('.erro').style.display = 'none';
          }
        }
      });
    }
  });
}

let btnVerificarCEP = document.querySelector('#VerificarCEP');
// Adiciona o evento click
btnVerificarCEP.addEventListener('click', function(e) {
  let campoCEP = document.querySelector('#cep');
  buscarCEP(campoCEP.value);
});

.alert {
  padding: 20px;
  color: white;
  margin-bottom: 15px;
  display: none;
}
.erro {
  background-color: #f44336;
}
.success {
  background-color: green;
}
.info {
  background-color: #069;
}

<div class="alert success">Entregamos em sua região</div>
<div class="alert erro">CEP Inválido</div>
<div class="alert info">Lamentamos, não entregamos em sua região!</div>
<input type="text" name="cep" id="cep" placeholder="Informe um CEP" />
<input type="button" id="VerificarCEP" value="Verificar" />