Javascript Selecionar dado com mais de um parâmetro

[Felipe Paz]

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.

[DiF]

@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.

 

[Felipe Paz]

@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.

[DiF]

@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

[Felipe Paz]

Sei lá, @DiF, só sei que é assim. E como nunca tinha trabalha em empresa ainda com programação, só por fora, várias dúvidas vem surgindo, coisas que eu nem imaginava antes porque não era necessário. Mas como sempre, valeu imensamente a ajuda.