Somar valores de 2 campos dinamicos e mostrar em outro

Boa tarde amigos,

Tenho um JS que cria linhas com campos de text de um form atraves de um bt. Em cada linha existem 4 campos (codProduto, QtdItem, valorUnitario, valorTotalItem), neste JS tb faço multiplico os campos QtdItem e ValorUnitario e mostro o resultado no campo valorTotalItem. Até ai tudo funfa certinho, mas agora estou querendo somar todos os valores do campo valorTotalItem de cada linha e mostrar em outro campo fixo no form, que é o valorTotalNF.

Como poderia armazenar estes valores e depois mostrar neste campo??

Tentei fazer, mas nao consegui jogar a soma.

JS:

<html>  
<head>
<title></title>  
<script type="text/javascript">   
//Não altere esses valores!
//Baseado no código postado em: http://forum.imasters.uol.com.br/index.php?showtopic=325267
var iCount = 0;
var iCampos = 1;

//Definindo quantos campos poderão ser criados (máximo);
var iCamposTotal = 20; 

//Função que adiciona os campos;
function addInput() {   
if (iCampos <= iCamposTotal) {
    
    var texto = "<div id='linha"+iCount+"'><input type='hidden' name='valorTotalItemTemp' id='texto"+iCount+"' value=''><input type='hidden' name='valorTotalNFTemp' id='texto"+iCount+"' value=''>&nbsp;<input type='text' name='codProduto' id='texto"+iCount+"' size='10' value=''>&nbsp;<input type='text' name='qtdItem' id='texto"+iCount+"' size='5' value=''>&nbsp;<input type='text' name='valorUnitario' id='texto"+iCount+"' size='8' value='' onblur='multiplica();' >&nbsp;<input type='text' name='valorTotalItem' id='texto"+iCount+"' size='8' value='' readonly='true'></td>&nbsp;<td bordercolor='#FFFFFF' bgcolor='#FFFFFF'><input type='button' value=' - ' onClick='removeInput("+iCount+")'></div>";
  
    //Capturando a div principal, na qual os novos divs serão inseridos:
    var camposTexto = document.getElementById('camposTexto');   
    camposTexto.innerHTML = camposTexto.innerHTML+texto;
  
iCount++;
iCampos++;
}   
}
   
//Função que remove os campos;
function removeInput(e) {
   var pai = document.getElementById('camposTexto');
   var filho = document.getElementById("linha"+e);
   document.getElementById("texto"+e).select();
    if(confirm("Este item será excluído!\n\nDeseja confimar?")){
        var removido = pai.removeChild(filho);
        iCampos--;
    }
}

// Função para multiplicar os campos qtdItem com valorUnitario
function multiplica() {
	
	var trocaV = /,/g;
	var trocaP = /\./g;
	
	var valorTotalItemTemp = document.forms["form1"].elements["valorTotalItemTemp"];
	var valorTotalNFTemp = document.forms["form1"].elements["valorTotalNFTemp"];
	
	var txtCodProduto = document.forms["form1"].elements["codProduto"];
   	var txtQtdItem = document.forms["form1"].elements["qtdItem"];
	var txtValorUnitario = document.forms["form1"].elements["valorUnitario"];
	var txtValorTotalItem = document.forms["form1"].elements["valorTotalItem"];
	var txtValorTotalNF = document.forms["form1"].elements["valorTotalNF"];
	var iLoop;
	
	//alert(txtCodProduto.length);
	
	for (iLoop = 0; iLoop < txtCodProduto.length; iLoop++){
		
		if ((isNaN(txtQtdItem[iLoop].value)) || (isNaN(txtValorUnitario[iLoop].value.replace(trocaV,".")))) {
							
			alert("Preencha os valores corretamente!");
						
	    } else {
		
			valorTotalItemTemp[iLoop].value = parseFloat(txtQtdItem[iLoop].value.replace(trocaV,".")) * parseFloat(txtValorUnitario[iLoop].value.replace(trocaV,"."));
			
			valorTotalNFTemp.value = valorTotalItemTemp[iLoop].value;
					
			}
			if (valorTotalItemTemp[iLoop].value > 0) {
												
				txtValorTotalItem[iLoop].value = valorTotalItemTemp[iLoop].value.toString().replace(trocaP,",");
				
				//txtValorTotalNF.value = valorTotalNFTemp[iLoop].value.toString().replace(trocaP,",");
												
				} else {
				
					txtValorTotalItem[iLoop].value = "";
				}
						
	}
	
	txtValorTotalNF.value = valorTotalNFTemp.value.toString().replace(trocaP,",");
	
	
}


// Valida os campos requeridos do formulário de itens da NF
function validaForm(){

    var txtCodProduto = document.forms["form1"].elements["codProduto"];
	var txtQtdItem = document.forms["form1"].elements["qtdItem"];
	var txtValorUnitario = document.forms["form1"].elements["valorUnitario"];
    var iLoop;
		
		for (iLoop = 0; iLoop<txtCodProduto.length; iLoop++){
	        
			if (txtCodProduto[iLoop].value == ''){
				alert("Favor preencher o campo CÓDIGO do item "+ iLoop + ".");
				txtCodProduto[iLoop].focus();
				return false;
			}
			if (txtQtdItem[iLoop].value == ''){
				alert("Favor preencher o campo QUANTIDADE do item "+ iLoop + ".");
				txtQtdItem[iLoop].focus();
				return false;
			}
			
			if (txtValorUnitario[iLoop].value == ''){
				alert("Favor preencher o campo VALOR UNITÁRIO do item "+ iLoop + ".");
				txtValorUnitario[iLoop].focus();
				return false;
			}
			
	}
	return true;
}
</script>

</head>  
<body> 
<form  name="form1" id="form1" action="" method="post" onSubmit="return validaForm();">
<input type="button" value=" + " name="add_input" id="add_input" onClick="addInput();">
<table width="500" border="1" cellpadding="0" cellspacing="0" bordercolor="#999999" bgcolor="#FFFFFF">
  <tr>
    <td width="38" bordercolor="#FFFFFF" bgcolor="#CCCCCC"><div align="center" class="texto1">Item</div></td>
    <td width="61" bordercolor="#FFFFFF" bgcolor="#CCCCCC"><div align="center" class="texto1">Código</div></td>
    <td width="148" bordercolor="#FFFFFF" bgcolor="#CCCCCC"><div align="center" class="texto1">Produto</div></td>
    <td width="39" bordercolor="#FFFFFF" bgcolor="#CCCCCC"><div align="center" class="texto1">Unid</div></td>
    <td width="46" bordercolor="#FFFFFF" bgcolor="#CCCCCC"><div align="center" class="texto1">Qtd</div></td>
    <td width="69" bordercolor="#FFFFFF" bgcolor="#CCCCCC"><div align="center" class="texto1">Valor Unit</div></td>
    <td width="81" bordercolor="#FFFFFF" bgcolor="#CCCCCC"><div align="center" class="texto1">Valor Total</div></td>
	<td width="81" bordercolor="#FFFFFF" bgcolor="#CCCCCC"><div align="center" class="texto1">Remover</div></td>
  </tr>
</table>
<table width="500" border="1" cellpadding="0" cellspacing="0" bordercolor="#999999" bgcolor="#FFFFFF">
  <tr>
		<td bordercolor="#FFFFFF" bgcolor="#FFFFFF"><div id="camposTexto"></div></td>
  </tr>
  <tr>
		<td><input type="text" name="valorTotalNF" size="10"></td>
  </tr>
</table>
<br>
<br>
<input type="submit" value="Enviar">
</form>  
</body>  
</html>

Vlw…

Topicos relacionados