Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Boca

Calculo Subtotal

Recommended Posts

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>

Compartilhar este post


Link para o post
Compartilhar em outros sites

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>

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Mostre como você tentou.

Compartilhar este post


Link para o post
Compartilhar em outros sites
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

Compartilhar este post


Link para o post
Compartilhar em outros sites
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

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.