Search Database when Select options Select

2

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

    
asked by anonymous 11.12.2017 / 12:05

3 answers

1

What you need to do is change two things ...

1) Jquery:

$(document).ready(function() {
    $("#estado").change(function(){
        buscarOndeComprar();
    });

    $("#cidade").change(function(){
        buscarOndeComprar();
    });

// FUNÇÃO PARA BUSCA DISTRIBUIDORES
function buscarOndeComprar() {

// Verificando Browser
if(window.XMLHttpRequest) {
   req = new XMLHttpRequest();
}
else if(window.ActiveXObject) {
   req = new ActiveXObject("Microsoft.XMLHTTP");
}
.... resto do código ...

2) The select

<select class="select-onde-comprar" id="estado" name="estado"></select>
<select class="select-onde-comprar" id="estado" name="estado"></select>

The problem was that you were mixing JQUERY with pure JS. Then your select could not call the buscarOndeComprar() function directly.

    
11.12.2017 / 15:53
2

First of all, you're missing the "&" which is used when passing more than one parameter in the get.

var url="search-where-buy.php? state=" + state + "& city=" + city;     

11.12.2017 / 13:25
0

A simple example (more or less) that might help you:

Javascript (jQuery): - Here you will do the ajax request and check which state is selected, with ajax return (which will have a json of cities in return), options will be opened in select of cities.

$(document).ready( function ()
{
    $("#filtro").change(function() {
        var option = $(this).find('option:selected').val();
        if(option == 0)
            $('#cidade').val("0");
        else
            carregaCidades(option, "#cidade");
    });
    // -- Edit --
    $(document).on("change", "#cidade", function() {
        var option = $(this).find('option:selected').val();
        carregaFornecedores(option, "#cidade"); // Só crie a função e o ajax
    });
  });

function carregaCidades(estado, selecionado="#cidade"){
// alert(selecionado);
    $.ajax({
        type:'post',    
        dataType: 'json',
        data: "op=buscaCidade&estado="+estado,
        url: "buscacidades.php",
        success: function(dados){
            // alert(dados);
            $(selecionado).find('option').remove().end();
            $(selecionado).append($('<option>', {
                value: 0,
                text: 'Todas'
            }));
            for(var i=0;dados.length>i;i++){
                $(selecionado).append($('<option>', {
                    value: dados[i].id_cidade,
                    text: dados[i].nome
                }));
            }

        }, error:function(dados){ alert("ERROU"); }
    });
}

HTML or View : - Here is the simple preview page with the ids in the selects that will be used in jQuery

<div>
    <label>Estados</label>
    <select class="c-select" style="line-height: 17px;width:100%" name="filtro" id="filtro">
        <option value="0">Todos os Estados</option>
        <option value="AC">Acre</option>
        <option value="AL">Alagoas</option>
        <option value="AP">Amapá</option>
        <option value="AM">Amazonas</option>
        <option value="BA">Bahia</option>
        <option value="CE">Ceará</option>
        <option value="DF">Distrito Federal</option>
        <option value="ES">Espirito Santo</option>
        <option value="GO">Goiás</option>
        <option value="MA">Maranhão</option>
        <option value="MS">Mato Grosso do Sul</option>
        <option value="MT">Mato Grosso</option>
        <option value="MG">Minas Gerais</option>
        <option value="PA">Pará</option>
        <option value="PB">Paraíba</option>
        <option value="PR">Paraná</option>
        <option value="PE">Pernambuco</option>
        <option value="PI">Piauí</option>
        <option value="RJ">Rio de Janeiro</option>
        <option value="RN">Rio Grande do Norte</option>
        <option value="RS">Rio Grande do Sul</option>
        <option value="RO">Rondônia</option>
        <option value="RR">Roraima</option>
        <option value="SC">Santa Catarina</option>
        <option value="SP">São Paulo</option>
        <option value="SE">Sergipe</option>
        <option value="TO">Tocantins</option>
    </select>
    <label>Cidades</label>
    <select type="text" id="cidade" class="form-control " name="cidade">
        <option value="0">Todas</option>
    </select>
</div>

PHP: - Here you only have to search and return the values according to the id selected there in html.

$query = "SELECT * from cidades WHERE estado = ".$_POST["estado"];
$result = mysql_query($query);
echo json_encode(mysql_fetch_row($result));
//Teste esse retorno, não tenho certeza da função correta do mysqli
    
11.12.2017 / 13:39