-1

Olá,

Sou um programador relativamente novo em php e estou desenvolvendo um site. É um site onde há uma lista de empresas. E eu queria implementar nele, filtros de pesquisa, o primeiro deles sendo um select "Selecione sua cidade":

    <form method="post" action="lista.php" id="Cidade" name="Cidade">
        <label for="cCidade">Selecione sua Cidade</label>
        <select id="cCidade" name="tCidade">
            <option>Selecione a Cidade</option>
            <option value="Farroupilha">Farroupilha</option>
            <option value="Caxias do Sul"default>Caxias do Sul</option>
        </select>
    </form>

Eu quero que quando o usuário utilizar o select, os resultados são enviados para um iframe na tela (o "lista.php"), que é a listagem das empresas como falei anteriormente. Porém eu quero que esse envio, não atualize a página e nem precise de um botão para ser enviado, ou seja, sempre que o usuário usar outra option do select, a pesquisa mude totalmente.

1
  • como você imagina que o script pode identificar que o usuário já acabou de preencher o formulário e o mesmo já pode ser enviado? Commented 30/08/2016 às 20:02

2 Respostas 2

2

Bom a forma mais simples de fazer isso é usando jquery e o serializeArray

Fiz um exemplo pra vc ver como funciona.

  1. Pego o form com o seletor $()
  2. Executo o event.preventDefault() para parar a ação de envio do formulário
  3. serializeArray() no form , que pega todos os campos desse formulário e transforma num objeto
  4. Envio por ajax usando o metódo POST que é geralmente o mesmo utilizando no formulário

caso ainda tenha dúvida, tem uma referência nesse link

$("#form").submit(function() {
  event.preventDefault();

  var url = $(this).attr("action");
  /*serializeArray vai pegar todos os campos do array*/
  var formData = $(form).serializeArray();
  console.log(formData);
  $.post(url, formData).done(function(data) {
    console.log(data); //resultado do envio para o servidor
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form name="form" id="form" action="enviar.php">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name" value="nome" />
  </div>
  <div>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_mail" value="[email protected]" />
  </div>
  <div>
    <label for="carro">carro:</label>
    <select name="carro">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>
  </div>
  <div>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message">Mensagem que será enviada</textarea>
  </div>

  <div class="button">
    <button type="submit">Send your message</button>
  </div>
</form>

3
  • Olá amigo! Obrigado por responder! Só tenho 2 dúvidas. 1 - Esse exemplo que tu mandaste, ele não atualiza a página né? 2 - E como mandar os dados do formulário sem o "input submit" ?
    – Nicolas S.
    Commented 31/08/2016 às 1:40
  • Isso ele não atualiza a página. A outra dá pra fazer da seguinte forma ` function enviar(){ var url = $(this).attr("action"); var formData = $(form).serializeArray(); $.post(url, formData).done(function(data) { }); } ` e no html vc pode colocar algo com chamando essa função <a href="javascript:enviar()">Enviar</a> Ou qualquer objeto usando onclick <div onclick="enviar()">Enviar</a> Commented 31/08/2016 às 1:58
  • Amigo! Atualizei a pergunta, para ser mais fácil de entender o que quero!
    – Nicolas S.
    Commented 31/08/2016 às 20:27
0

esses são os famosos Selects, via jQuery. Vou explicar e tenho um exemplo funcionando sobre isso:

inclua o jquery no head:

 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>

E no body:

<form method="post" action="lista.php" id="Cidade" name="Cidade">
    <label for="cCidade">Selecione sua Cidade</label>
    <select id="cCidade" name="tCidade">
        <option value="">Selecione a Cidade</option>
        <option value="Farroupilha">Farroupilha</option>
        <option value="Caxias do Sul">Caxias do Sul</option>
    </select>
</form>
<div id="resultado"></div>

<script>
$(document).ready(function(){
   $("#cCidade").on('change click', function(){
        var cidade = $(this).val();
        if(cidade == ""){
          alert("Cidade não selecionada");
        }else{
          $("#resultado").load("lista.php", {"cidade":cidade});
        }
    });
});
</script>

E crie o arquivo lista.php somente com a consulta e retorno:

//inclua o arquivo de conexão do php e valide se há conexão foi bem sucedida.
$sql = "SELECT empresas FROM empresas";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
  while($row = $result->fetch_assoc()) {

    echo "<p>".$row['empresas']."</p>";

  }
}else{
 echo "<p>Não há filiais nesta região.</p>";
}

Assim sempre que ele alterar o select a consulta roda e resultado muda na DIV#Resultado. Espero ter ajudado.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .