Good morning. I have a small problem that I can not solve. The situation is as follows: I have 2 selects (state and city), I would like when selecting a state the system would search my DB to find distributors of that state and when selecting the city the system would further refine the search for distributors of that particular state + certain city. This all without needing a button and without refresh the page.
I tried to adapt a code that I found on the internet, but it does not give any error, nor does it show any results.
States and cities are populated automatically:
<select class="select-onde-comprar" onchange="buscarOndeComprar()" id="estado" name="estado"></select>
<select class="select-onde-comprar" onchange="buscarOndeComprar()" id="cidade" name="cidade"></select>
javascript function that should link to the search. I think that's where the problem is.
var req;
// FUNÇÃO PARA BUSCA NOTICIA
function buscarOndeComprar() {
// Verificando Browser
if(window.XMLHttpRequest) {
req = new XMLHttpRequest();
}
else if(window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
// Arquivo PHP juntamente com o valor digitado no campo (método GET)
var estado = document.getElementById('estado').value;
var cidade = document.getElementById('cidade').value;
var url = "busca-onde-comprar.php?estado="+estado+"&cidade="+cidade;
// Chamada do método open para processar a requisição
req.open("Get", url, true);
// Quando o objeto recebe o retorno, chamamos a seguinte função;
req.onreadystatechange = function() {
// Exibe a mensagem "Buscando Distribuidores e Revendedores..." enquanto carrega
if(req.readyState == 1) {
document.getElementById('resultado').innerHTML = 'Buscando Distribuidores e Revendedores...';
}
// Verifica se o Ajax realizou todas as operações corretamente
if(req.readyState == 4 && req.status == 200) {
// Resposta retornada pelo busca.php
var resposta = req.responseText;
// Abaixo colocamos a(s) resposta(s) na div resultado
document.getElementById('resultado').innerHTML = resposta;
}
}
req.send(null);
}
SEARCH PAGE:
<?php
// Incluir aquivo de conexão
include("bd.php");
// Recebe o valor enviado
$estado = $_GET['estado'];
$cidade = $_GET['cidade'];
// Procura titulos no banco relacionados ao valor
if(!empty($cidade)){
$sql = mysql_query("SELECT * FROM distribuidor WHERE estado = ".$estado." and cidade = ".$cidade."");
}else {
$sql = mysql_query("SELECT * FROM distribuidor WHERE estado = ".$estado."");
}
// Exibe todos os valores encontrados
if (!empty($sql)){
while ($ondecomprar = mysql_fetch_object($sql)) {
?>
<div class="row-fluid">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 onde-comprar">
<h4 class=""><?php echo $ondecomprar->nome?></h4>
<p><?php echo $ondecomprar->endereco?>, <?php echo $ondecomprar->numero?> - <?php echo $ondecomprar->bairro?><p>
<p><strong>Cidade:</strong> <?php echo $ondecomprar->cidade?> - <?php echo $ondecomprar->estado?></p>
<p><strong>Telefone:</strong> <?php echo $ondecomprar->telefone?></p>
<p><strong>Celular:</strong> <?php echo $ondecomprar->celular?> <i class="fa fa-whatsapp" aria-hidden="true"></i></p>
</div>
</div>
<?php}
} else{
?>
<div class="row-fluid">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 titulos text-center">
<h4>Ainda não possuímos nenhum distribuidor ou revendedor cadastrado para este estado.</h4>
</div>
</div>
<?php
}
?>
Example of a site where you have this search: link