For security, so you do not have requests for multiple php files, I advise you to create functions in functions.php and access functions using ajax.
For this implementation I used only one table, but you could mount it using the wordpress storage format, it depends on the time and term. :)
In functions.php , we create the functions and actions to allow you to pass parameters:
// Ação de callback do Ajax
function get_cidade_from_uf() {
global $wpdb;
$query = " SELECT distinct m.TXT_CIDADE FROM tb_lojas m
WHERE m.COD_UF = '".$_GET['COD_UF']."' ORDER BY TXT_CIDADE ASC ";
$cidades = $wpdb->get_results($query, OBJECT);
die(json_encode($cidades));
}
add_action( 'wp_ajax_get_cidade_from_uf', 'get_cidade_from_uf' );
add_action( 'wp_ajax_nopriv_get_cidade_from_uf', 'get_cidade_from_uf' );
// Ação de callback do Ajax
function get_bairro_from_cidade_uf() {
global $wpdb;
$query = " SELECT distinct m.TXT_BAIRRO FROM tb_lojas m
WHERE m.COD_UF = '".$_GET['COD_UF']."'
AND m.TXT_CIDADE = '".$_GET['TXT_CIDADE']."'
ORDER BY TXT_BAIRRO ASC ";
$bairros = $wpdb->get_results($query, OBJECT);
die(json_encode($bairros));
}
add_action( 'wp_ajax_get_bairro_from_cidade_uf', 'get_bairro_from_cidade_uf' );
add_action( 'wp_ajax_nopriv_get_bairro_from_cidade_uf', 'get_bairro_from_cidade_uf' );
// Ação de callback do Ajax
function get_procurar_loja() {
global $wpdb;
$uf = $_GET['COD_UF'];
$cidade = $_GET['TXT_CIDADE'];
$bairro = $_GET['TXT_BAIRRO'];
$query = " SELECT l.TXT_LOJA, l.TXT_ENDERECO, l.TXT_BAIRRO, l.TXT_CIDADE, l.COD_UF FROM tb_lojas l WHERE l.COD_UF = '".$uf."' ";
if ( (isset( $cidade)) ) {
if ( ($cidade !='') && ($cidade != 'undefined') && ($cidade != 'CIDADE') && ($cidade != 'SELECIONE UMA CIDADE') ){
$query .= " AND l.TXT_CIDADE = '".$cidade."' ";
}
}
if ( (isset( $bairro)) ) {
if ( ($bairro !='') && ($bairro != 'undefined') && ($bairro != 'BAIRRO') && ($bairro!= 'SELECIONE UM BAIRRO') ){
$query .= " AND l.TXT_BAIRRO = '".$bairro."' ";
}
}
$query .= " ORDER BY l.TXT_LOJA ASC ";
$lojas = $wpdb->get_results($query, OBJECT);
die(json_encode($lojas));
}
add_action( 'wp_ajax_get_procurar_loja', 'get_procurar_loja' );
add_action( 'wp_ajax_nopriv_get_procurar_loja', 'get_procurar_loja' );
In javascript you put events and treatments:
$("#btnProcurar").click(function() {
var inputUF = $("#txtUF").val();
var inputCidade = $("#txtCIDADE").val();
var inputBairro = $("#txtBAIRRO").val();
$.ajax({
url: '/wp-admin/admin-ajax.php',
type: 'get',
data: {
'action': 'get_procurar_loja',
'COD_UF': inputUF,
'TXT_CIDADE': inputCidade,
'TXT_BAIRRO': inputBairro
},
success: function( data ){
var data = JSON.parse(data);
var out = '<ul>';
jQuery.each(data, function(index, item) {
var loja = item.TXT_LOJA.trim();
out += "<li oncopy='javascript:textocopiado(\"" + loja + "\");'><b><span style='color:orangered;font-family:Trade Gothic LT Std Bold Sinistra;'>"+item.TXT_LOJA+"</span></b><br><span style='color:#f8f8ff;font-family:Trade Gothic LT Std Bold Condensed;'>"+item.TXT_ENDERECO+"<br>"+item.TXT_BAIRRO+" - "+item.TXT_CIDADE+" - " + item.COD_UF + "<br></li>";
});
out += '</ul>';
$('#hotsite-lojas').html(out);
$('#hotsite-lojas').show();
}
});
});
$("#txtUF").change(function() {
var inputUf = $("#txtUF").val();
$.ajax({
url: '/wp-admin/admin-ajax.php',
type: 'get',
data: {
'action': 'get_cidade_from_uf',
'COD_UF': inputUf
},
success: function( data ){
var data = JSON.parse(data);
var selectCidade = document.getElementById("txtCIDADE");
selectCidade.innerText = null;
var selecione = document.createElement("option");
selecione.text = ' SELECIONE UMA CIDADE';
selectCidade.add(selecione);
jQuery.each(data, function(index, item) {
var option = document.createElement("option");
option.text = ' ' + item.TXT_CIDADE;
if (option.text != 'undefined') {
selectCidade.add(option);
}
});
}
});
});
$("#txtCIDADE").change(function() {
var inputUF = $("#txtUF").val();
var inputCidade = $("#txtCIDADE").val();
$.ajax({
url: '/wp-admin/admin-ajax.php',
type: 'get',
data: {
'action': 'get_bairro_from_cidade_uf',
'COD_UF': inputUF,
'TXT_CIDADE': inputCidade
},
success: function( data ){
var data = JSON.parse(data);
var selectBairro = document.getElementById("txtBAIRRO");
selectBairro.innerText = null;
var selecione = document.createElement("option");
selecione.text = ' SELECIONE UM BAIRRO';
selectBairro.add(selecione);
jQuery.each(data, function(index, item) {
var option = document.createElement("option");
option.text = ' ' + item.TXT_BAIRRO;
if (option.text != 'undefined') {
selectBairro.add(option);
}
});
}
});
});
I hope it helps.
With Custom Type it would look a lot better, but then it's a challenge ... and do not forget to share.
Big hug