Somar valores de uma lista e apresentar o total via JavaScript

[size=18]Olá boa noite.

estou com o seguinte problema:
preciso calcular o TOTAL dos valores de uma lista conforme vou inserindo os valores em um campo (INPUT) da lista. Meio coisa de doido, mas fazer oq.

alguém poderia me ajudar.
obrigado.[/size]

Coloque um trecho do código que já existe para que a gente consiga te orientar melhor.

De preferência indicando as entradas e saídas esperadas.

Na coluna amortizar tenho um campo input, onde coloco os valores. preciso fazer em JavaScript que ele some ou subtraia os valores digitados.
como eu não manjo muito de javascript estou meio perdido para montar essa função, se alguém puder dar umas dicas.
obrigado.
segue o código:

<TABLE class="tab1" border="1" bordercolor="#990000" cellpadding="0" cellspacing="0" rules="rows" frame="below" bordercolordark="white" width="100%">																			
	<TR>
	 	<TD align="center" colspan="7" class="ttlTab1"><bean:message key="scob.solicitacao.saque.conta.fgts.cotas.amortizar"/></TD>
	</TR>
	<TR>
		<TD width="12%" height="18"	align="center" 	class="ttlTab2"><bean:message key="scob.solicitacao.saque.inclusao.amortizar"/></TD>
	</TR>
<grid:iteracao id="grid" name="solicitacaoSaqueForm" property="gridAmortizacaoSaldo" nomePagina="paginarGridAmortizacaoSaldo" itensPagina="5">
	             	
<TR>	
   	<bean:define id="gridIndex"><bean:write name="gridIndex"/></bean:define>             	              	
                    		
	<TD align="center"  width="12%" height="18"	class="txtTab1">
    <scob:text name="grid" property="amortizar" size="20" formatKey="scob.format.currency" style="text-align:right"
		               			onkeypress="InputMoeda( this, 17, 2);" onkeydown="ignorarColar();"/>			               						               					        
   </TD>
</TR>
</grid:iteracao>

<TR class="heightLine">
	<TD align="center" class="lbl1"><scob:text name="solicitacaoSaqueForm" property="valorTotalAmortizar" formatKey="scob.format.currency" disabled="true" size="20"
		style="text-align:right"/>
	</TD>
</TR>
	           					              	
<TR>
	<TD align="center" class="rdpTab1" colspan="7">
	<grid:paginacao name="solicitacaoSaqueForm" property="gridAmortizacaoSaldo" nomePagina="paginarGridAmortizacaoSaldo" itensPagina="5" paginasFrame="10" acao="submeter('paginarGridFGTS')"/>
	</TD>
</TR> 							          	
</TABLE>

Dicas de como faze isso:

  1. Ajax, jQuery e DWR.

Exemplo:

Apos uma requisicao Ajax, usando uma funcao como callback:

ClasseAjax.listByAlgumaCoisa(setarSoma, idAlgumaCoisa);

function setarSoma(obj) {
     var total = 0;
     for (var i = 0; i < obj.length; i++) {
           total += obj.valorReal;
     }
}

Lembrando que o obj dentro da funcao é a lista que voce vai retornar do metodo ajax:

return listAlgumaCoisa;

Sem AJAX, o DWR, Preciso fazer o ajax na mão via javascript.

Pessoal, desculpe não mencionei esse detalhe.

Sai dessa empresa e pede pro cara que pediu isso pra voce se virar.

hehehehehe :slight_smile:

seria uma alternativa, mas no momento não dá.

Pessoal alguém poderia me ajudar a fazer um ajax na MÃO para somar esses valores?

desde já obrigado.

[quote=tiagostrokes][size=18]Olá boa noite.

estou com o seguinte problema:
preciso calcular o TOTAL dos valores de uma lista conforme vou inserindo os valores em um campo (INPUT) da lista. Meio coisa de doido, mas fazer oq.

alguém poderia me ajudar.
obrigado.[/size][/quote]
Segue exemplo de soma de inputs de uma lista via jquery:

[code]

Valor
Resultado
[/code][code] //No momento após inserir o valor novo:

var soma = 0;

$(’#tabelaArmotizacao > tbody tr .valorAmortizar’).each(function(i){
soma += parseFloat($(this).val());
});

$("#resultado").val(soma);[/code]Teste do código

javaflex obrigado pela ajuda, mas nesse caso eu tenho Jquery, então preciso fazer o calculo na unha mesmo… fazer todo trabalho na mão.

teria um exemplo?

[quote=tiagostrokes]javaflex obrigado pela ajuda, mas nesse caso eu tenho Jquery, então preciso fazer o calculo na unha mesmo… fazer todo trabalho na mão.

teria um exemplo?[/quote]
Quis dizer não ter o JQuery? E te proíbem de usar?

Voce pode fazer assim:

<input type="text" id="valor1" value="" onkeyup="somarValores(this.value);"/>  
<input type="text" id="valor2" value="" onkeyup="somarValores(this.value);/>  
<input type="text" id="valor3" value="" onkeyup="somarValores(this.value);/>
<input type="text" id="valor4" value="" onkeyup="somarValores(this.value);/>    

<input type="text" id="totalSoma" value=""/> 

<script src='text/javascript">

var total = 0;

function somarValores(valor) {
      total += valor;
      document.getElementById("totalSoma").value = total;
}
</script>

Será que ajuda ?

Vou quebrar seu galho, mas promete que vai sair dessa empresa.

Mesmo exemplo anterior, mas em puro javascript, só não me preocupei muito em otimizar:

//No momento após inserir o valor novo: 

var els = document.getElementsByClassName("valorAmortizar");
var elsArray = Array.prototype.slice.call(els, 0);
var soma = 0;

elsArray.forEach(function(el) {
    soma += parseFloat(el.value);
});

document.getElementById("resultado").value = soma;

http://jsfiddle.net/N2WcM/5/

Quis dizer eu não tenho.
obrigado pela ajuda vou testar hoje, qto a empresa, assim que eu arrumar uma melhor com certeza eu troco.

vlw, e obrigado mais uma vez.

javaflex esse trecho do seu código,

elsArray.forEach(function(el) {  
		    soma += parseFloat(el.value);  
		    alert(soma);
		});  

tem que fazer a chamada dele? Pois me parece que não está entrando nesse método.

esse trecho do seu código,

elsArray.forEach(function(el) { soma += parseFloat(el.value); alert(soma); });

tem que fazer a chamada dele? Pois me parece que não está entrando nesse método.

[quote=javaflex]Vou quebrar seu galho, mas promete que vai sair dessa empresa.

Mesmo exemplo anterior, mas em puro javascript, só não me preocupei muito em otimizar:

//No momento após inserir o valor novo: 

var els = document.getElementsByClassName("valorAmortizar");
var elsArray = Array.prototype.slice.call(els, 0);
var soma = 0;

elsArray.forEach(function(el) {
    soma += parseFloat(el.value);
});

document.getElementById("resultado").value = soma;

http://jsfiddle.net/N2WcM/5/[/quote]

o que exatamente faz essa parte do código

por que eu imprimo o elsArray e ele tem somente , (virgula).

[quote=rof20004]Voce pode fazer assim:

<input type="text" id="valor1" value="" onkeyup="somarValores(this.value);"/>  
<input type="text" id="valor2" value="" onkeyup="somarValores(this.value);/>  
<input type="text" id="valor3" value="" onkeyup="somarValores(this.value);/>
<input type="text" id="valor4" value="" onkeyup="somarValores(this.value);/>    

<input type="text" id="totalSoma" value=""/> 

<script src='text/javascript">

var total = 0;

function somarValores(valor) {
      total += valor;
      document.getElementById("totalSoma").value = total;
}
</script>

Será que ajuda ?

[/quote]

Não está atualizando o valor quando apago de alguma input

Se você rodar pelo teste que fiz vai ver que funciona ao vivo: http://jsfiddle.net/N2WcM/5/. Logicamente deverá adaptar seu codigo para usar esta solucao.