1

tenho uma dúvida?! no link abaixo:

Problema de compatibilidade do jQuery1.7.2 para o jQuery 3.3.1

eu tenho um código que me calcula algumas inputs com base no preço, quantidade, subtotal (preço * quantidade) e total geral (soma dos subtotais das inputs), conforme exemplo abaixo:

inserir a descrição da imagem aqui

Acontece que eu gostaria de esconder todas as inputs e ir mostrando conforme eu clicar em um botão, para adicionar novos produtos (inputs). Eu fiz com base no projeto:

Adicionar / remover campos dinamicamente

Porém, como as inputs são geradas no JS eu não consegui fazer funcionar. Alguém poderia me ajudar? É possível?

Segue meu exemplo:

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

<script src="https://code.jquery.com/jquery-1.7.2.js" ></script>

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

<script type="text/javascript">
//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 = "";
                }
                */
        }
}
}

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("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 = "";
                }
        }
}
</script>

<script type="text/javascript">
function id( el ){
        //return document.getElementById( el );
        return $( el );
}
function calcTotal( un01, qnt01 )
{
        return un01 * qnt01;
}
function getElementParent(event){
    return event.srcElement.parentNode.parentNode.getAttribute('id');
}
function getValorUnitario(elParent){
    return $('#'+elParent+' .class_unit input').val();
}
function getQuantidade(elParent){
    return $('#'+elParent+' .class_quant input').val();
}
function setFieldTotal(elParent, valueUnit, valueQuant){
    id('#'+elParent+' .class_total input').val(calcTotal( valueUnit , valueQuant));
    setTotalFinal();
}
function setTotalFinal(){
    
    var total = 0;
    $('#table-shop div .class_total input').each(function(){
        if(this.value != ''){
        var valor = this.value;
        total += parseInt(valor);
        }
    });
    $('#total .value_total').html(total);
    $('#total .value_total').val(total);
}
$(document).ready(function(){
        id('#table-shop div .class_unit').keyup(function(event)
        {
            var elemenPai = getElementParent(event);
            var valueUnit = getValorUnitario(elemenPai);
            var valueQuant = getQuantidade(elemenPai);

            setFieldTotal(elemenPai, valueUnit , valueQuant);
        });      
       
        id('#table-shop div .class_quant').keyup(function(event)
        {
            var elemenPai = getElementParent(event);
            var valueUnit = getValorUnitario(elemenPai);
            var valueQuant = getQuantidade(elemenPai);

            setFieldTotal(elemenPai, valueUnit , valueQuant);
        });
});
</script>

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

	<div id="total">Total: <span class="value_total"></span> </div>
	<div id="total">Total: <input class="value_total" readonly></input> </div>

    <br><br><br>

	<input type="button" value="Adicionar campos" onclick="AddCampos()">
	<br><br><input type="text" name="hidden1" id="hidden1">
	<input type="hidden" name="hidden2" id="hidden2">


</form>

</body>
</html>

Acontece que consigo mostrar/esconder as inputs, porém não calcula! Agradeço muito.

4
  • 1
    Poderia adicionar o seu código na pergunta? Pode utilizar o snippet (botão </> do editor) para mostrar funcionando.
    – Woss
    20/02/2019 às 18:05
  • 1
    Se você disponibilizar o código fica mais fácil de encontrar o problema 20/02/2019 às 18:07
  • 1
    Pela Lógica do que precisa, Valor unitário, quantidade e subtotal precisa ser feito via javascript? Tu poderia pensar em deixar esses inputs fixos para preenchimento e passar o valor preenchido para o novo campo quando submetido e então após cada submição é calculado o total e caso o total é zero nada aparece e outras condições podem ser feitas, caso não tenha Valor uniario não aparece quantidade nem subtotal e quando quantidade é 0 não aparece subtotal.
    – Eduardo
    20/02/2019 às 18:27
  • Então...esse é um sistema de serviços de auto mecânica, e conforme vai colocando as peças a serem usada, o sistema já vai calculando. nesse caso preciso acompanhar quão caro vai ficando a 'compra' para poder repassar para o cliente ou revisar algum item, antes de fechar a ordem de produção e dar baixa no sistema. Aceito alguma sugestão!
    – Nosredna
    20/02/2019 às 18:30

1 Resposta 1

2

É só criar uma função que faz os cálculos e chamá-la quando você adiciona ou remove linhas. A função irá calcular os valores dos inputs visíveis e colocar os subtotais nos respectivos campos e o total geral no campo dele.

Veja abaixo que criei uma função calcula() que percorre todas as linhas visíveis fazendo os cálculos. Foi preciso também fazer várias alterações no código, resultando num código bem mais enxuto e legível do que o anterior:

function calcula(){
   
   var total = 0;
   $("span[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("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(){
   $('span[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("<span id='linha"+iLoop+"' style='display:none'><div class='class_unit'>Valor Unitário "+iLoop+":<input type='text' name='valor_unitario"+iLoop+"' id='valor_unitario"+iLoop+"' /></div><div class='class_quant'>Quantidade "+iLoop+": <input type='text' name='qnt"+iLoop+"' id='qnt"+iLoop+"' value='0' /></div><div class='class_total'>SubTotal "+iLoop+": <input type='text' name='total"+iLoop+"' id='total"+iLoop+"' readonly='readonly' /></div> <input type='button' value='Remover' onclick='RemoverCampos(\""+iLoop+"\")'></span>");
}
<script src="https://code.jquery.com/jquery-1.7.2.js" ></script>
<form name="form1" action="" method="post">

   <div id="total">Total: <input class="value_total" readonly></input> </div>
   <br><br><br>
   <input type="button" value="Adicionar campos" onclick="AddCampos()">
   <br><br><input type="text" name="hidden1" id="hidden1">
   <input type="hidden" name="hidden2" id="hidden2">

</form>

2
  • Exatamente isso! vou estudar o funcionamento antes de implementar, para poder aprender e não copiar ;). Tem alguma sugestão de leitura sobre JS? Agradeço a atenção.
    – Nosredna
    20/02/2019 às 20:05
  • 1
    A W3S tem um bom material pra inciante.
    – Meu ovo
    20/02/2019 às 20:06

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .