Fill Selects based on selected item from another Select

0

I am having difficulty filtering two selects based on an earlier selection of the user. In this case, the user will select the client, and the selects seller and manager should only show the sellers and clients of that selected client. Any tips on how to do it will help a lot.

<?php
require('login/autenticacaoUsuario.php');
require('login/verificarAcesso.php');
require('../BDconexao/conexao.php');
?>

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Painel OS</title>

    <link rel="shortcut icon" href="images/favicons/favicon.ico" type="image/x-icon"/> 

    <!-- Bootstrap Core CSS -->
    <link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="../vendor/metisMenu/metisMenu.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="../dist/css/sb-admin-2.css" rel="stylesheet">

    <!-- Morris Charts CSS -->
    <link href="../vendor/morrisjs/morris.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="../vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">


    <!--auto complete -->
      <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" /> 


    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><scriptsrc="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <div id="wrapper">

        <!-- Navigation -->
        <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="Painel-Admin.php">Grupo </a>
            </div>
            <!-- /.navbar-header -->





            <ul class="nav navbar-top-links navbar-right">
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="fa fa-envelope fa-fw"></i> <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-messages">



                    </ul>
                    <!-- /.dropdown-messages -->
                </li>
                <!-- /.dropdown -->
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="fa fa-tasks fa-fw"></i> <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-tasks">


                    </ul>
                    <!-- /.dropdown-tasks -->
                </li>
                <!-- /.dropdown -->
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-alerts">

                    </ul>
                    <!-- /.dropdown-alerts -->
                </li>
                <!-- /.dropdown -->
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-user">
                        <li><a href="editandoPerfil.php"><i class="fa fa-user fa-fw"></i>Editar Perfil</a>
                        </li>
                         <li><a href="configuracoes.php"><i class="fa fa-gear fa-fw"></i> Configurações</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="login/logout.php"><i class="fa fa-sign-out fa-fw"></i>Sair</a>
                        </li>
                    </ul>
                    <!-- /.dropdown-user -->
                </li>
                <!-- /.dropdown -->
            </ul>
            <!-- /.navbar-top-links -->

            <div class="navbar-default sidebar" role="navigation">
                <div class="sidebar-nav navbar-collapse">
                    <ul class="nav" id="side-menu">
                        <li class="sidebar-search">
                            <div class="input-group custom-search-form">
                                <input type="text" class="form-control" placeholder="Search...">
                                <span class="input-group-btn">
                                <button class="btn btn-default" type="button">
                                    <i class="fa fa-search"></i>
                                </button>
                            </span>
                            </div>
                            <!-- /input-group -->
                        </li>
                      <li>
                            <a href="Painel-Admin.php"><i class="fa fa-windows"></i> Home</a>
                        </li>

                        <li>
                            <a href="Dashboard/dash_admin.php"><i class="fa fa-dashboard"> </i> Dashboard</a>
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-bar-chart-o fa-fw"></i> Clientes<span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li>
                                    <a href="cadastrar_cliente.php">Cadastrar Cliente</a>
                                </li>
                                <li>
                                    <a href="listar_clientes.php">Lista de Clientes</a>
                                </li>
                            </ul>
                            <!-- /.nav-second-level -->
                        </li>
                         <li>
                            <a href="#"><i class="fa fa-bar-chart-o fa-users"></i> Usuários<span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li>
                                    <a href="cadastrar_usuario.php">Cadastrar Usuário</a>
                                </li>
                                <li>
                                    <a href="listar_usuarios.php">Lista de Usuários</a>
                                </li>
                            </ul>
                            <!-- /.nav-second-level -->
                        </li>
                       <li>
                            <a href="#"><i class="fa fa-table"></i> Item<span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li>
                                    <a href="cadastrar_item.php">Cadastrar Item</a>
                                </li>
                                <li>
                                    <a href="lista_itens.php">Lista de itens</a>
                                </li>
                            </ul>
                            <!-- /.nav-second-level -->
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-cogs"></i> Ordem de Serviço<span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li>
                                    <a href="cadastrar_ordem_servico.php">Cadastrar OS</a>
                                </li>
                                <li>
                                    <a href="lista_os.php">Lista de OS's</a>
                                </li>
                            </ul>
                            <!-- /.nav-second-level -->
                        </li>

                         <li>
                                  <a href="gerenciamento.php"><i class="fa fa-gear"></i> Gerenciamento</a>
                                </li>



                    </ul>
                </div>
                <!-- /.sidebar-collapse -->
            </div>
            <!-- /.navbar-static-side -->
        </nav>

        <div id="page-wrapper">
            <div class="row">
                <div class="col-lg-12">

                    <h3 class="page-header">Cadastro de Ordem de Serviço (OS)</h3>


                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
                    <div class="row">
                        <div class="col-lg-9">
                        </br>

                                    <form role="form" method="POST" action="Ordem/cadastrar_os.php">



                                          <div class="form-group">
                                            <label>OS Concessionária:</label> 
                                            <input type="text" name="os_conce" class="form-control" value="">

                                        </div>





                                            <p><label>Veículo: </label><span>*</span>
                                                <input type='text' name='veiculo'  class="form-control" value='' id='auto' required="" placeholder="Pesquise o veículo"></p>






                                         <!--trazer todos os clientes-->
                                        <div class="form-group">
                                            <label>Cliente:</label><span> *</span>


                                               <?php

                      $pdo = Conexao::getInstance();

                        $cliente = $pdo->prepare("SELECT * FROM cliente WHERE status='Ativo'");
                          $cliente->execute();

                           if($cliente->rowCount()>=1){         

                        echo '<select name="cliente" id="cliente" class="form-control" required="">';
                            echo '<option value="-">Selecione...</option>';

                                 foreach($cliente->fetchAll() as $res){                            

                                    $id_cliente = $res['id_cliente'];
                                    $nome_cliente = $res['nome_cliente'];                                           
                                   echo '<option data-cliente="'.$id_cliente_select.'" value="'.$id_cliente.'">'.$nome_cliente.'</option>';

                                }

                                echo'</select>';
                              }
                                ?>

                                            </div>

                                        <!--trazer todos os vendedores-->
                                        <div class="form-group">
                                            <label>Vendedor:</label>

                                             <?php

                      $pdo = Conexao::getInstance();

                        $vendedor = $pdo->prepare("SELECT * FROM usuario WHERE tipo_usuario='Vendedor' AND cliente_atuacao=:cliente");
                            $vendedor -> bindParam(':cliente',$id_cliente,PDO::PARAM_INT);

                          $vendedor->execute();

                           if($vendedor->rowCount()>=1){         

                              echo '<select name="vendedor" class="form-control">';
                              echo '<option value="0">Selecione...</option>';

                                 foreach($vendedor->fetchAll() as $res){                            


                                    $nome = $res['nome_funcionario'];                                           

                                   echo '<option value="'.$nome.'">'.$nome.'</option>';

                                }

                                echo'</select>';
                              }
                                ?>

                                        </div>





                                                <div class="form-group">
                                            <label>Gerente 1:</label>

        <?php

                      $pdo = Conexao::getInstance();

                        $gerente = $pdo->prepare("SELECT * FROM usuario WHERE tipo_usuario='Gerente'");

                          $gerente->execute();

                           if($gerente->rowCount()>=1){         

                              echo '<select name="gerente1" class="form-control" >';
                              echo '<option value="0">Selecione...</option>';

                                 foreach($gerente->fetchAll() as $res){                            


                                    $nome = $res['nome_funcionario'];                                           

                                   echo '<option value="'.$nome.'">'.$nome.'</option>';

                                }

                                echo'</select>';
                              }
                                ?>

                                        </div>


                                        <div class="form-group">
                                            <label>Observações:</label> 
                                                <input type="text" name="observacao" class="form-control" value="" placeholder="">
                                        </div>





                                        <button type="submit" class="btn btn-success">Cadastrar</button>
                                        <button type="reset" class="btn btn-warning">Limpar dados</button>
                                        <a href="lista_os.php"><button type="button" class="btn btn-info">Listar Ordens</button></a>

                                    </form>
                                    </br>
                                    </br>



                                    </div>




    </div>
    <!-- /#wrapper -->

    <!-- jQuery -->
    <script src="../vendor/jquery/jquery.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="../vendor/bootstrap/js/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="../vendor/metisMenu/metisMenu.min.js"></script>

    <!-- Morris Charts JavaScript -->
    <script src="../vendor/raphael/raphael.min.js"></script>
    <script src="../vendor/morrisjs/morris.min.js"></script>
    <script src="../data/morris-data.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="../dist/js/sb-admin-2.js"></script>




<!-- autocomplete jquery-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script><scripttype="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script><scripttype="text/javascript">
$(function() {

    //autocomplete veiculo
    $("#auto").autocomplete({
        source: "search.php",
        minLength: 1
    });  

      //autocomplete cor
    $("#auto_cor").autocomplete({
        source: "search_cor.php",
        minLength: 1
    });   


       //autocomplete marca
    $("#auto_marca").autocomplete({
        source: "search_marca.php",
        minLength: 1
    });              

});
</script>



</body>

</html>
    
asked by anonymous 15.12.2017 / 17:43

1 answer

0

When the user chooses a select client item you must make an ajax request to the server requesting that the vendors associated with the id of the selected client be returned. For example, create a file called filtar_clientes.php at the root of your site, with the following content:

<?php

        $pdo = Conexao::getInstance();

        $vendedor = $pdo->prepare("SELECT * FROM usuario WHERE tipo_usuario='Vendedor' AND cliente_atuacao=:cliente");
        $vendedor -> bindParam(':cliente',$_GET['id_cliente'],PDO::PARAM_INT);

        $vendedor->execute();

        if($vendedor->rowCount()>=1){         

            echo '<option value="0">Selecione...</option>';

            foreach($vendedor->fetchAll() as $res){                            


                $nome = $res['nome_funcionario'];                                           

                echo '<option value="'.$nome.'">'.$nome.'</option>';

            }

        }
    ?>

Of course, some includes must be done to work properly.

And then create and link a javascript file at the end of your page (right after joining jquery), with the following content:

<script>

$( "#cliente" ).change(function() {
  var client_id = $(this).val();
  $.ajax({
    url: '/filtar_clientes.php',
    method: 'get',
    data: {id_cliente: cliente_id},
    success: function(dados){
        //troca conteudo do select com name igual a vendedor com os dados retornado pelo servidor (/filtrar_clientes.php)
        $('[name="vendedor"]').html(dados);
    };
  });
});


</script>

This should resolve.

    
17.12.2017 / 19:59