0

Estou tentando fazer com que dados vindo do banco de dados, para cada input, possa fazer cálculos entre si em tempo real e me dar uma valor final antes de cadastrar o formulário.

Tenho uma tabela e nessa tabela, uma parte a tr dela É adicionada dinamicamente. existe um select que, ao selecionar um item, puxa o valor desse item no banco de dados e mostra o valor, permitindo que ao escolher a quantidade o valor seja alterado, essa parte esta funcionando.

O que não consegui fazer é pegar o resultado do valor total dos itens, e diminuir de um outro campo que vem do banco de dados com valor de royallties por exemplo. aparece o resultado final como NaN como se algo no código não fosse definido como um numero poderiam me ajudar?

var value = elemento.parentElement.parentElement.querySelector('td > input#valor_unitario').value; 
var valor = parseFloat(value.replace("R$","").replace(",","."));
var total = parseInt(qnt) * parseFloat(valor);

cell_total.value  = "R$ " + total.toFixed(2);

var total = parseFloat(value.replace("R$","").replace(",","."));
var royallties = parseFloat(value.replace(",",".").replace("","%"));
var valorroyallties = parseFloat(total) - ((parseFloat(total)* parseFloat(royallties))/100);
var valorfinal = parseFloat(total) - parseFloat(valorroyallties);

cell_valorfinal.value  = "R$ " + valorfinal.toFixed(2);

4 Respostas 4

1

Esse teu código var valor = parseFloat(value.replace("R$","").replace(",",".")); dá problema quando o usuário digitar R$ 1.400,00 porque ele vai transformar o teu número em 1.400.00 que o Javascript considera NaN.

Uma solução simples seria remover todos os caracteres do valor e transformar a representação em centavos. Explico.

Ao invés de tentar guardar um float de R$ 1400,00 em 1400.00, você poderia guardar um inteiro 140000, que representa o total em CENTAVOS.

Assim, teu código poderia ficar como no exemplo abaixo:

var value = elemento.parentElement.parentElement.querySelector('td > input#valor_unitario').value; 
var valor = parseInt(value.replace("R$","").replace(",","").replace(".","");
var total = qnt * valor; //Valor total em CENTAVOS

cell_total.value  = "R$ " + (total / 100); 

var total = parseInt(value.replace("R$","").replace(",","").replace(".",""));
var royallties = parseInt(value.replace(",","").replace(".","").replace("","%"));
var valorroyallties = total - ((total * royallties)/100); //Divido por 100 pois neste caso, é a porcentagem
var valorfinal = total - valorroyallties; //Valor em CENTAVOS

cell_valorfinal.value  = "R$ " + (valorfinal / 100); //valor em centavos retornando para decimal

Sempre que possível, evite usar o parseFloat pois ele pode retornar decimais com uma aproximação que não corresponde ao valor correto.

1
  • nesse caso o valor nao e digitado ele vem do banco... o usuario so usa um select pra escolher um item e todos os valores vem do banco de dados relacionados aquele item o unico campo que o usuario interagir e na quantidade.. vou mostra todo o codigo
    – user70401
    Commented 4/04/2017 às 16:03
1

Ótimo que já entendeu o que é NaN, em resumo significa que a variável não é um número.

O código possui dois erros: o primeiro encontra-se exatamente na parte dos royallties. Perceba que está utilizando a mesma variável value (nesse trecho de código) tanto em total quanto em royallties, creio está tentando obter o valor dos royallties da variável errada. O segundo erro encontra-se no seu replace("","%")) que está invertido.

var total = parseFloat(value.replace("R$","").replace(",","."));

var royallties = parseFloat(value.replace(",",".").replace("","%"));

Seguindo o exemplo se temos

var value = "R$ 10,00";

ao executar a conversão

var total = parseFloat(value.replace("R$","").replace(",","."));

Obtém um valor de 10, porém ao executar

var royallties = parseFloat(value.replace(",",".").replace("","%"));

Se usa a variável value, que é "R$ 10,00", não realizando a operação esperada, no caso os replaces feitos geram a a string "%R$ 10.00" que gera um NaN no momento do ParseFloat("%R$ 10.00").

O correto seria obter uma variável por exemplo royallties do HTML que tivesse o seguinte padrão "20,5%" e nesse valor você executasse o código corrigindo o replace("%",""));

var royalltiesConvertido = parseFloat(royallties.replace(",",".").replace("%",""));

Algumas ideias para evitar se perder nesse processo de buscar da DOM e manipular os valores:

  • Separar a busca do elemento (Uso do querySelector) da manipulação.
  • Criar nomes semânticos (pense no conteúdo da variável, podemos ter um value que possui uma String e um value com o valor convertido já em float isso auxilia na hora de utilizar as variáveis.

Algumas ideias:

var valorString = elemento.parentElement.parentElement.querySelector('td > input#valor_unitario').value; 

var valorFloat = parseFloat(value.replace("R$","").replace(",","."));
1
  • ta vou ver com calma td que falou e buscar ver se consigo, pq sou leigo em javascript tenho mais facilidade com php.. e so falta isso de td pra fechar.. mas obrigado msm vou tentar aqui
    – user70401
    Commented 4/04/2017 às 16:26
0

essa parte da tabela onde fica todo o campo que e repitido em outra tr dinamicamente:

<tr class="linhas">
                <td colspan="4">
                    <select style="width:355px;" name="descricao[]" id="nome" onchange="listanome(this)">
                        <option value="">Selecione..</option>
                                    <?php
                                        include_once '../conexaobancodedados.php';

                                        $sql = "select * from  tabelapreco left outer join unidades on unidades.id_unidade = tabelapreco.id_unidade order by `nome_tabela`";

                                        $result=  mysql_query($sql,$con);
                                        if(@mysql_num_rows($result)>0){

                                        while($row =  mysql_fetch_array($result)){

                                        ?>
                                        <option value="<?php echo $row["id_tabela"];?>"><?php echo $row["nome_tabela"];?> (<?php echo $row["nome_unidade"];?>)</option>

                                        <?php           
                                        }
                                        }else{
                                            ?>
                                            <option value="">Sem Cadastro de Equipamento</option>
                                            <?php 
                                        }

                                        ?>
                    </select>
                </td>
                <td><input type="number" value="1" min="1" style="width:50px;text-align: center;" size="1" name="qtd[]" id="qnt"></td>
                <td class="resultado2"><input size="10" readonly="true" style="background-color:#cccccc;color:black;"></td>
                <td><input type="text" size="10" name="valortotal[]" value="R$ 0.00" style="text-align: center;" id="total" onKeyPress="return(MascaraMoeda(this,'.',',',event))"></td>
                <td class="resultado3"><input size="10" readonly="true" style="background-color:#cccccc;color:black;"></td>
                <td class="resultado4"><input size="6" readonly="true" style="background-color:#cccccc;color:black;"></td>
                <td><input size="16" name="transporte[]" id="transporte" value="R$ 0.00" style="text-align: center;" onKeyPress="return(MascaraMoeda(this,'.',',',event))"></td>
                <td><input size="11" name="desconto[]" id="desconto" value="0.00 %" style="text-align: center;" onKeyPress="return(MascaraMoeda(this,'.',',',event))"></td>
                <td><input size="16" name="valorfinal[]" id="valorfinal" value="R$ 0.00" style="text-align: center;" onKeyPress="return(MascaraMoeda(this,'.',',',event))"></td>
                <td><a href="#" class="removerCampo" title="Remover linha"><input type="button" name="Excluir" style="width:70px;background-color:red;"></a></td>
            </tr>
            </tbody>
            <tfoot>
                <tr>
                       <td colspan="13">
            <center><a href="#" class="adicionarCampo" title="Adicionar item"><input type="button" name="adicionar" value="Adicionar"></a></center>
                       </td>
                </tr>

            </tfoot>

e essa parte os scritps que adicionam dinamicamente e que faz a busca no banco de dados dos itens e seus valores e tambem o calculo:

<script type="text/javascript">
    function listanome(elemento){

        var nome       = elemento.value;
        var cell_valor = elemento.parentElement.parentElement.querySelector('.resultado2');
        var cell_total = elemento.parentElement.parentElement.querySelector('td > input#total');
        var cell_valorfinal = elemento.parentElement.parentElement.querySelector('td > input#valorfinal');
        var cell_royallties = elemento.parentElement.parentElement.querySelector('.resultado3');
        var qnt = elemento.parentElement.parentElement.querySelector('td > input#qnt').value;
        qnt = (qnt != '')? parseInt(qnt): 0;

        var nome = elemento.value;
        var cell = elemento.parentElement.nextElementSibling.nextElementSibling;

        var nome2 = elemento.value;
        var cell2 = elemento.parentElement.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling;

        var nome3 = elemento.value;
        var cell3 = elemento.parentElement.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling;

        $(document).on('change', 'input#qnt', function(){
            var qnt        = $(this).val();
            qnt        = (qnt != '')? parseInt(qnt): 0;

            var valor      = $(this).parents('td').siblings().children('input#valor_unitario').val();
            valor      = parseFloat(valor.replace("R$","").replace(",","."));

            var royallties = $(this).parents('td').siblings().children('input#royallties').val();
            royallties      = parseFloat(royallties.replace(",",".").replace("","%"));

            var cell_total = $(this).parents('td').siblings().children('input#total');
            var total      = (qnt * valor);
            var valorroyallties = total - ((total * royallties)/100);

            var cell_valorfinal = $(this).parents('td').siblings().children('input#valorfinal');
            var valorfinal = total - valorroyallties;

            cell_total.val("R$ " + total.toFixed(2).replace(".",","));
            cell_valorfinal.val("R$ " + valorfinal.toFixed(2).replace(".",","))
        });



         if(nome != ''){
              var dados = {
                listanome : nome
              }
              $.post('../BUSCAR_BANCO/busca_preco.php', dados, function(retorna){
                cell_valor.innerHTML = retorna;
                var value = elemento.parentElement.parentElement.querySelector('td > input#valor_unitario').value; 
                var valor = parseFloat(value.replace("R$","").replace(",","."));

                var total = parseInt(qnt) * parseFloat(valor);

                cell_total.value  = "R$ " + total.toFixed(2);


              });
            }else{
              alert("Sem Equipamento Selecionado");    
            }

        if(nome2 != ''){
                    var dados2 = {
                        listanome2 : nome2
                    }
                    $.post('../BUSCAR_BANCO/busca_royallties.php', dados2, function(retorna){
                        cell2.innerHTML = retorna;
                        var value = elemento.parentElement.parentElement.querySelector('td > input#valor_unitario').value; 
                        var total = parseFloat(value.replace("R$","").replace(",","."));
                        var royallties = parseFloat(value.replace(",",".").replace("","%"));
                         var valorroyallties = parseFloat(total) - ((parseFloat(total)* parseFloat(royallties))/100);
                         var valorfinal = parseFloat(total) - parseFloat(valorroyallties);
                         cell_valorfinal.value  = "R$ " + valorfinal.toFixed(2);

                    });
        }else{
        alert("Sem Equipamento Selecionado");    
        }

        if(nome3 != ''){
                    var dados3 = {
                        listanome3 : nome3
                    }
                    $.post('../BUSCAR_BANCO/busca_imposto.php', dados3, function(retorna){
                        cell3.innerHTML = retorna;
                    });
        }else{
        alert("Sem Equipamento Selecionado");    
        }



    }
    </script>
2
  • Isso é a solução da sua pergunta?
    – user28595
    Commented 4/04/2017 às 17:16
  • nao a solucao da pergunta eu fiz passando meus campos pro mesmo tipo de valor somente em R$ sem ter % utilizei a porcentagem no calculo ja que era uma valor fixo. so estou parado agora e em como pegar o valor de transporte e desconto ao digitar e acrescentar ou diminui no valor final... nao conheço os comandos de javascript para pegar em tempo real um valor de uma input em campos dinamicos =/
    – user70401
    Commented 6/04/2017 às 2:02
0

Alterei deixando td direto mostrando valores em reais, consegui jogar o valor do royallties e o do imposto em cima do valor final, e como faço para que pegue ao ser digitado o valor do transporte e desconto e tb jogue em cima do valor final? pode me ajudar?

SCRIPT:

<script type="text/javascript">
        $(function () {
          function removeCampo() {
                $(".removerCampo").unbind("click");
                $(".removerCampo").bind("click", function () {
                   if($("tr.linhas").length > 1){
                        $(this).parent().parent().remove();
                   }
                });
          }

            $(".adicionarCampo").click(function () {
                novoCampo = $("tr.linhas:first").clone();
                novoCampo.find("input").val("");
                novoCampo.find("input#qnt").val('1');
                novoCampo.find("input#total").val('R$ 0.00');
                novoCampo.find("input#royallties").val('R$ 0.00');
                novoCampo.find("input#imposto").val('R$ 0.00');
                novoCampo.find("input#transporte").val('R$ 0.00');
                novoCampo.find("input#desconto").val('R$ 0.00');
                novoCampo.find("input#valorfinal").val('R$ 0.00');
                novoCampo.insertAfter("tr.linhas:last");
                removeCampo();
          });
        });
    </script>

<script type="text/javascript">
    function listanome(elemento){

        var nome       = elemento.value;
        var cell_valor = elemento.parentElement.parentElement.querySelector('.resultado2');
        var cell_total = elemento.parentElement.parentElement.querySelector('td > input#total');
        var cell_royallties = elemento.parentElement.parentElement.querySelector('td > input#royallties');
        var cell_imposto = elemento.parentElement.parentElement.querySelector('td > input#imposto');
        var cell_valorfinal = elemento.parentElement.parentElement.querySelector('td > input#valorfinal');
        var qnt = elemento.parentElement.parentElement.querySelector('td > input#qnt').value;
        qnt = (qnt != '')? parseInt(qnt): 0;

        var nome = elemento.value;
        var cell = elemento.parentElement.nextElementSibling.nextElementSibling;

        $(document).on('change', 'input#qnt', function(){
            var qnt        = $(this).val();
            qnt        = (qnt != '')? parseInt(qnt): 0;

            var valor      = $(this).parents('td').siblings().children('input#valor_unitario').val();
            valor      = parseFloat(valor.replace("R$","").replace(",","."));

            var cell_total = $(this).parents('td').siblings().children('input#total');
            var total      = (qnt * valor);

            var cell_royallties = $(this).parents('td').siblings().children('input#royallties');
            var royallties     = (total * 11.62)/100;

            var cell_imposto = $(this).parents('td').siblings().children('input#imposto');
            var imposto     = (total * 4.65)/100;

            var cell_valorfinal = $(this).parents('td').siblings().children('input#valorfinal');
            var valorfinal = total + royallties + imposto;

            cell_total.val("R$ " + total.toFixed(2).replace(".",","));
            cell_royallties.val("R$ " + royallties.toFixed(2).replace(".",","));
            cell_imposto.val("R$ " + imposto.toFixed(2).replace(".",","));
            cell_valorfinal.val("R$ " + valorfinal.toFixed(2).replace(".",","));

        });



         if(nome != ''){
              var dados = {
                listanome : nome
              }
              $.post('../BUSCAR_BANCO/busca_preco.php', dados, function(retorna){
                cell_valor.innerHTML = retorna;
                var value = elemento.parentElement.parentElement.querySelector('td > input#valor_unitario').value; 
                var valor = parseFloat(value.replace("R$","").replace(",",".")); 
                var total = parseInt(qnt) * parseFloat(valor);

                var royallties = (parseFloat(total) * 11.62)/100;
                var imposto = (parseFloat(total) * 4.65)/100;
                var valorfinal = parseFloat(total) + parseFloat(royallties) + parseFloat(imposto);

                cell_total.value  = "R$ " + total.toFixed(2);
                cell_royallties.value = "R$ " + royallties.toFixed(2);
                cell_imposto.value = "R$ " + imposto.toFixed(2);
                cell_valorfinal.value  = "R$ " + valorfinal.toFixed(2);
              });
            }else{
              alert("Sem Equipamento Selecionado");    
            }

    }
    </script>

TR DO HTML:

<tr class="linhas">
                <td colspan="4">
                    <select style="width:355px;" name="descricao[]" id="nome" onchange="listanome(this)">
                        <option value="">Selecione..</option>
                                    <?php
                                        include_once '../conexaobancodedados.php';

                                        $sql = "select * from  tabelapreco left outer join unidades on unidades.id_unidade = tabelapreco.id_unidade order by `nome_tabela`";

                                        $result=  mysql_query($sql,$con);
                                        if(@mysql_num_rows($result)>0){

                                        while($row =  mysql_fetch_array($result)){

                                        ?>
                                        <option value="<?php echo $row["id_tabela"];?>"><?php echo $row["nome_tabela"];?> (<?php echo $row["nome_unidade"];?>)</option>

                                        <?php           
                                        }
                                        }else{
                                            ?>
                                            <option value="">Sem Cadastro de Equipamento</option>
                                            <?php 
                                        }

                                        ?>
                    </select>
                </td>
                <td><input type="number" value="1" min="1" style="width:50px;text-align: center;" size="1" name="qtd[]" id="qnt"></td>
                <td class="resultado2"><input size="10" value="R$ 0.00" readonly="true" style="text-align: center;background-color:#cccccc;color:black;"></td>
                <td><input type="text" size="10" name="valortotal[]" readonly="true" value="R$ 0.00" style="background-color:blue;color:white;text-align: center;" id="total" onKeyPress="return(MascaraMoeda(this,'.',',',event))"></td>
                <td><input type="text" size="10" name="royallties[]" id="royallties" value="R$ 0.00" onKeyPress="return(MascaraMoeda(this,'.',',',event))" readonly="true" style="background-color:#cccccc;color:black;text-align: center;"></td>
                <td><input type="text" size="6" name="imposto[]" id="imposto" value="R$ 0.00" onKeyPress="return(MascaraMoeda(this,'.',',',event))" readonly="true" style="background-color:#cccccc;color:black;text-align: center;"></td>
                <td><input size="16" name="transporte[]" id="transporte" value="R$ 0.00" style="text-align: center;" onKeyPress="return(MascaraMoeda(this,'.',',',event))"></td>
                <td><input size="11" name="desconto[]" id="desconto" value="R$ 0.00" style="text-align: center;" onKeyPress="return(MascaraMoeda(this,'.',',',event))"></td>
                <td><input size="16" name="valorfinal[]" id="valorfinal" value="R$ 0.00" style="background-color:blue;color:white;text-align: center;" onKeyPress="return(MascaraMoeda(this,'.',',',event))"></td>
                <td><a href="#" class="removerCampo" title="Remover linha"><input type="button" name="Excluir" style="width:70px;background-color:red;"></a></td>
            </tr>
            </tbody>
            <tfoot>
                <tr>
                       <td colspan="13">
            <center><a href="#" class="adicionarCampo" title="Adicionar item"><input type="button" name="adicionar" value="Adicionar"></a></center>
                       </td>
                </tr>

            </tfoot>

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