Jump to content
nosredna

Múltiplos cálculos com JavaScript

Recommended Posts

Olá amigos,

 

tenho o seguinte código:

<html>

<script type="text/javascript">
function Soma(){
    var soma = 0;
    var ipts = document.querySelectorAll('input[oninput="Soma()"]');
    for(var x=0; x<ipts.length; x++){
       var valorItem = parseFloat(ipts[x].value);
       !isNaN(valorItem) ? soma += parseFloat(valorItem) : null;
    }
    document.querySelector('#final').value = soma.toFixed(2);
}
</script>

<form action="">
  Total produto1: <input type="text" oninput="Soma()" value="0"><br>
  Total produto2: <input type="text" oninput="Soma()" value="0"><br>
  <br>
  Total todos os produtos12: <input type="text" id="final">
</form>

</html>

Bom...para essas duas inputs funciona corretamente.

Porém, se eu quiser colocar mais inputs como: Total produto3 + Total produto4 = Total todos os produtos34, Total produtoX + Total produtoY = Total todos os produtosXY, ...

e usar o mesmo código JS, é possível? alguém poderia me dar uma dica de como eu faço para fazer isso? já tentei de várias maneiras, mas não estou tendo sucesso...

 

Fico agradecido. 

Share this post


Link to post
Share on other sites

Bom...

Segue o jeito que ficou depois de pronto:

 

<!doctype html>
<html lang="pt-br">
  <head>

<script src="https://code.jquery.com/jquery-3.3.1.js" ></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>

  </head>
  <body>

<div class="row">
   <div class="col-sm-9">
	<h1 align="center">Cálculo de Preços de Produtos</h1>
   </div>
   <div class="col-sm-3">
	<br>
	<input type="button" class="btn btn-success btn-sm" value="Adicionar campos" onclick="AddCampos()">
   </div>
</div>

<script type="text/javascript">
//Calculadora de Subtotal
function calcula(){
   
   var total = 0;
   $("div[id^=linha]:visible").each(function(){
      
      var val_unit = parseFloat($(".class_unit input", this).val().replace(",", "."));
      var qnt = $(".class_quant input", this).val();
      var sub_total = val_unit * qnt;

      if(!isNaN(sub_total)) $(".class_total input", this).val(sub_total.toFixed(2).replace(".", ","));
      
      total += parseFloat($("input[id^=total]", this).val().replace(",", "."));

   });

   if(!isNaN(total)) $("#total input.value_total").val(total.toFixed(2).replace(".", ","));
   
}


//Total máximo de campos que você permitirá criar em seu site:
var totalCampos = 10;

//Não altere os valores abaixo, pois são variáveis controle;
var iLoop = 1;
var iCount = 0;
var linhaAtual;


function AddCampos() {
   var hidden1 = document.getElementById("hidden1");
   var hidden2 = document.getElementById("hidden2");

   //Executar apenas se houver possibilidade de inserção de novos campos:
   if (iCount < totalCampos) {

      //Limpar hidden1, para atualizar a lista dos campos que ainda estão vazios:
      hidden2.value = "";

      //Atualizando a lista dos campos que estão ocultos.
      //Essa lista ficará armazenada temporiariamente em hidden2;
      for (iLoop = 1; iLoop <= totalCampos; iLoop++) {
         if (document.getElementById("linha"+iLoop).style.display == "none") {
            if (hidden2.value == "") {
               hidden2.value = "linha"+iLoop;
            }else{
               hidden2.value += ",linha"+iLoop;
            }
         }
      }
      //Quebrando a lista que foi armazenada em hidden2 em array:

      linhasOcultas = hidden2.value.split(",");


      if (linhasOcultas.length > 0) {
         //Tornar visível o primeiro elemento de linhasOcultas:
         document.getElementById(linhasOcultas[0]).style.display = "block"; iCount++;
      
         //Acrescentando o índice zero a hidden1:
         if (hidden1.value == "") {
            hidden1.value = linhasOcultas[0];
         }else{
            hidden1.value += ","+linhasOcultas[0];
         }
      
         /*Retirar a opção acima da lista de itens ocultos: <-------- OPCIONAL!!!
         if (hidden2.value.indexOf(","+linhasOcultas[0]) != -1) {
         hidden2.value = hidden2.value.replace(linhasOcultas[0]+",","");
         }else if (hidden2.indexOf(linhasOcultas[0]+",") == 0) {
         hidden2.value = hidden2.value.replace(linhasOcultas[0]+",","");
         }else{
         hidden2.value = "";
         }
         */
         calcula();
      }
   }
}

function RemoverCampos(id) {
   //Criando ponteiro para hidden1:        
   var hidden1 = document.getElementById("hidden1");

   //Pegar o valor do campo que será excluído:
   var campoValor = document.getElementById("valor_unitario"+id).value;
   //Se o campo não tiver nenhum valor, atribuir a string: vazio:
   if (campoValor == "") {
      campoValor = "vazio";
   }

   if(confirm("O campo que contém o valor:\n» "+campoValor+"\nserá excluído!\n\nDeseja prosseguir?")){
      document.getElementById("valor_unitario"+id).value="0";
      document.getElementById("qnt"+id).value="0";
      document.getElementById("linha"+id).style.display = "none"; iCount--;
   
      //Removendo o valor de hidden1:
      if (hidden1.value.indexOf(",linha"+id) != -1) {
         hidden1.value = hidden1.value.replace(",linha"+id,"");
      }else if (hidden1.value.indexOf("linha"+id+",") == 0) {
         hidden1.value = hidden1.value.replace("linha"+id+",","");
      }else{
         hidden1.value = "";
      }
      
      calcula();
   }
}

$(document).ready(function(){
   $('div[id^=linha] input').on("input", calcula);
});

//Escrevendo o código-fonte HTML e ocultando os campos criados:
for (iLoop = 1; iLoop <= totalCampos; iLoop++) {
   document.write("<div id='linha"+iLoop+"' style='display:none'><table><td class='class_unit'>Valor Unitário "+iLoop+": R$ <input type='text' class='selectall' name='valor_unitario"+iLoop+"' id='valor_unitario"+iLoop+"' value='0,00' onkeyup='k(this);'/></td><td class='class_quant'>Quantidade "+iLoop+": <input type='text' class='selectall' name='qnt"+iLoop+"' id='qnt"+iLoop+"' value='0'/></td><td class='class_total'>SubTotal "+iLoop+": R$ <input type='text' name='total"+iLoop+"' id='total"+iLoop+"' readonly='readonly'/></td> <td><input class='btn btn-danger btn-sm' type='button' value='Remover' onclick='RemoverCampos(\""+iLoop+"\")'></td></table></div>");
}


 $(function() {
   $(document).on('click', '.selectall', function() {
     this.select();
   });
 });

//Máscara de casas decimais
function k(i) {
	var v = i.value.replace(/\D/g,'');
	v = (v/100).toFixed(2) + '';
	v = v.replace(".", ",");
	v = v.replace(/(\d)(\d{3})(\d{3}),/g, "$1.$2.$3,");
	v = v.replace(/(\d)(\d{3}),/g, "$1.$2,");
	i.value = v;
}
</script>


<form name="form1" action="" method="post">

   <hr>
   <div class="row">
     <div class="col-sm-6">
     <br><br>
	<input type="text" name="hidden1" id="hidden1" hidden>
	<input type="hidden" name="hidden2" id="hidden2">
     </div>
     <div class="col-sm-3" id="total" align="right">Total: R$ 
	<input class="value_total" readonly value='0,00'></input> </div>
     </div>
     <div class="col-sm-2"></div>
  </div>

</form>

  </body>
</html>

Foi meio que um monstro de Frankenstein, vários códigos juntados...

Espero que ajude quem também tem dúvidas.

 

Fontes:

https://forum.imasters.com.br/topic/581641-múltiplos-cálculos-com-javascript/
https://forum.imasters.com.br/topic/519699-multiplicar-quantidade-por-preço-e-exibir-no-total/
https://pt.stackoverflow.com/questions/363448/problema-de-compatibilidade-do-jquery1-7-2-para-o-jquery-3-3-1
https://pt.stackoverflow.com/questions/364034/selecionar-texto-do-textarea-com-variáveis-ao-clicar
https://pt.stackoverflow.com/questions/363811/adicionar-ou-remover-inputs-com-js/363855?noredirect=1#comment726430_363855
https://forum.imasters.com.br/topic/325267-resolvido-adicionar-remover-campos-dinamicamente/

Share this post


Link to post
Share on other sites

boa noite. primeiramente, parabéns por ter resolvido e obrigado por compartilhar a solução.

tenho uma sugestão que reduziria bastante a complexidade desse projeto. você já ouviu falar de princípios reativos? Há vários frameworks por aí que implementam esses princípios, por exemplo React, Vue, Angular, Ractive, etc. Com eles, você conseguiria resolver seu problema de forma bem menos complexa. Por exemplo, esse mesmo comportamento poderia ser obtido com apenas 40 linhas de código:

<!doctype html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="carrinho_de_compras"></div>
    <script id="codigo_do_carrinho_de_compras" type="text/ractive">
    <h1>Cálculo de preços de produtos</h1>
    <button on-click="@this.push('produtos', {preco: 0.00, quantidade: 0})">Adicionar produto</button><hr>
    {{#each produtos:i}}
        Valor unitário {{i}}: R$ <input value="{{preco}}"><br>
        Quantidade {{i}}: <input value="{{quantidade}}"><br>
        Subtotal {{i}}: R$ {{preco * quantidade}}<br>
        <button on-click="@this.splice('produtos', i, 1)">Remover produto {{i}}</button><hr>
    {{/each}}
    Total: R$ {{total()}}
    </script>
    <script src="https://cdn.jsdelivr.net/npm/ractive"></script>
    <script>
    var ractive = new Ractive({
        el: "#carrinho_de_compras",
        template: "#codigo_do_carrinho_de_compras",
        data: {
            produtos: [
                {preco: 0.00, quantidade: 0}
            ],
            total: function() {
                var total = 0;
                var produtos = this.get('produtos');
                for(var i = 0; i < produtos.length; i++) {
                    total += produtos[i].preco * produtos[i].quantidade;
                }
                return total;
            }
        }
    });
    </script>
</body>
</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 peterstefan
      Boa tarde, quero fazer anúncios em um projeto e quero mostrar dentro de um foreach, mais quero mostrar a cada 5 blocos e depois mostro o anuncio do google.. isso tem algum novo para que eu possa pesquisar?
    • By violin101
      Caros amigos.
       
      saudações...
       
      Por favor PRIMEIRAMENTE peço desculpa em recorrer ao auxílios dos amigos, mas sou novato em CODEIGNITER.
       
      Através de muita Leitura e pesquisa sobre o tema, tenho conseguido desenvolver o que gostaria de executar.
       
      Me deparei com o seguinte problema que não estou conseguindo executar com êxito.
       
      Preciso criar uma FUNÇÃO onde o Sistema após o USUÁRIO efetuar o LOGIN possa realizar uma VALIDAÇÃO de Data e Hora.
      Por exemplo:
       
      Na base de dados tenho campos distintos como:
        `dataInicio` DATE NOT NULL ,
        `horaInicio` TIME NOT NULL ,
        `dataFim` DATE NOT NULL ,
        `horaFim` TIME NOT NULL ,
       
      Pergunta:
      como faço uma função para que o sistema possa comparar e calcular o PRAZO de VENCIMENTO com a DATA e HORA atual, ou seja:
      prazo para encerrar
      dataFim: 19/04/2019
      horaFim: 12:00
      ---------------------------------------
      vencimento
      dataAtual: 19/04/2019
      horaAtual: 12:01
      ==========================
       
      Se a Data/Hora já venceu o Sistema muda o STATUS para 2 (prazo encerrado).
       
      Grato,
       
      Cesar
       
       
       
       
       
       
    • By emersonbrs
      string(77) "[ 1, { "mensagem": "Recarga", "pin": "", "nsu": 1096 } ]" tenho esse array como eu faço para pegar mensagem com json_decode, exemplo se eu fizer assim
      <?php $array = file_get_contents( 'http://www.json-generator.com/api/json/get/bTLlkwcgOa?indent=2' ) ; $obj = json_decode($array); echo $obj->1->mensagem; ?> dessa forma da erro
       
       
      syntax error, unexpected '1' (T_LNUMBER), expecting identifier (T_STRING) or variable (T_VARIABLE) or '{' or '$' in
       
      como resolver ?
    • By guzulino
      Eu tenho uma dúvida meio tosca, mas as páginas que eu estou colocando no site não estão carregando, quando acesso o site aparece uma página padrão de domínio reservado para um cliente HostGator, mas quando vou no cPanel fazer upload dos arquivos, eles não são carregados no site, tentei colocar na pasta "public_html" com o nome de index, mas mesmo assim ela não é carregada na página principal do site. Gostaria de saber qual a pasta em que devo colocar os arquivo das páginas principais para serem carregados. Eu já trabalhei com hospedagem na Locaweb, mas quis testar outra hospedagem para ver como funciona, mas até agora não deu muito certo, adquiri o domínio na semana passada então ele já deveria funcionar teoricamente.
×

Important Information

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