Publicado em 28 de out.

Calculo Subtotal

Pessoal preciso de ajuda, na seguinte situação, meus campos são criados dinamicamente e preciso calcular o subtotal ao digitar de cada produto.

Exemplo

<table>
 <tr>
 <td>QTD</td>
 <td>VALOR UNITARIO</td>
 <td>SUB TOTAL</td>
 </tr>
 <tr>
 <td><input type="text" name="qtd[]"/></td>
 <td><input type="text" name="valorunitario[]" /></td>
 <td><input type="text" name="valorsubtotal[]" /></td>
 </tr>
 <tr>
 <td><input type="text" name="qtd[]" /></td>
 <td><input type="text" name="valorunitario[]" /></td>
 <td><input type="text" name="valorsubtotal[]" /></td>
 </tr>
 <tr>
 <td><input type="text" name="qtd[]" /></td>
 <td><input type="text" name="valorunitario[]" /></td>
 <td><input type="text" name="valorsubtotal[]" /></td>
 </tr>
</table>

Discussão (10)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

andreneeto· 31 de out.

Opa, da uma olhada e vê se resolve o teu problema!

Segue exemplo: https://jsfiddle.net/7szha4uu/

gabrieldarezzo· 1 de nov.

Tava de bobeira e tentei fazer 100% em JS.

Da uma olhada:

<!DOCTYPE HTML>

<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>

<table>
	<tbody id="body-table">
 <tr>
 <td>QTD</td>
 <td>VALOR UNITARIO</td>
 <td>SUB TOTAL</td>
 </tr>
 <tr>
 <td><input type="text" class="updateFields qtd" name="qtd[]"/></td>
 <td><input type="text" class="updateFields valorunitario" name="valorunitario[]" /></td>
 <td><input type="text" class="updateFields valorsubtotal" name="valorsubtotal[]" /></td>
 </tr>
 <tr>
 <td><input type="text" class="updateFields qtd" name="qtd[]"/></td>
 <td><input type="text" class="updateFields valorunitario" name="valorunitario[]" /></td>
 <td><input type="text" class="updateFields valorsubtotal" name="valorsubtotal[]" /></td>
 </tr>
	</tbody>
	<tfoot>
 <tr>
 <td colspan="2" style="text-align:center">Total:</td>
 <td><input type="text" id="total" name="total" /></td>
 </tr>
	</tfoot>
</table>
<br />
<br />
<br />
<button id="btn-addCell">Adicionar Cell</button>

<hr />
<br />
<button id="btn-acao">Atualizar</button>

<script type="text/javascript">

	document.getElementById("btn-addCell").addEventListener('click', function() {
 var inputQtd = document.createElement('input');
 inputQtd.setAttribute('type', 'text');
 inputQtd.className = 'updateFields qtd';
 inputQtd.setAttribute('name', 'qtd[]');

 var tdQtd = document.createElement('td');
 tdQtd.appendChild(inputQtd);

 var inpuUnit = document.createElement('input');
 inpuUnit.setAttribute('type', 'text');
 inpuUnit.className = 'updateFields valorunitario';
 inpuUnit.setAttribute('name', 'valorunitario[]');

 var tdUnit = document.createElement('td');
 tdUnit.appendChild(inpuUnit);

 var inpuSubTotal = document.createElement('input');
 inpuSubTotal.setAttribute('type', 'text');
 inpuSubTotal.className = 'updateFields valorsubtotal';
 inpuSubTotal.setAttribute('name', 'valorsubtotal[]');

 var tdSubTotal = document.createElement('td');
 tdSubTotal.appendChild(inpuSubTotal);

 var tr = document.createElement('tr');
 tr.appendChild(tdQtd);
 tr.appendChild(tdUnit);
 tr.appendChild(tdSubTotal);

 document.getElementById("body-table").appendChild(tr);
 updateFields();
	});

	function getFieldNameByClass(classes){
 classesArr = classes.split(" ");
 for(x in classesArr){
 if(classesArr[x] == 'qtd') return 'qtd';
 if(classesArr[x] == 'valorunitario') return 'valorunitario';
 if(classesArr[x] == 'valorsubtotal') return 'valorsubtotal';
 }
	}

	//Encapsulamos para poder chamar em outro contexto
	var updateFields = function(){
 var fields = document.getElementsByClassName("updateFields");
 for (var i = 0; i < fields.length; i++) {
 fields[i].addEventListener('keyup', function() {
 var thisTr = this.parentElement.parentElement;
 var tdChilds = thisTr.childNodes;

 var subTotalLinha = {};
 for(var y = 0;y < tdChilds.length; y++){

 //Pega apenas os Node reais
 if(tdChilds[y].nodeType == tdChilds[y].ELEMENT_NODE){
 //Dentro do Node (td) navega até o input td->input
 var input = tdChilds[y].childNodes[0];

 var inputName = getFieldNameByClass(input.className);
 subTotalLinha[inputName] = input.value;
 //Deixa a referencia ao node, para atualizar após a conta
 if(inputName == 'valorsubtotal'){
 subTotalLinha['nodeRef'] = input;
 }
 }
 }

 //is Defined or null?
 if(subTotalLinha['qtd'] == null || subTotalLinha['qtd'] == '') return false;
 if(subTotalLinha['valorunitario'] == null || subTotalLinha['valorunitario'] == '') return false;

 var qtd = parseInt(subTotalLinha['qtd']);
 var valorunitario = parseInt(subTotalLinha['valorunitario']);

 var subTotal = qtd * valorunitario;
 subTotalLinha['nodeRef'].value = subTotal;

 //Vamos somar todos os campos a classe valorsubtotal
 var subtotalFields = document.getElementsByClassName("valorsubtotal");
 var total = 0;
 for(var i = 0; i < subtotalFields.length; i++){
 if(subtotalFields[i].value != ''){
 total += parseInt(subtotalFields[i].value);
 }
 }
 //Agora atualiza o campo 'Total'
 document.getElementById("total").value = total;
 }, false);
 }
	}

	updateFields();

</script>
</body>
</html>

Gilberto Nogueira de Almeida· 8 de fev.

Bom dia !

Tem como formatar em moeda este modelo ex./; Valor Unitário 1.200,00 total 3.600,00]

Fico no aguardo,

Obrigado,

Gilberto Nogueira de Almeida· 13 de fev.

Alguém conseguiu formar em valores reais o exemplo acima ?

Gilberto Nogueira de Almeida· 1 de mar.

Eu consegui formatar em real, mas não consigo adicionar itens

Ex: qtd valor unitário Aliq. IPI Sub-Total Valor do IPI

Não estou conseguindo calcular aliq.IPI x Valor Unitário

Caso alguém saiba com exemplo acima agradeço,

Gilberto

Gilberto Nogueira de Almeida· 17 de abr.

Boa já resolvi meu problemas que consultei aqui

Ultima dúvida tem como enviar esses dados via post ou get não estou conseguindo

Gilberto Nogueira de Almeida· 23 de abr.

Alguém pode ajudar ????

Gilberto

William Bruno· 23 de abr.

Tem como sim, é só colocar uma tag form em volta dos campos e um input submit.

Mostre como você tentou.

Gilberto Nogueira de Almeida· 23 de abr.

5 horas atrás, William Bruno disse:

Tem como sim, é só colocar uma tag form em volta dos campos e um input submit.

Mostre como você tentou.

Bom dia Willian !

Bem peguei o exemplo daqui que está acima

Só que não consigo enviar para outra pagina

Segue o que estou utilizando para enviar resumido

	<form method=GET action="http://192.168.0.12:8082/web/ws/u_fRetcotac.apw" name="btn-addCell" "onsubmit="return click(this)">

	 

	aqui são as funcões javascript

	 

	<input type="text" style="text-align:right" class="updateFields valorsubtotal3" name="valorsubtotal3[]"/ size ="8" autocomplete="off" disabled></td>

	Estou utilizando submit 

	<input  type="submit" name="B1" value="Enviar">

	 

	Gostaria de saber que preciso para enviar

	 

	Desde já agradeço

	 

	Gilberto

Gilberto Nogueira de Almeida· 23 de abr.

5 horas atrás, Gilberto Nogueira de Almeida disse:

Bom dia Willian !

Bem peguei o exemplo daqui que está acima

Só que não consigo enviar para outra pagina

Segue o que estou utilizando para enviar resumido

 <form method=GET action="http://192.168.0.12:8082/web/ws/u_fRetcotac.apw" name="btn-addCell" "onsubmit="return click(this)">

  

 aqui são as funcões javascript

  

 <input type="text" style="text-align:right" class="updateFields valorsubtotal3" name="valorsubtotal3[]"/ size ="8" autocomplete="off" disabled></td>

 Estou utilizando submit 

 <input  type="submit" name="B1" value="Enviar">

  

 Gostaria de saber que preciso para enviar

  

 Desde já agradeço

  

 Gilberto

	Descobri o problema

	Quando envio via HTML simples funciona mas no Protheus da Totvs Não

	 

	A Empresa usa o Protheus

	E Estou utilizando ADVPL-ASP mas já abri chamado

	Obrigado pela Atenção!

	Gilberto

	 

	 

	Gostaria de saber se tem como tirar %5B%5D que corresponde [ ], o Protheus não entende esse tipo de TAg

	Antecipadamente agradeço

	Gilberto