Ir para conteúdo
Jefferson andre

Como trocar o filtro do select mysql apos um click no checkbox

Recommended Posts

boa tarde mestres,

 

Estou com um problema aqui e nao conseguindo resolver, tenho a seguinte situacao inicial: ao entrar no cadastro de vendas os clientes pessoa fisica e juridica aparecem juntos, criei um checkbox e quando selecionado troca o parametro de filtro para apenas juririco ou apenas fisico.

 

Eu carrego o parametro de filtro logo no inicio do programa informando o tipo_do_cadastro como sendo ambos (1 ou 0):
$filtrarClientesParametros ="SELECT id, razao,deletado, ativo, id_empresa,tipo_do_cadastro FROM clientes WHERE deletado=0 AND id_empresa='$id_empresa' AND (tipo_do_cadastro = 0 OR tipo_do_cadastro = 1) ORDER BY ativo,razao";

 

A tela eh montada mas nao sei como atualizar o <select> com as opções apos o check ter sido pressionado, quando pressionado a mensagem filtro ativado aparece corretamente.

 

Segue o trecho do html:

<div class="form-group col-md-6">
   <label for="inputid_cliente">Clientes</label>
    <br>
    <?php        
        $filtro_clientes  = $arquivo->prepare($filtrarClientesParametros);
        $filtro_clientes->execute();
    ?>
    <input type="checkbox" class="form-check-input" id="Check_id_cliente" onclick="myFunction()">
    <p id="text" style="display:none">Filtro ativado!</p>
    <select autofocus class ="custom-select col-md-11" name="id_cliente" required id="id_cliente" name="id_cliente">
    <?php 
        while ($clientes = $filtro_clientes->fetch()) {?>
            <option value = "<?php echo $clientes['id'] ?>"><?php echo $clientes['razao'];?> </option>
            <?php 
             }
            ?>
    </select>
</div>

Segue a funcao:

<script>
function myFunction() {
  var checkBox = document.getElementById("Check_id_cliente");
  var text = document.getElementById("text");
  if (checkBox.checked == true){
    text.style.display = "block";
      $filtrarClientesParametros ="SELECT id, razao,deletado, ativo, id_empresa,tipo_do_cadastro FROM clientes WHERE deletado=0 AND id_empresa='$id_empresa' AND tipo_do_cadastro = 0 ORDER BY ativo,razao";

  } else {
     text.style.display = "none";
      $filtrarClientesParametros ="SELECT id, razao,deletado, ativo, id_empresa,tipo_do_cadastro FROM clientes WHERE deletado=0 AND id_empresa='$id_empresa' AND tipo_do_cadastro = 1 ORDER BY ativo,razao";
  }
}
</script>

Obrigado pela atenção
 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Primeiro, pelo o que entendi, ou é um ou é outro, nunca é os dois ao mesmo tempo, se esse for o caso, a escolha correta é um RADIOBOX e não um CHECKBOX, ou até mesmo um SELECT.

 

Segundo, tente aprender sobre o jQuery, isso vai ajudar a manusear o HTML, é muito simples e fácil de se usar.

 

Terceiro, sobre o seu problema, quando o usuário mudar entre um e outro, eu recomendaria, de uma forma bem facil, você redirecionar a pagina passando um parametro no GET (ex: page.php?escolhido=juridica ou page.php?escolhido=fisica), e no PHP você tem um IF/ELSE que diz qual query executar

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Jefferson andre 

Pelo que eu entendi você está trazendo ambos os resultados em uma query:

Em 30/03/2020 at 16:37, Jefferson andre disse:

tipo_do_cadastro = 0 OR tipo_do_cadastro = 1

 

E ao selecionar um check box o menu suspendo "<select>" deve ser alterado conforme estiver marcado ou não.

Em 30/03/2020 at 16:37, Jefferson andre disse:

check ter sido pressionado, quando pressionado a mensagem filtro ativado aparece corretamente.

 

Em resumo atualizar o seletor......

 

Em 30/03/2020 at 16:37, Jefferson andre disse:

mas nao sei como atualizar o <select>

É meu caro muitos também não fazem a mínima ideia como fazer isso também.

Principalmente para quem não sabe nada de javascript.

 

Então no caso para isso ser viável uma vez que você trás os dados em array do php e tem que processar-los no javascript, mais específico nessa situação podemos nos usar o JSON.

Pois bem simulei aqui um array de resultados do banco de dados:

Spoiler

<?php
$db = [
    ['id' => 1, 'razao' => 'Usuário 1 - tipo 0', 'tipo_do_cadastro' => '0'],
    ['id' => 2, 'razao' => 'Usuário 2 - tipo 0', 'tipo_do_cadastro' => '0'],
    ['id' => 3, 'razao' => 'Usuário 3 - tipo 0', 'tipo_do_cadastro' => '0'],
    ['id' => 4, 'razao' => 'Usuário 4 - tipo 0', 'tipo_do_cadastro' => '0'],
    ['id' => 5, 'razao' => 'Usuário 5 - tipo 0', 'tipo_do_cadastro' => '0'],
    ['id' => 6, 'razao' => 'Usuário 6 - tipo 1', 'tipo_do_cadastro' => '1'],
    ['id' => 7, 'razao' => 'Usuário 7 - tipo 1', 'tipo_do_cadastro' => '1'],
    ['id' => 8, 'razao' => 'Usuário 8 - tipo 1', 'tipo_do_cadastro' => '1'],
];

 

 

A primeira coisa é codificar esse array em json para podemos lançar-lo no javascript:

<?php
$arr = [];
foreach ($db as $value) {
    $arr[] = $value;
}
$json = json_encode($arr);

 

E assim normalmente podemos ter o html inicial aquele que será composto no carregamento da página.

<input type="checkbox" id="filtro" />
<select id="seletor">
    <?php
    foreach ($db as $value) {
        if ($value['tipo_do_cadastro'] == '1') { // Ao carregar a página só terão usuários tipo 1
            ?>
            <option value ="<?= $value['id'] ?>"><?= $value['razao']; ?> </option>
            <?php
        }
    }
    ?>
</select>

Como pode ver tenho um menu suspenso <select> que será modificado quando o "checkbox" é marcado ou não

 

Agora entramos no Javascript que vai fazer a manipulação.

Bom fiz o script no esquema de orientação a objeto por ser mais prático de informar dados entre as funções.

Mas o segredo mesmo é varrer o array que vamos passar pelo php.

Verificar a checagem do checkbox e se ele condiz com o valor 0 ou 1 de acordo com os dados do array.

No mais é algo muito simples de se fazer:

 

Então está aqui o javascript necessário, cabe você agora adaptar ou modificar conforme for necessário aí:

Spoiler

var myFuntion = function (dados) {
    var $this = {
        'json': JSON.parse(dados), // Com isso trafegamos o array do php para o javascript
        'seletor': document.getElementById('seletor'),
        'checkBox': document.getElementById('filtro'),
        'novaOpcao': null
    };

    function filtro() {
        removerOpcoes();
        $this.json.forEach(criarOpcoes);
    }

    /*
     * Remover todas as opçoes do seletor quando o check-box é alterado
     */
    function removerOpcoes() {
        while ($this.seletor.childNodes.length) {
            $this.seletor.removeChild($this.seletor.firstChild);
        }
    }

    function criarOpcoes(e) {
        if ($this.checkBox.checked && e.tipo_do_cadastro == '0') {
            $this.novaOpcao = document.createElement('option');
            $this.novaOpcao.innerText = e.razao;
            $this.seletor.appendChild($this.novaOpcao);
        } else if (!$this.checkBox.checked && e.tipo_do_cadastro == '1') {
            $this.novaOpcao = document.createElement('option');
            $this.novaOpcao.innerText = e.razao;
            $this.seletor.appendChild($this.novaOpcao);
        }
    }

    this.filtro = filtro;
};

 

 

E para executar criamos o objeto da classe JS e adicionamos um evento ao checkbox chamando o método da classe:

<script>
    var objeto = new myFuntion('<?= $json ?>'); // $json o array do php
    document.getElementById('filtro').addEventListener('change', objeto.filtro, false);
</script>

 

Por fim vale a dica se a coluna que trás o tipo de usuário 1?0 for INTEGER, converta esse valor para STRING pois o numero zero em um condição javascript quer dizer false, e não o número zero.

Então por exemplo isso:

$this.checkBox.checked && e.tipo_do_cadastro == 0

O objeto tem está marcado e evento tipo deve ser falso para a condição valer.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
Em 04/04/2020 at 06:03, Omar~ disse:

@Jefferson andre 

Pelo que eu entendi você está trazendo ambos os resultados em uma query:

 

E ao selecionar um check box o menu suspendo "<select>" deve ser alterado conforme estiver marcado ou não.

 

Em resumo atualizar o seletor......

 

É meu caro muitos também não fazem a mínima ideia como fazer isso também.

Principalmente para quem não sabe nada de javascript.

 

Então no caso para isso ser viável uma vez que você trás os dados em array do php e tem que processar-los no javascript, mais específico nessa situação podemos nos usar o JSON.

Pois bem simulei aqui um array de resultados do banco de dados:

  Ocultar conteúdo


<?php
$db = [
    ['id' => 1, 'razao' => 'Usuário 1 - tipo 0', 'tipo_do_cadastro' => '0'],
    ['id' => 2, 'razao' => 'Usuário 2 - tipo 0', 'tipo_do_cadastro' => '0'],
    ['id' => 3, 'razao' => 'Usuário 3 - tipo 0', 'tipo_do_cadastro' => '0'],
    ['id' => 4, 'razao' => 'Usuário 4 - tipo 0', 'tipo_do_cadastro' => '0'],
    ['id' => 5, 'razao' => 'Usuário 5 - tipo 0', 'tipo_do_cadastro' => '0'],
    ['id' => 6, 'razao' => 'Usuário 6 - tipo 1', 'tipo_do_cadastro' => '1'],
    ['id' => 7, 'razao' => 'Usuário 7 - tipo 1', 'tipo_do_cadastro' => '1'],
    ['id' => 8, 'razao' => 'Usuário 8 - tipo 1', 'tipo_do_cadastro' => '1'],
];

 

 

A primeira coisa é codificar esse array em json para podemos lançar-lo no javascript:


<?php
$arr = [];
foreach ($db as $value) {
    $arr[] = $value;
}
$json = json_encode($arr);

 

E assim normalmente podemos ter o html inicial aquele que será composto no carregamento da página.


<input type="checkbox" id="filtro" />
<select id="seletor">
    <?php
    foreach ($db as $value) {
        if ($value['tipo_do_cadastro'] == '1') { // Ao carregar a página só terão usuários tipo 1
            ?>
            <option value ="<?= $value['id'] ?>"><?= $value['razao']; ?> </option>
            <?php
        }
    }
    ?>
</select>

Como pode ver tenho um menu suspenso <select> que será modificado quando o "checkbox" é marcado ou não

 

Agora entramos no Javascript que vai fazer a manipulação.

Bom fiz o script no esquema de orientação a objeto por ser mais prático de informar dados entre as funções.

Mas o segredo mesmo é varrer o array que vamos passar pelo php.

Verificar a checagem do checkbox e se ele condiz com o valor 0 ou 1 de acordo com os dados do array.

No mais é algo muito simples de se fazer:

 

Então está aqui o javascript necessário, cabe você agora adaptar ou modificar conforme for necessário aí:

  Ocultar conteúdo


var myFuntion = function (dados) {
    var $this = {
        'json': JSON.parse(dados), // Com isso trafegamos o array do php para o javascript
        'seletor': document.getElementById('seletor'),
        'checkBox': document.getElementById('filtro'),
        'novaOpcao': null
    };

    function filtro() {
        removerOpcoes();
        $this.json.forEach(criarOpcoes);
    }

    /*
     * Remover todas as opçoes do seletor quando o check-box é alterado
     */
    function removerOpcoes() {
        while ($this.seletor.childNodes.length) {
            $this.seletor.removeChild($this.seletor.firstChild);
        }
    }

    function criarOpcoes(e) {
        if ($this.checkBox.checked && e.tipo_do_cadastro == '0') {
            $this.novaOpcao = document.createElement('option');
            $this.novaOpcao.innerText = e.razao;
            $this.seletor.appendChild($this.novaOpcao);
        } else if (!$this.checkBox.checked && e.tipo_do_cadastro == '1') {
            $this.novaOpcao = document.createElement('option');
            $this.novaOpcao.innerText = e.razao;
            $this.seletor.appendChild($this.novaOpcao);
        }
    }

    this.filtro = filtro;
};

 

 

E para executar criamos o objeto da classe JS e adicionamos um evento ao checkbox chamando o método da classe:


<script>
    var objeto = new myFuntion('<?= $json ?>'); // $json o array do php
    document.getElementById('filtro').addEventListener('change', objeto.filtro, false);
</script>

 

Por fim vale a dica se a coluna que trás o tipo de usuário 1?0 for INTEGER, converta esse valor para STRING pois o numero zero em um condição javascript quer dizer false, e não o número zero.

Então por exemplo isso:

$this.checkBox.checked && e.tipo_do_cadastro == 0

O objeto tem está marcado e evento tipo deve ser falso para a condição valer.

 

Muito obrigado pela resposta, vou analisar o que voce postou e tentar adaptar aqui. Abraços

Em 02/04/2020 at 14:58, ExtremsX disse:

Primeiro, pelo o que entendi, ou é um ou é outro, nunca é os dois ao mesmo tempo, se esse for o caso, a escolha correta é um RADIOBOX e não um CHECKBOX, ou até mesmo um SELECT.

 

Segundo, tente aprender sobre o jQuery, isso vai ajudar a manusear o HTML, é muito simples e fácil de se usar.

 

Terceiro, sobre o seu problema, quando o usuário mudar entre um e outro, eu recomendaria, de uma forma bem facil, você redirecionar a pagina passando um parametro no GET (ex: page.php?escolhido=juridica ou page.php?escolhido=fisica), e no PHP você tem um IF/ELSE que diz qual query executar

ok, grato pelas dicas. Vou tentar aqui. Abraços

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 helkton
      iai galera, tenho uma pendenga e não consigo achar nada pra suprir minha dúvida rsss
      seguinte....
       
      Tenho um cardápio Online onde tenho os devidos ITENS sendo abertos em uma janela modal e nesta janela tenho os devidos ITENS EXTRAS em um checkbox que o usuario clicam e adicionam
      esta é minha lista de ADICIONAIS EXTRAS QUE PEGO DO BANCO DE DADOS 
       
      <label style="border:0px red solid;font-size:1em;width:90%;text-align:left;padding:0px;margin-left:2em;" onclick="somar()"> <input style="height:23px;width:23px;cursor:pointer" type="checkbox" class='limited<?php echo $resultExtrasDelivery->idExtraDelivery?>' id="valorItemExtra" name="idExtraSelects[]" value="<?php echo $resultItensExtras->valorItemExtra?>" > <span style="cursor:pointer"><?php echo $resultItensExtras->nomeItemExtra?> <span style="font-size:0.7em;color:#DD2C00"> <small> <?php if($resultItensExtras->valorItemExtra == '0.00'){echo'';}else{echo '+R$ '.$resultItensExtras->valorItemExtra.'<input type="text" value="'.$resultItensExtras->valorItemExtra.'">';}?></small> </span> </span> </label> ela vem tipo assim
      AcréscimoTradicional - Escolha até 3 opções
      BACON 1,00
      CALABRESA 1,00
      MUSSARELA 1,00
      PRESUNTO 1,00
      OVO 1,00
       
      o que quero fazer é somente somar os itens clicados pelo usuario e somar com o TOTAL DO ITEM 
      tipo pegar o total do item tipo R$30,00 e ir somando com os acrescimos escolhidos
       
      <script> function somar() { // var valorItem = document.getElementById('valorItemExtra').value; var checkbox = document.getElementById('#valorItemExtra'); var total = 0; if(checkbox.checked == true){ total += checkbox.value; } document.getElementById('somar').innerHTML = total; } </script>  
    • Por Sapinn
      Salve! Não consigo verificar se o checkbox foi marcado, isso não faz o menor sentido porquê aparentemente eu fiz tudo certo.
       
      HTML:
       <div class="mt-4 mb-3 row ">                 <label class="label_checkbox">Adicionar customização                   <input type="checkbox" id="checkbox" name="custom_shirt">                   <span class="checkmark"></span>                 </label>               </div>  
      JAVASCRIPT:
       let checkedCustomize = document.getElementById("checkbox");  if(checkedCustomize.checked){     alert("Checkbox marcado");  }else{      console.log("checkbox não marcado");  }  
    • Por Caio Vargas
      Meus amigos estou com um problema que não consigo resolver as vezes e coisas simples mais não encaixa na minha cabeca eu tenho multiplos checkbox onde cada um tem o valor porem eu tô salvando isso em uma tabela única separado por vírgula não sei se isso e correto mais na hora de recuperar e colocar como checado não vai pq ele retorna os valores tudo jundo mesmo dando um explode não vai 
    • Por tony_lu
      Olá pessoal quero colocar um campo checkbox de aceito os termos de uso, mas não estou conseguindo validar este campo para enviar
      o form apenas se este campo por marcado podem me ajudar?
    • Por carlosmassam
      Bom dia a todos. Eu tenho o seguinte código em HTML
      <input type="checkbox" id="checkmarcacao1" name="checkmarcacao1" value="checkmarcacao1"> <input type="time" id="hora101" name="hora101" disabled="disabled"> E tenho o seguinte código em Javascript
      <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script> $(document).ready(function () { $('input[name=checkmarcacao1]').change(function() { if ($(this).is(':checked')) { $('input[name=hora101]').removeAttr('disabled'); } else { $('input[name=hora101]').attr('disabled',true); } }); }); </script> Esse meu código em Javascript faz o seguinte: Quando meu Checkbox está marcado, ele habilita o input time. Se eu desmarcar o checkbox, o input time é desabilitado.
      Acontece que se eu marcar o checkbox, escrever no input time, por exemplo: 12:34, depois desmarcar o checkbox o  input time fica desabilitado porém o valor 12:34 ainda fica escrito nele.
      Eu gostaria de saber como apagar o valor do input time quando o checkbox estiver desmarcado. 
       
      Quem quiser testar o código segue o link: https://jsfiddle.net/o8f3zvqu/
×

Informação importante

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