Ir ao conteúdo
  • Cadastre-se

Javascript Selecionar dado com mais de um parâmetro


Posts recomendados

E aí gurizada, beleza? Anteriormente fiz um post onde citava o caso de filtar dados a partir de um select na tabela. Pois bem, revisando o que necessito e entendo isso, basicamente o que o usuário irá fazer é selecionar uma option no select, e clicar no input radio correspente.

 

Exemplo:

O select possui

<select>
  <option value="0">Mostrar todos</option>
  <option value="1">Contas a Pagar</option>
  <option value="2">Contas a receber</option>
</select>

E mais três input radio: 

<input type="radio" id="dia"> Dia
<input type="radio" id="mes"> Mês
<input type="radio" id="ano"> Ano

Eu preciso que, quando o usuário selecionar o tipo de conta no select e clicar no input correspondente ao período, a tabela mostre apenas esses valores.

Ex: Contas a pagar - dia (data atual).

A tabela vai mostrar todos os valores que sejam contas a pagar na data de hoje.

Link para o comentário
Compartilhar em outros sites

  • Moderador

@Felipe Paz

 

Pelo que entendi, você pode fazer isso usando o ajax combinado com um switch case.

 

Desta maneira:

 

HTML:

<form id="contas">
<select name="tipoConta">
  <option value="0">Mostrar todos</option>
  <option value="1">Contas a Pagar</option>
  <option value="2">Contas a receber</option>
</select>

<input type="radio" name="escolha" id="dia" value="dia"> Dia
<input type="radio" name="escolha" id="mes" value="mes"> Mês
<input type="radio" name="escolha" id="ano" value="ano"> Ano
</form>

jQuery:

$(document).ready(function(){
   
   $('input[type=radio][name=escolha]').on('change', function() {
     
     var dados = $('#contas').serialize();
     switch($(this).val()) {
         case 'dia':
             $.ajax({
                  url: 'processaDados.php',
                  dataType: 'HTML',
                  method: 'GET',
                  data:  dados
             }).done(function(retorno){
                   $('#div_onde_você_vai_mostrar').html(dados); 
             });  
             break;
         case 'mes':
             $.ajax({
                  url: 'processaDados.php',
                  dataType: 'HTML',
                  method: 'GET',
                  data:  dados
             }).done(function(retorno){
                   $('#div_onde_você_vai_mostrar').html(dados); 
             });  
             break;
         case 'ano':
             $.ajax({
                  url: 'processaDados.php',
                  dataType: 'HTML',
                  method: 'GET',
                  data:  dados
             }).done(function(retorno){
                   $('#div_onde_você_vai_mostrar').html(dados); 
             });  
             break;    
     }
});

});

Veja um exemplo online:  https://jsfiddle.net/dife/cknsmwmc/1/

 

Ali no JSFiddle, não tem como submeter o form via ajax, por isso mostrei inserindo o valor da serialização em um elemento div, para você ver o que seria enviado através do GET ao processaDados.php.

 

Só fica faltando ali, como você vai definir os dias, anos ou meses.

Por sugestão, crie um campo para o usuário entrar com um valor, seja de dia, mês ou ano.

 

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

@DiF Entendi perfeitamente tua sugestão e, pra mim, era seria a única e mais fácil alternativa, mas aí surge um problema. A empresa q eu to trabalhando não trabalha com ajax. Todas as requisões são feitas em input de formulários. Por isso, eu precisaria exatamente disso que você sugeriu mas sem ajax. Pegando os index das colunas, aplicando classes pra fazer o filtro, já com a tabela  toda carregada. Toda a filtragem seria totalmente client-side.

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

  • Moderador

@Felipe Paz Nesse caso, é meio complicado mesmo. Porque razão não usam ajax? O ajax não necessariamente pode ser feito em jQuery, pode ser em javascript puro(mais difícil)

 

Não consigo pensar em outra forma de fazer isso, sem pelo menos usar o ajax. 

Dá para fazer de duas formas,  uma por ajax e PHP  e outra só com ajax e jQuery

 

Escrevi um artigo sobre como fazer em ajax e php

CODER DIF! Filtro de dados com checkbox no php e ajax

 

Talvez se você pensar em uma gambiarra usando campos HIDDEN.. talvez possa achar uma solução

  • Obrigado 1
Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário 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

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...