Jump to content
Jefferson andre

bootstrap 4 com mascara de campos jquery

Recommended Posts

Ola,

Alguem tem um exemplo do uso da mascara do jquery no camp telefone utilizando bootstrap 4 para em enviar por favor

 

Estou usando os tutoriais mas nao funciona

 

Grato

 

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 weltonmatos
      Estou instalando na plataforma Tray uma Pop Up de saída que surge quando o usuário leva o cursor pra barra de navegação. A pop aparece. O que não funciona é o botão fechar.
       
      function stick_close() { $('.stick_container').fadeOut(function() { $(this).remove(); }); $('.stick_block_layer').fadeOut(function() { $(this).remove(); }); $.removeData( document.body, "stick_var" ); } $.stick_close = function() { stick_close(); } <div id="modal-newsletter" style="display:none;" class="stick_popup"> <div class="stick_close" onclick="$.stick_close()">X</div> <div class="stick_content"> <h1>Teste</h1> </div> </div>  
    • By granderodeo
      Tenho a página pedidos.php, que recebe todos os pedidos que foram feitos no site nessa página tem informações com ID do pedido, ID do usuário, Endereço etc. Fiz um botão `Produtos` para que quando o ADM clique, abra uma modal vinda de outra página `modalbox.php`, com os produtos pedidos referentes aquele pedido. Por exemplo Pedido nº 833 ao lado dele terá um botão `Produtos` e quero que quando abrir a modal venha somente os produtos pedidos pelo 833. Com o código que tenho até o momento a modal abre, mas não mostra os produtos.
       
      pedidos.php
      <!-------------------------------- PEDIDOS -------------------------> <div class="table-responsive mt-2"> <table class="table table-bordered table-striped text-center"> <thead> <tr> <td colspan="9"> <h4 class="text-center text-info m-0">Pedidos realizados</h4> </td> </tr> <tr> <th class="text-center">ID do pedido</th> <th class="text-center">Nome do cliente</th> <th class="text-center">E-mail</th> <th class="text-center">Endereço</th> <th class="text-center">Número da casa</th> <th class="text-center">Valor</th> <th class="text-center">ID cliente</th> <th class="text-center">Situação</th> <th class="text-center">Produtos</th> </tr> </thead> <tbody> <?php require 'conexao_pedidos.php'; $stmt = $conn->prepare("SELECT * FROM orders"); $stmt->execute(); $result = $stmt->get_result(); while($row = $result->fetch_assoc()): ?> <tr> <td> <?= $row['order_id'] ?></td> <!-- ID do pedido --> <td> <?= $row['order_name'] ?></td> </td> <td><?= $row['order_email'] ?> </td> <td> <?= $row['order_endereco'] ?> </td> <td> <?= $row['order_numero'] ?> </td> <td>R$<?= $row['valor_total'] ?></td> <td><?= $row['id_usuario'] ?> </td> <!---- BOTÃO PARA ABRIR MODAL COM OS PRODUTOS ----> <td> <a class="btn btn-danger pull-right" data-toggle="modal" href="#myModal" id="modellink" data-client="<?= $row['order_id'] ?>">Produtos</a> <div class="modal-container"></div> <!----FIM BOTÃO PARA ABRIR MODAL COM OS PRODUTOS ----> </tr> <?php endwhile; ?> </tbody> </table> </div> <!----- JQUERY PARA ABRIR MODAL -----> <script type="text/javascript"> $(document).ready(function(){ var order_id = $(this).attr("data-client"); var url = "modalbox.php?order_id=" + order_id; $_post(url,{ order_id = order_id, }, jQuery('#modellink').click(function(e) { $('.modal-container').load(url,function(result){ $('#myModal').modal({show:true}); }); }); }); </script>  
      modalbox.php
      <div id="myModal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body"> <div class="table-responsive mt-2"> <table class="table table-bordered table-striped text-center"> <thead> <tr> <td colspan="8"> <h4 class="text-center text-info m-0">Produtos dos pedidos</h4> </td> </tr> <tr> <th>ID do pedido</th> <th>ID cliente</th> <th>ID produto</th> <th>Quantidade</th> </tr> </thead> <tbody> <?php extract($order_id); if (isset($_GET['order_id'])) { $order_id = $_GET['order_id']; } else { die("ERRO: ID não definido."); } require 'conexao_pedidos.php'; $stmt = $conn->prepare("SELECT * FROM orders_items WHERE order_id = '$order_id'"); $stmt->execute(); $result = $stmt->get_result(); while($row = $result->fetch_assoc()): ?> <tr> <td> <?= $row['order_id'] ?> </td> <td> <?= $row['id_usuario'] ?></td> </td> <td> <?= $row['product_id'] ?> </td> <td> <?= $row['quantity'] ?> </td> <!------- FIM ITEM REMOVER DO CARRINHO -------> </tr> <?php endwhile; ?> </tbody> </table> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save</button> </div> </div> </div> </div>  

    • By Good
      Boa noite,
      gostaria de saber como vocês fariam um sistema de delivery.
       
      Pensei em 3 soluções:
      1. Cadastrar as faixas de CEP que haverá sistema de entregas;
      2. Criar uma área delimitadora no google e exportar em KML para fazer a validação se o endereço do cliente está dentro do raio;
      3. Criar um raio de entregacom ponto fixo do estabelecimento, por exemplo, o estabelecimento só vai poder atender em um raio de até 10km.
       
      Qual método o ifood e outros gigantes trabalham? Existe algum código pronto para que eu possa dar uma olhada?
       
      Aguardo um contato, obrigado!
    • By michelmir
      Olá!
       
      Recentemente fiz uma postagem aqui no fórum a respeito de se carregar valores em um input text baseando-se na opção selecionada em uma select box, onde obtive uma solução. Por conta disso resolvi adicionar um complemento neste  meu código onde o mesmo deve carregar valores corretamente dentro de uma input text utilizando o plugin TypeAhead.js e o evento onchange do Jquery.
       
      Como forma de demonstrar a minha dúvida em funcionamento, criei uma página como forma de testar a solução. O que ocorre é que quando seleciona uma opção no select box  "Categorias", o Ajax manda um request para o php script onde o mesmo retorna os valores corretamente em JSON conforme a imagem do console do navegador Chrome abaixo:
       
       
       
      Até aqui os valores relacionados com a opção selecionada no select box "Categorias" são carregados corretamente porém se eu não atualizar a página "F5" e ao mesmo tempo eu selecionar alguma outra opção dentro do select box, o input text carrega além dos valores relacionados, todos os valores não relacionados com a opção selecionada ou seja, o input text somente carrega os valores corretamente se eu atualizar a página em questão.
       
      Abaixo uma imagem demonstrando os valores carregados em uma input text quando seleciono uma outra opçao no select box quando não se atualiza a página. Todos os valores não relacionados também são carregados:
       

       
      Abaixo publico o html e os scripts Ajax, Typeahead e PHP que estou utilizando neste projeto:
       
      HTML
      <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- jQuery UI library --> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script> </head> <body> <div class="container"> <br> <h1>DYNAMIC TWITTER TYPEAHEAD</h1> <br> <div class="row"> <?php // Include the database config file include_once 'dbConfig.php'; // Fetch all the country data $query = "SELECT * FROM categorias ORDER BY categoria ASC"; $result = $db->query($query); ?> <!-- categoria dropdown --> <div class="col-md-4"> <select id="categoriaFK" name="categoriaFK" class="form-control"> <option value="">seleciona categoria</option> <?php if($result->num_rows > 0){ while($row = $result->fetch_assoc()){ echo '<option value="'.$row['categoriaID'].'">'.$row['categoria'].'</option>'; } }else{ echo '<option value="">Categoria não encontrada</option>'; } ?> </select> </div> <div class="col-md-4" id="prod"> <div ><input type="text" name="produtos" id="produtos" class="form-control input-lg typeahead" autocomplete="off" placeholder="" /></div> </div> <div class="col-md-4"> <div id="imagem" name="imagem"></div> </div> </div> </div> </body> </html>  
      No script abaixo, o Ajax envia um request para o script PHP que por sua vez retorna os valores em JSON para o Ajax que envia para o TypeAhead e carrega o input text com valores relacionados. Após selecionar uma opção no input text, o Jquery envia um valor relacionado para a div "#imagem" :
       
      $(document).ready(function(){ var produtos; var nomes = []; // array var lista = {}; // objeto $('#categoriaFK').on('change', function(){ var queryID = $(this).val(); $.ajax({ url:"fetch.php", method:"POST", data:{categoria:queryID}, dataType:"json", success:function(data){ console.log(data); $.each(data, function(i, optionHtml){ $('#produtos').append(optionHtml); }); $("#imagem").empty(''); $(".typeahead").val(''); produtos = data; } }); $('.typeahead').typeahead({ source: function(query, result) { $.each(produtos, function(idx, item){ if(!~nomes.indexOf(item.nomeProduto)) nomes.push(item.nomeProduto); lista[item.nomeProduto] = item.imagem; }); return result(nomes); }, afterSelect: function (data) { var img = lista[data]; $('#imagem').html(img); }, }); }); });  
      Abaixo, o php script que seleciona os valores baseando-se no valor selecionado do select box e os envia em formato JSON para o Ajax:
       
      <?php require_once 'dbConfig.php'; if(!empty($_POST["categoria"])){ $query = " SELECT * FROM produtos WHERE categoriaFK = ".$_POST['categoria']." "; $result = $db->query($query); $data = array (); if ( $result->num_rows > 0 ) { while($row = $result->fetch_assoc ()) { $data[] = $row; } header("Content-type: application/json; charset=utf-8 cache-control: no-cache, no-store, must-revalidate"); echo json_encode($data); exit(); } } ?> No caso como mencionado acima, nesta página que criei demonstra o funcionamento de todo o código acima, porém acredito que devo modificar o script para que o mesmo carregue valores corretamente quando seleciono alguma opção no select box "Categorias" sem precisar atualizar a página para que o mesmo carregue corretamente. 
       
      Como posso proceder? Desde já agradeço a atenção de todos.
    • By juliosertori
      Olá boa noite, tudo bem galera?
       
      Tenho um input:
      <input type="text" value="0" name="qtdProds" id="qtdProds" class="form-control" onkeyup="atualizaTotalPrecos(this);" required /> E quando ele está ONBLUR, funciona o seguinte script:
      function atualizaTotalPrecos(sel){ var nameInput = sel.name; var IdNameProds = parseInt(nameInput.match(/\d/g).join('')); var valor = $('input[name="produtos_pdv['+IdNameProds+'][qtdProds]"]').val(); var custo = $('input[name="produtos_pdv['+IdNameProds+'][custoProds]"]').val(); var totalCusto = valor*custo; $("[name='produtos_pdv["+IdNameProds+"][custoTotalProds]']").val(totalCusto); //$("[name='totalPedidoDesconto']").val(totalCusto); var descontoPedido = $("#descontoPedido").maskMoney('unmasked')[0]; var total = 0; $('.somaTotal').each(function(){ var valor = Number($(this).val()); if (!isNaN(valor)) total += valor; }); var totalDescontado = total - descontoPedido; //alert(totalDescontado); $(".SomaTotalPrecos").maskMoney('mask', total); $(".totalpedidos").maskMoney('mask', totalDescontado); //////////////// var totalCusto = 0; $('.somaCustoTotal').each(function(){ var valor = Number($(this).val()); if (!isNaN(valor)) totalCusto += valor; }); $(".SomaTotalCustos").maskMoney('mask', totalCusto); };  
      Onde atualizo o campo .SomaTotalPrecos, funciona perfeitamente.
       
      Mas quando troco para Onkeyup, e inserir 1 por exemplo, primeiro ele preenche o campo com 0, e da segunda vez, ele atualiza para a primeira vez, ou seja, 1.
       
      Ex: coloco o valor de R$ 10,00 e na quantidade coloco 1, ele preenche o campo com 0, depois se insiro 2, ai ele preenche o campo com a quantidade anterior, ou seja 1xR$ 10,00
       
×

Important Information

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