1

Como se faz para termos dois formularios trabalhando sobre o mesmo resultset? Tendo como exemplo a pesquisa do youtube (veja abaixo)

inserir a descrição da imagem aqui

Em Vermelho a pesquisa padrão onde o usuario coloca a pesquisa e clica no botão de envio de formulario (no caso a lupa) e em Verde um outro formulario com os filtros de resultado que aparecem somente após a pesquisa inicial este formulario verde não necessita de click em qualquer tecla submit, o que quero saber é como se faz o segundo formulario (Verde)? como não é necessario um click de submissão, como reaproveita o resultado do formulario em vermelho, como o interligo ao formulario vermelho?

Formulario que fiz: inserir a descrição da imagem aqui

6
  • Podes usar JavaScript para ter ações quando clicas numa das opções do verde, e assim fazer o submit automático.
    – Jorge B.
    6/01/2015 às 11:12
  • mas e quanto ao filtro e sort das informações retornadas do banco?
    – Ricardo
    6/01/2015 às 11:15
  • tens de criar o filtro conforme as opções selecionadas, ao fazeres o submit automático vais enviar os dados escolhidos pelo utilizador, e ai podes montar a tua query de pesquisa.
    – Jorge B.
    6/01/2015 às 11:17
  • Exemplo: SELECT * FROM tabela1 WHERE tabela1.nome LIKE '%php%' AND TIMESTAMPDIFF(MINUTE,tabela1.tempo,NOW()) < 60. Isto seria uma pesquisa com a palavra "php" e na última hora
    – Jorge B.
    6/01/2015 às 11:22
  • Ok, mas eu estaria repetindo a consulta já que foi realizada a consulta inicial pesquisando somente PHP (depois é que esta disponivel o formulario verde para filtro), como eu faria o formulario verde atendendo as questões elencadas?
    – Ricardo
    6/01/2015 às 11:26

1 Resposta 1

3

Com HTML5:

Formulário principal:

<form id="search_form" method="post" action="">
    <input type="text" name="search_query" />
    <input type="submit" />
</form>

Complemento do formulário (em outro local da página):

<div id="search_filter">
    Upload date:<br/>
    <input type="radio" name="upload_date" value="any" form="search_form" /> Any time<br/>
    <input type="radio" name="upload_date" value="month" form="search_form" /> This month<br/>
    <input type="radio" name="upload_date" value="year" form="search_form" /> This year<br/>
</div>

Veja a propriedade form das tags input, ela indica que aquela tag input pertence ao formulário de cima, mesmo que ela não esteja dentro dele.

Sem HTML5 (Com Javascript)

Formulário principal:

<form id="search_form" method="post" action="">
    <input type="text" name="search_query" />
    <input type="submit" />
    <input type="hidden" name="upload_date" />
</form>

Repare no campo upload_date como hidden.

Complemento do formulário (em outro local da página):

<div id="search_filter">
    Upload date:<br/>
    <input type="radio" name="upload_date" value="any" /> Any time<br/>
    <input type="radio" name="upload_date" value="month" /> This month<br/>
    <input type="radio" name="upload_date" value="year" /> This year<br/>
</div>

Código Javascript:

$("#search_filter > input[name=upload_date]").change(function() {
    var $update = $("#search_form > input[name=upload_date]"),
        value = $(this).prop("value");
    $update.prop("value",value);
});

Sempre que um radio dentro da div#search_filter é alterado ele atualiza o valor do upload_date que está escondido dentro do formulário original. Só é um pouco mais trabalhoso mapear estes eventos dos elementos que estão fora do formulário para os verdadeiros que estão dentro.

1
  • utilizando a solução com HTML5 sempre que o usuario mudar os radio buttons o resultado da query será atualizado? (haverá a submissão do formulario com a nova opção marcada?)
    – Ricardo
    7/01/2015 às 11:05

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 .