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

[Jefferson andre 2]

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
 

[ExtremsX 58]

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

[Omar~ 87]

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

 

[Jefferson andre 2]

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