Passar dados de variavel para SELECT

Nova Ourora · Agosto 17, 2018

 <div class="card-block">
                     <div class="card-block">
                     <form class="form-inline">
                         <select class="form-control" id="nmProduto" style="max-width: 300px;">
                           <option value="">Selecione o Produto</option>
                           <option>SUPORTE PARA CARIMBO DE MADEIRA COM 06</option>
                           <option>BOTON PERSONALIZADO - SESMT</option>
                           <option>RELOGIO DESPERTADOR 0 A 60 MIN.</option>
                        
                         </select>

Quero que esta DIV pegue os valores de uma variável (que fica na tabela produtos).

PARECE SIMPLES MAIS TA DIFÍCIL

Fernando C · Agosto 17, 2018

com PDO:

https://trocadicas.blogspot.com/2015/09/menu-dropdown-dinamico-em-php-com-pdo-e.html

Nova Ourora · Agosto 17, 2018

2 horas atrás, Fernando C disse:

com PDO:

https://trocadicas.blogspot.com/2015/09/menu-dropdown-dinamico-em-php-com-pdo-e.html

<!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, shrink-to-fit=no">
      <meta name="mobile-web-app-capable" content="yes">
      <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
      <title>Caixa Loja</title>
      <!-- Bootstrap -->
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">      <link rel="stylesheet" href="assets/js/chosen/docsupport/prism.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.css">
      <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<style>
     .delete {cursor: pointer;}
         .chosen-results li {font-size: 11px;}
         .table-produtos tbody tr td {font-size: 12px;}

</style>
      <!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->
   </head>
   <body>
      <div class="container mt-3">
         <div class="row">
            <div class="col">
               <div class="card">
                 <div class="card-header">
                   Lançamento de Produtos
                 </div>
                 
                 
                 
                 <!--ESTA PARTE QUE PRECISO DOS DADOS DA TABELA 'produtos'    -->
                 
                 <div class="card-block">
                     <form class="form-inline">
                         <select class="form-control" id="nmProduto" style="max-width: 300px;">
                           <option value="">Entre com o Codigo de Barras</option>
                          
                         </select>

                        <!--ESTA PARTE QUE PRECISO DOS DADOS DA TABELA 'produtos'    -->
                       
                       
                         <label class="sr-only" for="inlineFormInput">Quantidade</label>
                         <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0 ml-sm-2" id="qtProduto" placeholder="Quant" style="width:70px">
                         <label class="sr-only" for="inlineFormInput">Valor</label>                       
                         <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="vlProduto" placeholder="Valor (R$)" style="width:98px">
                         <button type="submit" class="btn btn-primary" id="btnAdicionarProduto">+</button>
                         <p class="text-danger ml-3 pt-2 invisible" id="msgValidaForm">Favor preencher <strong>todos os campos</strong> do produto!</p>
                     </form>
                     <table class="table table-sm table-striped mt-3 table-produtos">
                       <thead>
                         <tr>
                           <th style="max-width: 600px;">Produto</th>
                           <th>Quantidade</th>
                           <th class="text-right pr-5">Valor (R$)</th>
                           <th class="text-right pr-5 vlTotalProduto">Total</th>
                           <th>Ação</th>
                         </tr>
                       </thead>
                       <tbody>
                       </tbody>
                       <tfoot class="invisible">
                         <tr>
                           <th></th>
                           <th></th>
                           <th class="text-right">SubTotal ❯</th>
                           <th class="text-right pr-5" id="vlTotalPedido"></th>
                           <th></th>
                         </tr>
                       </tfoot>
                     </table>
                 </div>
               </div>
            </div>
         </div>   
      </div>
      <script>
         $("document").ready(function(){
         /* Produto recebe o foco ao chamar o sistema */
         $("#nmProduto").chosen().trigger('chosen:activate');
         
         /* Quando o produto for selecionado, a quantidade recebe o foco */
         $("#nmProduto").change(function(){
            $("#qtProduto").focus();
         })
         
         /* Adiciona a máscara ao input do valor do produto ( plugin mask utilizado ) */
         $('#vlProduto').mask("00000.00",{reverse: true});

         /* Adiciona a máscara ao input de quantidade do produto ( plugin mask utilizado ) */
         $('#qtProduto').mask("00000",{reverse: true});

         $("#btnAdicionarProduto").on('click', function($e){
            /* Evita que o evento ocorra */
            $e.preventDefault();

            /* Adiciona os produtos somente se o formulário for preenchido */
            if(validaForm())
            {
               /* Declarando a variável tb */
               var tb;

               /* preenchendo informações na variável tb para inserção no tbody da tabela */
               tb = "<tr><td>" + $("#nmProduto").val() + "</td>" +
                    "<td>" + $("#qtProduto").val() + "</td>" +
                    "<td class=\"text-right pr-5\">" + ($("#vlProduto").val() * 1).toFixed(2) + "</td>" +
                    "<td class=\"text-right pr-5\">" + ( $("#vlProduto").val() * $("#qtProduto").val() ).toFixed(2) + "</td>" +
                    "<td><button class=\"btn btn-light btn-sm delete text-danger\">✖</button></td></tr>";
               
               /* Adiciona a variável tb acima que contém os dados do produto no tbody da tabela.
                  Estas informações são inseridas no final do tbody */
               $("tbody").append(tb);

               /* Após inserção da linha do produto, os valores do pedido são atualizados */
               atualizaVlPedido();

               /* Se existir mais que 1 item no pedido, é removido a classe 
                  invisible do foot da tabela, mostrando assim o valor total do pedido */
               if($(".table-produtos tbody tr").length > 0)
                  $(".table-produtos tfoot").removeClass("invisible");
              
               /* As 3 linhas abaixo redefinem os campos de entrada do produto para deixando-os vazios*/
               $("#nmProduto").val('').trigger("chosen:updated");
               $("#vlProduto").val('');
               $("#qtProduto").val('');
              
               /* Define o foco para a seleção de produtos */
               $("#nmProduto").chosen().trigger('chosen:activate');
            }
         })

         /* Ao clicar na ação delete remove a linha dinamicamente da tabela */
         $(document).on("click",".delete",function() {
            /* Remove a linha referente ao produto clicado */
            $(this).parent().parent().remove();
            
            /* Se existir somente um produto no pedido, e for removido, o foot da tabela fica invisível
               O foot é usado para mostrar o valor total do pedido */               
            if($(".table-produtos tbody tr").length === 0)
               $(".table-produtos tfoot").addClass("invisible");
            
            /* Após exclusão da linha, os valores do pedido são atualizados */
            atualizaVlPedido();
         })

         /* Validação do Formulário */
         function validaForm()
         {     
            var formValid = true;
            if($("#nmProduto").val() === "")
               formValid = false;
            if($("#vlProduto").val() === "")
               formValid = false;
            if($("#qtProduto").val() === "")
               formValid = false;

            if(!formValid)
            {
               /* Remove a classe invisible do elemento msgValidaForm */
               $("#msgValidaForm").removeClass("invisible")
               /* Após 4 segundo a mensagem desaparece com a classe invisible sendo novamente adicionada */
               setTimeout(function(){
                  $("#msgValidaForm").addClass("invisible")
               }, 4000);

               return false;
            } else 
               return true;
         }

         /* Atualiza Valor Total do Pedido */
         function atualizaVlPedido()
         {
            /* Define o valor do pedido */
            var vlTotalPedido = 0;

            /* Varre todos os valores dos produtos da tabela */
            $(".table-produtos tbody tr td:nth-child(4)").each(function() {
               vlTotalPedido += parseFloat($(this).text());
            })
            /* Atualiza o valor do pedido na tabela */
            $("#vlTotalPedido").text(vlTotalPedido.toFixed(2));
         }

      })     
      </script>
      <script src="assets/jquery/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

      <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.jquery.js" type="text/javascript"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.js" type="text/javascript"></script>
   </body>
   <a href="index.html" button type="button" class="btn btn-success">Voltar</button></a><br>
</html>

Entrar

Arquivado

Passar dados de variavel para SELECT

Recommended Posts

Nova Ourora 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fernando C 128

Compartilhar este post

Link para o post

Compartilhar em outros sites

Nova Ourora 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Saber se todos os produtos de uma consulta estão cadastrados no banco de dados

Abrir url na mesma janela

Sistema de Login

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante