Ir para conteúdo
GOD

buscar através de um form

Recommended Posts

Tenho o form abaixo nele contém um formulário e abaixo tem os itens. A pergunta é como faço para escolher os itens no form e dessa pesquisa ir para o item especifico como se fosse uma ancora tudo na mesma página.

 

 

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div class="reserva-area" >
        <div class="reserva-area-itens">
          
  
          <form class="reserva-form" action="reserva.html" method="post">
            <fieldset class="fiesdeset">
              
  
              <div class="reserva-form-estadia">
                <label class="reserva-form-estadia-label">DATAS DA ESTADIA ↴</label>
                <br />
                <input type="text" name="estadia" id="nameDiv" value="10/06/2022 - 10/07/2022" />
              </div>              

              <div class="reserva-form-quarto">
                <label class="reserva-form-quarto-label">
                  &emsp; QUARTOS E HÓSPEDES ↴</label>
                <br>
                <label class="inicio">&emsp; Nº de Quartos</label>
                <select name="ad" id="quarto">
                  <option value="1" selected="">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                </select>
              </div>
              
              <div class="reserva-form-adulto">
                <label class="inicio">Adultos</label>
                <select name="ad" id="adultos">
                  <option value="1" selected="">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                  <option value="6">6</option>
                  <option value="7">7</option>
                  <option value="8">8</option>
                  <option value="9">9</option>
                  <option value="10">10</option>
                </select>
              </div>
  
              <div class="reserva-form-crianca">
                <label class="inicio">&nbsp Nº de Crianças 0 aos 12 Anos</label>
                <select name="ch" id="nCrianca">
                  <option value="0" selected="selected">0</option>
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>                  
                  <option value="4">4</option>
                  <option value="5">5</option>
                  <option value="6">6</option>
                  <option value="7">7</option>
                  <option value="8">8</option>
                  <option value="9">9</option>
                  <option value="10">10</option>
                </select>
              </div>
              
              <div class="reserva-form-pesquisar">
                <button type="submit" class="botao-pesquisar type=" submit" id="bt-pesquisa" data-enabled="enabled">
                  Buscar
                </button>
              </div>  
              
            </fieldset>
          </form>
        </div>
      </div>
      
      
    <section>  
      <div>
          <h2>Quarto 1.</h2>
          <p data-aos="fade-hight" data-aos-delay="100">
             <b>Acomodam:</b>
             <br>
             Até 1 adultos;
             <br>
             Ou 1 adultos + 1 crianças até 11 anos; 
             <br>
             <b>Contem:</b>
             <br>
             1 cama de solteiro (queen size); 
             <br>
             <b>Ocupação:</b>
             <br>
              maxima 1 Pessoas.             
            <br />
            <b>Nesse quarto tem</b>
            <br>
            Ar, telefone, acesso a internet, cofre, frigrobar, escrivania, armário parede de vidro e banheiro privado.            
          
        <div>
        <ul class="reserva-quarto-ul-fotos">
          <li class="reserva-quarto-li-fotos">
            <img class="reserva-quarto-img-foto" src="/assets/images/quarto-reserva/1.jpg" alt="Quarto Premium" loading="lazy">
          </li>
          </ul>
          
      </div>
   </section> 
   
   
   
   <section>      
      <div>
          <h2>Quarto 2.</h2>
          <p data-aos="fade-hight" data-aos-delay="100">
             <b>Acomodam:</b>
             <br>
             Até 1 adultos;
             <br>
             Ou 1 adultos + 1 crianças até 11 anos; 
             <br>
             <b>Contem:</b>
             <br>
             1 cama de solteiro (queen size); 
             <br>
             <b>Ocupação:</b>
             <br>
              maxima 1 Pessoas.             
            <br />
            <b>Nesse quarto tem</b>
            <br>
            Ar, telefone, acesso a internet, cofre, frigrobar, escrivania, armário parede de vidro e banheiro privado.            
          
        <div>
        <ul class="reserva-quarto-ul-fotos">
          <li class="reserva-quarto-li-fotos">
            <img class="reserva-quarto-img-foto" src="/assets/images/quarto-reserva/1.jpg" alt="Quarto Premium" loading="lazy">
          </li>
          </ul>          
      </div>
      
  </section>
          

</body>
</html>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Me parece que algo nesse sentido, porém não dar para entender com uma pergunta tão incoerente

<form method="post" action="" id="formulario">
    <input type="text" name="nome" />

    <select name="seletor">
        <option value="">Selecione algo</option>
        <option value="opcao-1">Opção 1</option>
        <option value="opcao-2">Opção 2</option>
        <option value="opcao-3">Opção 3</option>
    </select>

    <button type="submit">Enviar</button>
</form>

<div id="resultado">
    <p>Aqui vem o valor inserido no input[name="nome"] </p>
    <div data-nome=""></div>
    <p>Aqui vem o valor inserido no select[name="seletor"] </p>
    <div data-seletor=""></div>
</div>

<script>
    var formulario = document.getElementById('formulario'),
        resultado = document.getElementById('resultado'),
        form = null,
        mostra = null;

    formulario.addEventListener('submit', function (e) {
        e.preventDefault();
        form = e.target;
        mostra = null;
        for (var i = 0; i < form.elements.length; i++) {
            if (form.elements[i].value) {
                mostra = resultado.querySelector('[data-' + form.elements[i].name + ']');
                mostra.innerText = form.elements[i].value;
            }
        }
        return false;
    }, false);
</script>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Boa tarde Omar~ ,

 

Na imagem na parte de cima é um formulário e a parte debaixo cada uma está numa section e dentro de div.

 

Eu fiz uma imagem e nela explico com mais detalhes. Peço desculpas pelo código não entendido.

 

E desde já agradeço por sua boa vontade.

Explicação.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ah sim, bom você pode fazer algo tipo isso:

 

Selecionando alguma das opções no seletor, pegar seu valor e corre a página até o nocal do próximo formulário.

Seguindo a ideia que apresentei antes pois com ela você também poderá enviar informações do form-1 para outro dessa forma:

Spoiler

if (form.elements[i].value) {
    mostra = resultado.querySelector('[data-' + form.elements[i].name + ']');
    mostra.innerText = form.elements[i].value;

    // Só executa se a tag for um <select> e a tag tem a proriedade [id="pular-formulario"]
    if (form.elements[i].tagName.toLowerCase() === 'select' && form.elements[i].id === 'pular-formulario') {
        // Obtem identificação do próximo formulário de acordo com o valor do seletor
        var outroFormulario = '[data-' + form.elements[i].value + ']';
        // Rola o documento até o local do formulario
        document.querySelector(outroFormulario).scrollIntoView(false);
    }
}

 

Daí teriamos mais no documento:

<div data-opcao-1="">Outro formulário aqui...</div>
<div data-opcao-2="">Outro formulário aqui...</div>
<div data-opcao-3="">Outro formulário aqui...</div>

 

Ou você pode diretamente adicionar um evento change no seletor, que ao altera-lo já rolaria a para o próximo form.

Seria intereçante se o(s) próximo(s) fomularios tivessem um "display:none" sendo removido antes de ir até,  assim o documento ficaria mais estético.

 

Agora se a situação requerer dados que devem se cerregados de acordo com o primeiro formulário, uma de duas alternativas serão necessárias.

- Ao invés de mostrar o próximo formulário um ajax para carregar um outro arquivo que faça uma busca em um banco de dados e que contenha o formulário, então os dados são povoados antes da renderização html. (O ponto ruim que mesmo com poucos dados deve ser recarregado a cara requisição)

- Pré carregadar os dados necessários para cada condição, armazena-los em um JSON no javascript, assim sendo o formulário está presente e o javascript se encarrega de mostrar e povoa-lo com os dados. (O ponto ruim é que pesa para processar tudo, e com muitos registro a coisa pode ficar meio lenta).

 

Tirando o caso de ter de acessar um banco de dados eu optaria por deixar tudo em um form, e só mostrar cada campo de acordo com o valor selecionado, fica algo mais prático no uso final.

Exemplo:

Tenho inputA e inputB, ambos no formulário e ambos ocultos, ao alterar alguma opção seja um seletor ou seja uma caixa de marcação, mostraria o input correspondente aquela opção de resetaria o valor o input que não seria utilizado.

Nesse caso com uma caixa de marcação "checkbox/radio" é bem provável que poderia ser feito apenas com CSS, não sei, teria que replicar aqui e testar e não dar para simplesmente escrever o código aqui sem testar se não tenho certesa do resultado.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Daniele Prada
      Boa noite Pessoal. Eu sigo trabalhando na minha rede social adulta, e na página "pesquisar", é possível buscar pessoas apenas pelo nome, gênero, relacionamento e status (pelo sistema original da plataforma) . Eu queria acrescentar buscar tambem por "CIDADES" ou "PESSOAS PRÓXIMAS". Como os desenvolvedores da plataforma que comprei, não auxiliam com customização, eles apenas compartilham dados sobre a estrutura e apontam quais arquivos editar. são TRÊS arquivos e um deles uma function, que ja tentei de todas as maneiras possíveis e não consegui. por favor me ajudem!
       
      PS: Vou postar as imagens por links, por que não estou conseguindo enviar imagens para o fórum. está dando erro.
       
      IMG 1: https://imgur.com/a/AuglfH0 (Como está atualmente.)
      IMG 2: https://imgur.com/a/ryOLG     (PHP onde devo inserir "cidades")
      IMG 3: https://imgur.com/a/I3pdI       (Onde devo inserir a function)
      IMG 4: https://imgur.com/a/u0M76   (Onde devo mostrar)
       
      O site para quem quiser verificar melhor é https://www.globsex.com.br 
    • Por Rafael Freitas
      Falaa galera, seguinte:
      Eu tenho um código já funcionando que exibi os dados de todos os clientes cadastrados no banco de dados, por exemplo: ele mostra "Razão Social", "CNPJ" "Endereço" e etc.

      Porém, como são muitos clientes, a lista fica muito grande, eu gostaria que exibisse só "Razão Social" e "CNPJ" no caso em uma linha só e abaixo já outro cliente e assim por diante.
      O que eu queria fazer era ao lado do CNPJ, criar um botão "Visualizar" e assim ele abrir outra página só com as informações daquele cliente.

      No momento ainda não tenho muito conhecimento em PHP, não sei como faria isso. Alguém da uma força por gentileza =)
       
      Abraço. o/
    • Por josenilson
      Olá como faço para buscar vários resultados em um filtro em mysql, ?
      tenho esse abaixo com exemplo que me retorna apenas um resultado tipo.
      se eu consultar o nome joão e tiver dois joão antônio e joão paulo cadastrados no banco como exibo isso ?
      só esta trazendo um resultado deis de já agradeço.
      segue o código que estou utilizando como filtro ou consulta.
      <?php mysql_connect( 'localhost', 'root', 'rizeane20' ) or die ("could not connect"); mysql_select_db("sistema") or die ("could not find db !"); $output = ""; //coletando dados if (isset($_POST["search"])) { $searchq = $_POST["search"]; $searchq = preg_replace("#[^0-9a-z]#i", "",$searchq); $query = mysql_query( " SELECT * FROM login WHERE nome LIKE '%$searchq%' OR usuario LIKE '%$searchq%' OR senha LIKE '%$searchq%' OR nivel LIKE '%$searchq%' ") or die ("could not search !"); $count = mysql_num_rows($query); if ($count == 0) { $output = "there was no search results !"; }else{ while ($row = mysql_fetch_array($query)) { $nome = $row ['nome']; $usuario = $row ['usuario']; $senha = $row ['senha']; $id = $row ['idlogin']; $nivel = $row ['nivel']; $output .="$nome"; $output .="$usuario"; //$output .= '<DIV>'.$nome.' '.$usuario.' '.$senha.' '.$nivel.' </DIV>' ; } } } ?> <form action="resultado.php" method="post"> <input type="text" name="search" required class="form-control" placeholder="localizador" class="form-control"> <input type="submit" value="localizar" class="form-control"> <?php print("$output"); ?> </form> o código acima esta com a consulta e o form com o input para buscar o resultado no banco abaixo esta o código que volta com o resultado da busca, mas como eu disse ele só me retorna 1 resultado mesmo se tiver 2 ou mais no banco. <?php mysql_connect( 'localhost', 'root', 'rizeane20' ) or die ("could not connect"); mysql_select_db("sistema") or die ("could not find db !"); $output = ""; //coletando dados if (isset($_POST["search"])) { $searchq = $_POST["search"]; $searchq = preg_replace("#[^0-9a-z]#i", "",$searchq); $query = mysql_query( " SELECT * FROM login WHERE nome LIKE '%$searchq%' OR usuario LIKE '%$searchq%' OR senha LIKE '%$searchq%' OR nivel LIKE '%$searchq%' ") or die ("could not search !"); $count = mysql_num_rows($query); if ($count == 0) { $output = "there was no search results !"; }else{ while ($row = mysql_fetch_array($query)) { $nome = $row ['nome']; $usuario = $row ['usuario']; $senha = $row ['senha']; $id = $row ['idlogin']; $nivel = $row ['nivel']; $output .= '<DIV>'.$nome.' <br>'.$usuario.' <br>'.$senha.' <br>'.$nivel.' </DIV>' ; } } } ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Resultado Busca</title> </head> <body> <table border="1"> <tr> <td>Nome:</td> <td><?php echo $nome ?></td> </tr> <tr> <td>Usuário:</td> <td><?php echo $usuario ?></td> </tr> <tr> <td>Senha:</td> <td><?php echo $senha ?></td> </tr> <tr> <td>Nivel:</td> <td><?php echo $nivel ?></td> </tr> </table> </body> </html>
    • Por cesinhaleal
      Olá, Sou novo aqui e sou novo em PHP, gostaria da ajuda de vocês. Estou tentando fazer com que realize busca em um diretório que contem PDF e mostrar no próprio navegador. Consegui fazer com que busque e liste a qtd de arquivo que esta no diretório, mas não sei como fazer exibir, já tentei utilizar o header.
       
      <?php
      if($_POST['busca']) {
      $palavra = $_POST['arquivo'];
      $numero = 0; // não alterar
      $diretorio = "diretorio"; // diretório para a busca
      // *.* é todos arquivos de todas estensões do diretório
      foreach (glob("$diretorio/*.*") as $arquivo) {
      $separa = explode("/", $arquivo);
      if(strstr($separa[1], $palavra)==TRUE) {
      print "$separa[1]<br>";
      $numero++;
      }
      }
      echo "foram encontrado(s) $numero arquivo(s).";
      }
      ?>

      e o html:

      <form action="mostra_busca.php" method="POST">
      <input type="text" name="arquivo" value="">
      <input type="submit" name="busca" value="Buscar">
      </form>
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.