Fill Selects based on selected item from another Select

Asked

Viewed 332 times

0

I’m having trouble filtering two selects based on a previous user selection. In the case, the user will select the client, and the selects seller and manager should only show the sellers and customers of this selected customer. Any tips on how to do will greatly help.

<?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>
        <script src="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>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>    

<script type="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>
php html mysql ajax

1 answer

0


When the user chooses an item from the select client you must make an ajax request to the server asking for the sellouts associated with the selected client id to be returned. For example, create a file called filtar_clients.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 made to work properly.

And then create and link a javascript file at the end of your page (soon after jquery inclusion), 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>

That should solve.

Browser other questions tagged php html mysql ajax

You are not signed in. Login or sign up in order to post.