3

Boa Tarde, Preciso de uma grande ajuda, estou travado em um problema que aparentemente deve ser muito fácil! mais não estou conseguindo evoluir.

Tenho um código com os seguintes campos: inserir a descrição da imagem aqui

No meu script consta com 5 grupos de inputs aparentes e um botão de adicionar mais inputs(inputs dinâmicos), meu problema está na soma dos inputs.

1 - Preciso efetuar a multiplicação dos inputs "Quantidade" X "Valor Und" e seu resultado aparecer no input "Total". No meu atual código esta multiplicação já está sendo feita, o que preciso é que os inputs "Quantidade" e "Valor Und" aceitem a "," Ex.( 5,50 ).Pois estou trabalhando com unidades de medida e dinheiro.(Essa função deverá ser valida para todos os campos até mesmo os dinâmicos)

2 - Necessito efetuar a soma de todos com inputs "Vltotal" ( até mesmo os dinâmicos ) + o input "outras" e seu resultado aparece no campo "totalnfe". Que deverá ser em formatação de Dinheiro R$. Ex( 2,50 ou 2.005,50)

Como falei acredito que seja uma coisa tão simples, só que não estou conseguindo..

Desde já agradeço!

<script>
    $(function () {
    //Initialize Select2 Elements
    $(".select2").select2();

    //Date picker
    $('#datae').datepicker({
      format: 'dd/mm/yyyy', 
      todayBtn: 'linked',
      language: 'pt-BR',
      autoclose: true,
      todayHighlight: true
    });
    $('#datav').datepicker({
      format: 'dd/mm/yyyy', 
      todayBtn: 'linked',
      language: 'pt-BR',
      autoclose: true,
      todayHighlight: true
    }); 
  });
</script>
<script type="text/javascript">
$(document).ready(function () {
    var i = 5;
    //adiciona nova linha
    $("#add").on("click", function () {
        i++;
        
        var newRow = $("<tr>");
        var cols = "";
        cols += '<td><input type="text" class="form-control" id="cod" name="cod[]"></td>';
        cols += '<td><input type="text" class="form-control" id="desc" name="desc[]"></td>';
        cols += '<td><input type="text" class="form-control" id="und" name="und[]"></td>';
        cols += '<td><input type="text" class="form-control" id="qnd' + i + '" name="qnd[]"></td>';
        cols += '<td><input type="text" class="form-control" id="vlund' + i + '" name="vlund[]"></td>';
        cols += '<td><input type="text" class="form-control soma" id="vltotal' + i + '" name="vltotal[]" onblur="calcular()"></td>';
        cols += '<td><button type="button" name="remove" id="'+i+'" class="btn btn-danger deleteLinha">X</button></td>';
        newRow.append(cols);
        
        $("#products-table").append(newRow);
    });
    
    //chamada da função para calcular o total de cada linha
    $("#products-table").on("blur keyup", 'input[id^="vlund"], input[id^="qnd"]', function (event) {
        calculateRow($(this).closest("tr"));
    });
    
    //remove linha
    $("#products-table").on("click", "button.deleteLinha", function (event) {
        $(this).closest("tr").remove();
    });
});
 
//função para calcular o total de cada linha   
function calculateRow(row) {
    var vlund = +row.find('input[id^="vlund"]').val();
    var qnd = +row.find('input[id^="qnd"]').val();
    //2 casas decimais
    var total = (vlund * qnd).toFixed(2);
    //substitui ponto por virgula
    total=total.replace(".", ",");
    //a regex abaixo coloca um ponto a esquerda de cada grupo de 3 digitos desde que não seja no inicio do numero
    row.find('input[id^="vltotal"]').val((total).replace(/\B(?=(\d{3})+(?!\d))/g, "."));     
}

$(".soma").blur(function(){
    calcular();
});

function calcular() {
    var soma = 0;
    $(".soma").each(function(indice, item){
        var valor = parseFloat($(item).val());
        console.log(valor);
        if ( !isNaN( valor ) ) {
            soma += valor;
        }
    });
    $("#totalnfe").val(soma)
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
              <table class="table" id="products-table">             
                <thead>
                  <tr>
                    <th>Cod.</th>
                    <th>Descrição</th>
                    <th>Und.</th>
                    <th>Quantidade</th>
                    <th>R$: UND</th>
                    <th>R$: TOTAL</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td><input type="text" class="form-control cod" id="cod" name="cod[]"></td>
                    <td><input type="text" class="form-control desc" id="desc" name="desc[]"></td>
                    <td><input type="text" class="form-control und" id="und" name="und[]"></td>
                    <td><input type="text" class="form-control" id="qnd" name="qnd[]"></td>
                    <td><input type="text" class="form-control" id="vlund" name="vlund[]" onblur="calcular()"></td>
                    <td><input type="text" class="form-control soma" id="vltotal" name="vltotal[]" onblur="calcular()"></td>
                  </tr>
                  <tr>
                    <td><input type="text" class="form-control cod" id="cod" name="cod[]"></td>
                    <td><input type="text" class="form-control desc" id="desc" name="desc[]"></td>
                    <td><input type="text" class="form-control und" id="und" name="und[]"></td>
                    <td><input type="text" class="form-control" id="qnd" name="qnd[]"></td>
                    <td><input type="text" class="form-control" id="vlund" name="vlund[]"></td>
                    <td><input type="text" class="form-control soma" id="vltotal" name="vltotal[]" onblur="calcular()"></td>
                  </tr>
                  <tr>
                    <td><input type="text" class="form-control" id="cod" name="cod[]"></td>
                    <td><input type="text" class="form-control" id="desc" name="desc[]"></td>
                    <td><input type="text" class="form-control" id="und" name="und[]"></td>
                    <td><input type="text" class="form-control" id="qnd" name="qnd[]"></td>
                    <td><input type="text" class="form-control" id="vlund" name="vlund[]"></td>
                    <td><input type="text" class="form-control soma" id="vltotal" name="vltotal[]" onblur="calcular()"></td>
                  </tr>                           
                  <tr>
                    <td><input type="text" class="form-control" id="cod" name="cod[]"></td>
                    <td><input type="text" class="form-control" id="desc" name="desc[]"></td>
                    <td><input type="text" class="form-control" id="und" name="und[]"></td>
                    <td><input type="text" class="form-control" id="qnd" name="qnd[]"></td>
                    <td><input type="text" class="form-control" id="vlund" name="vlund[]"></td>
                    <td><input type="text" class="form-control soma" id="vltotal" name="vltotal[]" onblur="calcular()"></td>
                  </tr>                           
                  <tr>
                    <td><input type="text" class="form-control" id="cod" name="cod[]"></td>
                    <td><input type="text" class="form-control" id="desc" name="desc[]"></td>
                    <td><input type="text" class="form-control" id="und" name="und[]"></td>
                    <td><input type="text" class="form-control" id="qnd" name="qnd[]"></td>
                    <td><input type="text" class="form-control" id="vlund" name="vlund[]"></td>
                    <td><input type="text" class="form-control soma" id="vltotal" name="vltotal[]" onblur="calcular()"></td>
                  </tr>
                  <tr class="row">
                  </tr>
                </tbody>
                <tfoot>
                  <tr>
                    <td><button type="button" name="add" id="add" class="btn btn-success">Adicionar Linhas +</button></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td><label for="totalnfe">Outras Despesas</label><input type="text" class="form-control" id="outras" name="outras"></td>
                    <td><label for="totalnfe">Valor Total da Nota</label><input type="text" class="form-control" id="totalnfe" name="totalnfe" readonly></td>
                  </tr>  
                </tfoot>
              </table>
              </html>

1
  • essas funções do Date picker estão dando erro, falta biblioteca.
    – user60252
    Commented 1/09/2017 às 11:22

2 Respostas 2

3

Comentários no próprio codigo

$(document).ready(function () {
	//chamada da função para calcular valor total
	$(".table").on("change keyup keydown paste propertychange bind mouseover", function(){
	    calcular();
	});

    var i = 5;
    //adiciona nova linha
    $("#add").on("click", function () {
        i++;
        
        var newRow = $("<tr>");
        var cols = "";
        cols += '<td><input type="text" class="form-control" id="cod" name="cod[]"></td>';
        cols += '<td><input type="text" class="form-control" id="desc" name="desc[]"></td>';
        cols += '<td><input type="text" class="form-control" id="und" name="und[]"></td>';
        cols += '<td><input type="text" class="form-control" id="qnd' + i + '" name="qnd[]"></td>';
        cols += '<td><input type="text" class="form-control" id="vlund' + i + '" name="vlund[]"></td>';
        cols += '<td><input style="display: none;" type="text" class="form-control soma" id="vltotal' + i + '" name="vltotal[]" onblur="calcular()">';
        cols += '<input type="text" class="form-control somaS" id="vltotalS' + i + '"></td>';
        cols += '<td><button type="button" name="remove" id="'+i+'" class="btn btn-danger deleteLinha">X</button></td>';
        newRow.append(cols);
        
        $("#products-table").append(newRow);
        
	    	$(".soma").each(function() {
	        	$(this).blur(function(){
	            	calcular();
	        	});
	    	});
	    
    });
    
    //chamada da função para calcular o total de cada linha
    $("#products-table").on("blur keyup", 'input[id^="vlund"], input[id^="qnd"]', function (event) {
        calculateRow($(this).closest("tr"));
    });
    
    //remove linha
    $("#products-table").on("click", "button.deleteLinha", function (event) {
        $(this).closest("tr").remove();
    });
});
 
	//função para calcular o total de cada linha   
        function calculateRow(row) {
	    var vlund = row.find('input[id^="vlund"]').val();
	    //retira separadores de milhar ponto
	    vlund = vlund.split(".").join("");
	    //substitui separador decimal virgula por ponto
	    vlund=vlund.replace(",", ".");
	    vlund = +vlund;
	    var qnd = +row.find('input[id^="qnd"]').val();
	    //total para uso nos calculos
	    //2 casas decimais 
	    var total = (vlund * qnd).toFixed(2);   
	    row.find('input[id^="vltotal"]').val(total); 
	    //totalS para uso na apresentação substitui separador decimal ponto por virgula
	    totalS=total.replace(".", ",");
	    //a regex abaixo coloca um ponto a esquerda de cada grupo de 3 digitos desde que não seja no inicio do numero
	    row.find('input[id^="vltotalS"]').val((totalS).replace(/\B(?=(\d{3})+(?!\d))/g, "."));  
	
	}

	//função para calcular o total da nota 
	function calcular() {
    	var soma = 0;
    	$(".soma").each(function(indice, item){
        	var valor = parseFloat($(item).val());
        	//console.log(valor);
        	if ( !isNaN( valor ) ) {
            	soma += valor;
        	}
    	});
    
    	//pega o valor das outras despesas e caso haja substitue a virgula por ponto
    	var outras = (document.getElementById("outras").value).replace(",", ".");
    
    	outras=Number(outras);
        soma=(soma+outras).toFixed(2);
    	//substitui separador decimal ponto por virgula
    	soma=soma.replace(".", ",");
    	//a regex abaixo coloca um ponto a esquerda de cada grupo de 3 digitos desde que não seja no inicio do numero
    	$("#totalnfe").val((soma).replace(/\B(?=(\d{3})+(?!\d))/g, "."))
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<table class="table" id="products-table">             
<thead>
<tr>
	<th>Cod.</th>
	<th>Descrição</th>
	<th>Und.</th>
	<th>Quantidade</th>
	<th>R$: UND</th>
	<th>R$: TOTAL</th>
</tr>
</thead>
<tbody>
<tr>
	<td><input type="text" class="form-control cod" id="cod" name="cod[]"></td>
	<td><input type="text" class="form-control desc" id="desc" name="desc[]"></td>
	<td><input type="text" class="form-control und" id="und" name="und[]"></td>
	<td><input type="text" class="form-control" id="qnd" name="qnd[]"></td>
	<td><input type="text" class="form-control" id="vlund" name="vlund[]" onblur="calcular()"></td>
	<!-- todos os inputs com style="display: none; são para uso nos calculos-->
	<td><input style="display: none;" type="text" class="form-control soma" id="vltotal" name="vltotal[]" onblur="calcular()">
	<input type="text" class="form-control somaS" id="vltotalS"></td>
</tr>
<tr>
	<td><input type="text" class="form-control cod" id="cod" name="cod[]"></td>
	<td><input type="text" class="form-control desc" id="desc" name="desc[]"></td>
	<td><input type="text" class="form-control und" id="und" name="und[]"></td>
	<td><input type="text" class="form-control" id="qnd" name="qnd[]"></td>
	<td><input type="text" class="form-control" id="vlund" name="vlund[]"></td>
	<td><input style="display: none;" type="text" class="form-control soma" id="vltotal" name="vltotal[]" onblur="calcular()">
	<input type="text" class="form-control somaS" id="vltotalS"></td>
</tr>
<tr>
	<td><input type="text" class="form-control" id="cod" name="cod[]"></td>
	<td><input type="text" class="form-control" id="desc" name="desc[]"></td>
	<td><input type="text" class="form-control" id="und" name="und[]"></td>
	<td><input type="text" class="form-control" id="qnd" name="qnd[]"></td>
	<td><input type="text" class="form-control" id="vlund" name="vlund[]"></td>
	<td><input style="display: none;" type="text" class="form-control soma" id="vltotal" name="vltotal[]" onblur="calcular()">
	<input type="text" class="form-control somaS" id="vltotalS"></td>
</tr>                           
<tr>
	<td><input type="text" class="form-control" id="cod" name="cod[]"></td>
	<td><input type="text" class="form-control" id="desc" name="desc[]"></td>
	<td><input type="text" class="form-control" id="und" name="und[]"></td>
	<td><input type="text" class="form-control" id="qnd" name="qnd[]"></td>
	<td><input type="text" class="form-control" id="vlund" name="vlund[]"></td>
	<td><input style="display: none;" type="text" class="form-control soma" id="vltotal" name="vltotal[]" onblur="calcular()">
	<input type="text" class="form-control somaS" id="vltotalS"></td>
</tr>                           
<tr>
	<td><input type="text" class="form-control" id="cod" name="cod[]"></td>
	<td><input type="text" class="form-control" id="desc" name="desc[]"></td>
	<td><input type="text" class="form-control" id="und" name="und[]"></td>
	<td><input type="text" class="form-control" id="qnd" name="qnd[]"></td>
	<td><input type="text" class="form-control" id="vlund" name="vlund[]"></td>
	<td><input style="display: none;" type="text" class="form-control soma" id="vltotal" name="vltotal[]" onblur="calcular()">
	<input type="text" class="form-control somaS" id="vltotalS"></td>
</tr>

</tbody>
<tfoot>
<tr>
	<td><button type="button" name="add" id="add" class="btn btn-success">Adicionar Linhas +</button></td>
	<td></td>
	<td></td>
	<td></td>
	<td><label for="totalnfe">Outras Despesas</label><input type="text" class="form-control" id="outras" name="outras"></td>
	<td><label for="totalnfe">Valor Total da Nota</label><input type="text" class="total" id="totalnfe" name="totalnfe" readonly></td>
</tr>  
</tfoot>
</table>
</html>

15
  • Isso mesmo que queria, a única observação é que o input "outras"devera soma "+"com a somas dos valores. Commented 1/09/2017 às 19:32
  • @DanilloBraga fica esperto que não é só trocar o sinal de menos (-) na linha soma=(soma-outras).toFixed(2); Antes disso tem que incluir essa linha outras=Number(outras); Já editei a pergunta para somar outras despesas
    – user60252
    Commented 1/09/2017 às 19:48
  • Tem um problema: quando inclui um valor no formato "2.005,50" dá "NaN" no total.
    – Sam
    Commented 1/09/2017 às 19:49
  • @Dvdsamm só fazer um replace na hora de pegar esse valor
    – user60252
    Commented 1/09/2017 às 19:51
  • Isso que achei complicado. Se eu fizer replace em todos os pontos, não daria certo tb, porque 2.005.50 viraria 200550, porque as casas decimais, nesse caso aí do formulário, pode ser separada tanto por ponto quanto por vírgula: 5,5 é o mesmo que 5.5, nesse caso.
    – Sam
    Commented 1/09/2017 às 19:57
0

Uma sugestão é usar o id do input para pegar os valores dos inputs, multiplica-los e usar o seguinte código para formatar:

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}

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 .