Jump to content
Nova Ourora

Digita código de barras e aparece valor do produto

Recommended Posts

Olá estou criando um sistema aqui na loja, preciso que quando digite o código de barras ele pegue no banco de dados descrição do produto com seu preço, e apareça em uma lista.

 

(Quer dizer que  só  colocar o código do produto e que o preço do produto e o nome do produto devem aparecer automaticamente e  ir adicionando automaticamente o total gasto.)

 

 

<!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>
                 <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>

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

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By quimera
      Bom/boa dia/tarde/noite, estou com um problema (nem notou neh?!):
       
      Estou fazendo uma extensão para preenchimento automático de login e formulário, em alguns sites funciona normalmente, mas existe uns sites que não permitem o preenchimento, e são eles que eu estou buscando auternativas.
       
      eu injeto o texto no input $("input[type=text]").val("Meu texto") mas quando fico observando o valor ou quando envio o formulário simplesmente diz que o input não tem valor (não foi preenchido) mesmo vendo o texto nele.
      O que pode ser?
      Que tipo de mandinga é essa?
      E o que posso fazer pra contornar?
    • By luciano
      Boa noite pessoal alguém poderia me ajudar por favor,
      gostaria de pagar o valor da função random e colocar na imagem.
      -----função-----
      <p id="demo"></p>
      <script>
      document.getElementById("demo").innerHTML =
      Math.floor((Math.random() * 22) + 1);        
      </script>
      ----------
       <img src="imagens/('#demo').jpg" alt="Card">
       
      Eu ja tentei:
      ('#demo')
      '#demo'
      "#demo"
      Nada funciona.
       
      Por favor me dem uma luz, não manjo de java
      Obrigado
    • By aegospm
      Olá, amigos.  Eu tenho um array ($array) que foi gerado automaticamente no meu código e seu retorno é este:
      Array ( [0] => Array ( [em] => 0.017142857142857 [vítimas] => 0.017142857142857 [na] => 0.017142857142857 [mulheres] => 0.017142857142857 [criança] => 0.011428571428571 [jovem] => 0.011428571428571 [o] => 0.011428571428571 [nada.] => 0.011428571428571 [morreram] => 0.011428571428571 [hora.] => 0.011428571428571 ) [1] => Array ( [e] => 0.024096385542169 [O] => 0.018072289156627 [anos,] => 0.018072289156627 [do] => 0.018072289156627 [sem] => 0.012048192771084 [atiraram] => 0.012048192771084 [levar] => 0.012048192771084 [Amarante,] => 0.012048192771084 [Natal.] => 0.012048192771084 [com] => 0.012048192771084 ) [2] => Array ( [e] => 0.021276595744681 [de] => 0.021276595744681 [As] => 0.015957446808511 [do] => 0.015957446808511 [um] => 0.015957446808511 [uma] => 0.015957446808511 [Duas] => 0.01063829787234 [identificado] => 0.01063829787234 [cinco] => 0.01063829787234 [18] => 0.01063829787234 ) [3] => Array ( [acordo] => 0.014084507042254 [até] => 0.014084507042254 [De] => 0.014084507042254 [Nascimento,] => 0.014084507042254 [os] => 0.014084507042254 [com] => 0.014084507042254 [na] => 0.014084507042254 [branco,] => 0.0070422535211268 [carro] => 0.0070422535211268 [em] => 0.0070422535211268 ) [4] => Array ( [a] => 0.030769230769231 [de] => 0.025641025641026 [no] => 0.020512820512821 [foi] => 0.015384615384615 [Polícia] => 0.015384615384615 [o] => 0.015384615384615 [26] => 0.01025641025641 [Rodrigues] => 0.01025641025641 [Kelly] => 0.01025641025641 [cabeças] => 0.01025641025641 ) )  
      Eu tenho imprimir cada elemento assim:
      foreach ($array as $key => $value) { echo $key." => ".$value."<br/>"; } Obtenho como resultado o seguinte erro:
      Notice: Array to string conversion in /home/u244186567/public_html/index.php on line 901 Array Notice: Array to string conversion in /home/u244186567/public_html/index.php on line 902 Array Notice: Array to string conversion in /home/u244186567/public_html/index.php on line 901 Array Notice: Array to string conversion in /home/u244186567/public_html/index.php on line 902 Array Notice: Array to string conversion in /home/u244186567/public_html/index.php on line 901 Array Notice: Array to string conversion in /home/u244186567/public_html/index.php on line 902 Array Notice: Array to string conversion in /home/u244186567/public_html/index.php on line 901 Array Notice: Array to string conversion in /home/u244186567/public_html/index.php on line 902 Array Notice: Array to string conversion in /home/u244186567/public_html/index.php on line 901 Array Notice: Array to string conversion in /home/u244186567/public_html/index.php on line 902 Array  Vi aqui como última solução, pois não consegui resolver. Já pesquisei bastante. Como faço para imprimir separadamente cada elemento de $array?
      Quero trabalhar com eles separadamente.
       
       
      Já resolvi... meu $array é um array de arrays. :)
    • By Rui PG
      Boa tarde, Pessoal"
       
      Sou iniciante em SQL, em uma tabela do nosso BD tempos um campo que possui o registro com as informações do paciente concatenado com uma serie de valores que não precisamos.
      Como eu faço, para montar uma select para extrair desse registro apenas o que está entre aspas?
       
      O meu registro está assim:
      a:28:{i:18;s:13:"Sérgio silva";i:19;s:11:"1199900001";i:20;s:0:"n/i";i:21;s:0:"n/i";i:23;s:15:"Amil One Health";i:24;s:0:"n/i";i:27;s:0:"n/i";i:31;s:1:"2";i:32;s:0:"n/i";i:33;s:1:"2";i:34;s:0:;}
       
      Eu preciso dele assim:
      "Sérgio silva";"1199900001";"n/i";"n/i";"Amil One Health";"n/i";"n/i";"2";"n/i";"2";
       
      Observação, esses monte de valores a:28: ...etc... eles mudam, não são valores fixos, se fossem até usaria o replace, mas são vários valores.
       
      Depois que eu chegar nessa mineração: "Sérgio silva";"1199900001";"n/i";"n/i";"Amil One Health";"n/i";"n/i";"2";"n/i";"2";
      Como eu faço para alocar cada valor em campo campo qualquer, pode ser uma tabela temporária, tipo assim:
       
      |nome           |campo 1        |Campo 2 |Campo 3 |Campo 4               |Campo  5 | .....
      |Sérgio silva|1199900001|n/i              |n/i              |Amil One Health|n/i               |n/i|2|n/i|2| .....
       
      Muito obrigado amigos
       
       
       
       
       
       
    • By camargo.2018
      Olá, tudo bem?
      alguém pode me ajudar tipo
      TIPO=Produto&ID=4|TIPO=Produto&ID=4|TIPO=Domain&name=canargo&tls=.com|TIPO=Produto&ID=4 Quero pegar isso e transformar nisso
      for($i = 0; $i <= $quantidade;$i++){ if($produto[tipo][$i] == "Produto"){ $idProduto[$i] = $produto[ID][$i]; }elseif($produto[tipo][$i] == "Domain"){ $NameDomain[$i] = $produto[name][$i]; $TlsDomain[$i] = $produto[tls][$i]; } } alguém pode me ajudar ou se conhece outro método. 
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.