Multiplicação e Soma de inputs

Cesão · Setembro 18, 2008

Olá amigos. Tenho a seguinte situação HTML:

<li>
<p>Nome do produto 1</p>
<input type="hidden" name="preco_1" id="preco_1" value="1,25">
<input type="text" name="quantidade_1" id="quantidade_1" value="0">
</li>
<li>
<p>Nome do produto 2</p>
<input type="hidden" name="preco_2" id="preco_2" value="2,50">
<input type="text" name="quantidade_2" id="quantidade_2" value="0">
</li>
<li>
<p>Nome do produto 3</p>
<input type="hidden" name="preco_3" id="preco_3" value="1,50">
<input type="text" name="quantidade_3" id="quantidade_3" value="0">
</li>
<input type="text" name="valor_final" id="valor_final" value="R$ 0,00" disabled="disabled">

lembrando que a lista acima, na verdade é dinâmica, ou seja, o número que coloquei é o ID do registro na verdade.

Gostaria que, cada vez que eu alterasse a quantidade de algum produto (e ela fosse diferente de zero), ele pegasse essa quantidade, multiplicasse com o valor do ID (produto) correspondente, somasse com os outros resultados e mostrasse no input valor_final.

Alguém pode me ajudar?

Carutcho · Setembro 19, 2008

é possivel sim,

Se você tem o numero total de linhas, você pode fazer um "for" pegando de 1 até o ultimo registro e montando os id tb dinamicamente e depois calcular.

Absss

Cesão · Setembro 19, 2008

um for? mas isso não é ASP? existe for para javascript tbm?

e não, eu não tenho o número total de linhas, pois é dinâmico. Se o cara aumentar o número de produtos, o número de linhas muda, como eu disse acima.

Agora não entendi nada do que você postou. fazer um "for" pegando de 1 até o ultimo registro e montando os id tb dinamicamente e depois calcular? Como seria feito isso na estrutura acima?

Preciso de uma lógica mais consistente. Algo que, pelo menos, eu possa imaginar aqui.

Alguém?

William Bruno · Setembro 20, 2008

A idéia é mais ou menos essa aqui cara..

<head>
<script type="text/javascript">
function calcula(){
	var valorFinal = document.getElementById('valor_final');	

	for(i=1;i<=3;i++){
				
		// criando strings para o loop
		id_precos = 'preco_' + i;
		id_quantidade = 'quantidade_' + i;

		// criando variáveis para os objetos
		var precos = document.getElementById(id_precos);
		var quantidades = document.getElementById(id_quantidade);

		//alert(id_precos +' custa '+ precos.value);
		//alert(id_quantidade +' está com  '+ quantidades.value);
		//alert(valor_final.value);
		
		valorFinal.value = parseFloat(valorFinal.value) + parseFloat(precos.value)*parseFloat(quantidades.value);
	}


}

</script>
<style>
li span {
	display: block;	
}
</style>
</head>
<body>

<li>
	<span>Nome do produto 1</span>
	<input type="hidden" name="preco_1" id="preco_1" value="1.25" />
	<input type="text" name="quantidade_1" id="quantidade_1" value="0" />
</li>
<li>
	<span>Nome do produto 2</span>
	<input type="hidden" name="preco_2" id="preco_2" value="2.50" />
	<input type="text" name="quantidade_2" id="quantidade_2" value="0" />
</li>
<li>
	<span>Nome do produto 3</span>
	<input type="hidden" name="preco_3" id="preco_3" value="1.50" />
	<input type="text" name="quantidade_3" id="quantidade_3" value="0" />
</li>
	<input type="text" name="valor_final" id="valor_final" value="0.00" disabled="disabled" />

	<input type="button" value="Aqui" onclick="calcula()" />

Eu troquei os <p> por <span>, pois veja que LI é um elemento inline, então você não pode em xHTML segundo os padrões, colocar um nivel de bloco como o <p> dentro do <li>.

O loop que fiz está varrendo somente esses 3, mas ai você adequa vindo já do server side o parâmetro de quantidade de inputs.

você ainda vai precisar fazer um tratamento, para não resomar os valores já computados.. mas o inicio do script com o laço está ai.

Força ae.

Carutcho · Setembro 20, 2008

entendeu agora o pq do "for" ?

è o q o nosso amigo aee em cima fez ^^

abss

Cesão · Setembro 22, 2008

Olá amigos,

Obrigado pelas respostas. Eu acho que entendi mais ou menos a idéia. O único problema é que os IDs dos inputs não são sequenciais, por isso eu acho que as condições do for não vão funcionar. Daí eu fiz assim:

function calcula(){
	var valorFinal = document.getElementById('valor_total');
	
	<%
	Set RS = Server.CreateObject("ADODB.RecordSet")
	SQL = "SELECT ID_PRODUTO FROM TBL_PRODUTOS"
	RS.Open SQL, Conn
	%>
	
	<%do while not RS.EOF%>
		
		// criando strings para o loop
		id_precos = 'valorPreco' + <%=RS("ID_PRODUTO")%>;
		id_quantidade = 'prod' + <%=RS("ID_PRODUTO")%>;
		
		// criando variáveis para os objetos
		var precos = document.getElementById(id_precos);
		var quantidades = document.getElementById(id_quantidade);
		
		if (quantidades.value!=0){
			var num_preco = new Number(precos.value);
			var num_quantidade = new Number(quantidades.value);
			var resultado = new Number(num_preco * num_quantidade);
		}
	<%RS.movenext : loop%>
	valorFinal.value = resultado.toFixed(2);
}

O único problema é que desta forma ele mostra apenas o resultado da conta do primeiro produto. Daí eu teria que criar uma variável para ir somando todos os resultados, mas não deu certo. No final eu tinha feito assim:

var total = new Number(total + resultado);
valorFinal.value = 'R$ ' + total.toFixed(2);

Mas daí ele mostra o famoso NaN como total.

Alguém sabe como fazer pra ele somar todos os resultados?

Carutcho · Setembro 22, 2008

Olá Cesão beleza ?

tem como sim cara, da para fazer de 2 maneiras diferentes,

Eu fiz do modo mais rapido um exemplo aqui para te ajudar .

É só aprimorar ele, eu fiz com substring e apenas verificando só um tipo de campo, mas da para va aplicar no outro tb .

segue o código para você testar

<html>
<head>
	<script>
		window.onload = function ()
		{
			var inputs = document.getElementsByTagName('input');
			for (i=0;i<inputs.length;i++)
			{
				if (inputs[i].id.substring(0,5)=="input")
				{
					alert(inputs[i].id);			
				}
			}
		}
	</script>
</head>
<body>
<input id="input1" type="text" />
<input id="input2" type="text" />
<input id="input3" type="text" />
<input id="input5" type="text" />
<input id="input16" type="text" />
</body>
</html>

Da outra maneira de validar campo de senha pode ser feito com expressão regular, é mais elegante mas tem q dar uma estudadinha pra montar o exemplo.

Com relação a fazer o "for" me desculpe até por meu modo de falar, recebi uma critica aqui no forum e eu acho q criticas saum sempre bem vindas por mais que negativas, então vou pedir desculpas e vo procurar ser mais claro quando tentar ajudar alguém, aqui no forum..

absss

RogerioRock · Setembro 22, 2008

Amigo coloca um id na sua lista e faz assim, que eu acho que resolve

         function SomaLista(prLista,prResutltado){
		var valor =0.0;
		var qt =0;
		var acumulador=0.0;
		var Lista =document.getElementById(prLista).getElementsByTagName("li");
	    for (var i=0;i<Lista.length;i++){
			for (var j=0;j<Lista[i].childNodes.length;j++){
				
				if(Lista[i].childNodes[j].type=="hidden"){
					valor = Lista[i].childNodes[j].value;
				}
				if(Lista[i].childNodes[j].type=="text"){
					qt=Lista[i].childNodes[j].value;
				}
			}
			
			if (qt!=0){ 
				acumulador+=valor*qt;
			}
		} 
		document.getElementById(prResutltado).value=acumulador;
	}

A lista fica assim

         <ul id="lista">
 	<li>
    	  <input type="hidden" name="preco_1" id="preco_1" value="1.25" />
    	  <input type="text" name="qt_1" id="qt_1" value="0" onchange="SomaLista('lista','valor_final')" />
                </li>
 	<li>
    	 <input type="hidden" name="preco_2" id="preco_2" value="1.25" />
    	 <input type="text" name="qt_2" id="qt_2" value="0" onchange="SomaLista('lista','valor_final')" />
                </li>
 	<li>
    	<input type="hidden" name="preco_3" id="preco_3" value="1.25" />
    	<input type="text" name="qt_3" id="qt_3" value="0" onchange="SomaLista('lista','valor_final')" />
                </li>
	<li>
    	  <input type="hidden" name="preco_4" id="preco_4" value="1.25"  />
    	  <input type="text" name="qt_4" id="qt_4" value="0" onchange="SomaLista('lista','valor_final')" />
               </li>
            </ul>
   	<input type="text" name="valor_final" id="valor_final" value="0" />

Acho que com alguma adptação dar pra você fazer o que quer

Carutcho · Setembro 22, 2008

bugou aqui e postei 2 vezes sem querer.. moderador por favor pode apagar esse post ???

absss

Cesão · Setembro 22, 2008

Carutcho, valeu mais uma vez, mas acho que não entendeu bem o que preciso. Se eu fizer do jeito que você me mandou, vou apenas somar tudo o que encontrar em todos meus inputs, certo?

Eu editei meu último post aqui. Veja ali e cima como desenvolvi a minha função. Ela está funcionando, mas o único problema está sendo somar os resultados finais e mostrar no valor_final.

Mas dê uma olhada lá e veja a lógica. Veja se pode me ajudar com outra lógica ou melhorando a minha.

Carutcho · Setembro 22, 2008

Fala aee cara beleza?

Seguinte, eu reparei que você juntou 2 coisas q não é legal fazer.

você misturou códigos asp com códigos javascript e aee que está o ponto do problema.

Uma linguagem funciona no server side(asp) e o outro no cliente side(javascript), ou seja um do lado do servidor e outro do lado do cliente.

Isso da problema na hr de gerar o codigo do lado do cliente, eu não sei pra que você vai usar o código ou onde vai usar, pq tipo, as vezes você quer usar o código para mostrar o resultado ou as vezes você quer fazer o código dinamicamente, assim que o usuário digitar um valor e dar tab.

Então fiz mais um exemplo aqui, só q partindo do ponto que você carrega os valores dos campos assim que carrega a pagina e ja aparece o total. Mas isso é apenas um ponto, você pode simplesmente utilizar essa função em um evento do tipo "onblur" ou quem sabe em um "onsubmit" ou quem sabe colocar um botão "calcular" executando a função, depende mt da sua necessidade.

O conselho que dou é você separar sempre seus códigos de client side e de server side, fica mais limpo e mais legal e mais fácil de dar manutenção.

Seguinte, aqui eu vou colocar um exemplo pra você testar do mesmo esquema, jogando em um arquivo html e depois adaptando pro q você precisa.

<html>
<head></head>

<script>
window.onload = function (){

	//informo qual campo é o de valor total	
	var valorFinal = document.getElementById('valor_total');
	var total = 0;	

	//pego todos os inputs do formulário
	var inputs = document.getElementsByTagName('input');		
	for (i=0;i<inputs.length;i++)
	{
		//pegando o prefixo do id e comparando para ver se é prod.
		if (inputs[i].id.substring(0,4)=="prod")
		{
			//aqui pego o valor do input, para saber se ele é o "1, 2 ,19, ..." 
			var num = inputs[i].id.substring(4);
			//aqui pego o equivalente no valor
			var valor = document.getElementById("valPreco"+num);
			//multiplico o resultado e jogo dentro de uma variável
			if ((inputs[i].value!=0)&&(inputs[i].value!=null))
			{
				//para não multiplocar por 0
				total += new Number(inputs[i].value) * new Number(valor.value);
			}
			else
			{
				total += new Number(valor.value);
			}			
		}
	}	
	valorFinal.value = total.toFixed(2);
}

</script>
<body>	   
	<input type="text" id="prod1" value="1" >	
	<input type="text" id="valPreco1" value="2" >		
	<br>
	<input type="text" id="prod2" value="1" >	
	<input type="text" id="valPreco2" value="3" >		
	<br>
	<input type="text" id="prod3" value="1" >	
	<input type="text" id="valPreco3" value="4" >	
	<br>
	<input type="text" id="prod31" value="1" >	
	<input type="text" id="valPreco31" value="4" >	
	<br>
	<input type="text" id="valor_total" >
</body>
</html>

No caso do HTML com asp você geraria o seu formulário assim:


<html>
<head></head>
<body>
<%
	Set RS = Server.CreateObject("ADODB.RecordSet")
	SQL = "SELECT ID_PRODUTO FROM TBL_PRODUTOS"
	RS.Open SQL, Conn
	%>
	
	<%do while not RS.EOF%>
	 
	<input type="text" id="valPreco<%=RS("ID_PRODUTO")%>">
	<input type="text" id="prod<%=RS("ID_PRODUTO")%>">	
	<br>
   <%RS.movenext : loop%>
</body>
</html>

Não sei se essa era realmente a sua dúvida, mas espero ter ajudado.

Absss

Cesão · Setembro 22, 2008

Falai Carutcho! Entendi o que você quis montar. Acho que está certinho com o que eu quero. Só nai sei pq, mas antes mesmo se eu colocar qualquer quantidade em um produto meu, ele ja começa o total com 205.24. Não sei pq. Eu coloquei uns alerts p ver o que tava acontecendo no total... coloquei um alert aqui:

if ((inputs[i].value!=0)&&(inputs[i].value!=null))
			{
				//para não multiplocar por 0
				total += new Number(inputs[i].value) * new Number(valor.value);
				alert(total);
			}
			else
			{
				total += new Number(valor.value);
			}

Daí quando eu rodo, ele mostra o total da soma de um produto.. dai depois ele mostra a soma de outro produto MAIS a soma do primeiro...

entao vamos dizer q no primeiro input eu coloquei 2 produtos de valor 2.00. dai o alert mostra 4.00.. se eu colocar 2 no primeiro (2.00) e 3 no segundo (1.00) ele mostra o primeiro alert com 4.00 e o segundo com 7.00 (soma do primeiro total com segundo total). Está certo isso?

E pq será que ele está começando com 205.24? Ele já começa com o total de tudo, como se eu tivesse pedido 1 unidade de cada produto (que daria 205.24).

Carutcho · Setembro 22, 2008

eu fiz a logica mais ou menos da seguinte forma:

(qtd1 + valor1 ) + (qtd2 + valor2 ) + (qtdN + valorN ) = valor total.

Pensei que você queria o total geral da coisa, se você quiser um valor por linha você pode fazer o seguinte, pode criar mais uma variável e essa recebe o valor do produto e depois soma tudo para obter o valor total;

no caso (qtd1+valor1) = total1, (qtd2+valor2) = total2, (qtdN+valorN) = totalN

e o total geral seria : total1+total2+totalN = total

ficaria mais ou menos assim aquela parte

//tem q criar um input com o nome de valorLinha+id_do_produto
var totLinha = document.getElementById("valorLinha"+num);

if ((inputs[i].value!=0)&&(inputs[i].value!=null))
			{
				//para não multiplocar por 0
				totLinha.value = new Number(inputs[i].value) * new Number(valor.value);				
				total += totLinha.value;				
			}
			else
			{
				totLinha.value = new Number(valor.value);			 
				total += totLinha.value;
			}
			alert(totLinha+ ' <- total da linha - '+total+' <-- total geral');

Com relação de iniciar com 205.24, provavelmente deve ter algum campo que ele ta pegando que tenha o mesmo nome do padrão dos id's q você colocou no input.

Testa aee depois posta aee pra gente ver rapaz...

absssss

Cesão · Setembro 22, 2008

Fala Carutcho, na verdade eu quero mesmo o valor total da conta, mas é que como na função que você tinha me passado ele estava somando tbm até os que tinham quantidade 0, ele dava o valor total de tudo, como se eu tivesse colocado a quantidade 1 em todos os produtos.

Daí tirei o ELSE da função, e ele soma apenas os que possuem valor diferente de 0 e ficou assim:

function calcula(){

	//informo qual campo é o de valor total	
	var valorFinal = document.getElementById('valor_total');
	var total = 0;  
	//pego todos os inputs do formulário
	var inputs = document.getElementsByTagName('input');		
	for (i=0;i<inputs.length;i++){
		
		//pegando o prefixo do id e comparando para ver se é prod.
		if (inputs[i].id.substring(0,4)=="prod"){
			
			//aqui pego o valor do input, para saber se ele é o "1, 2 ,19, ..."
			var num = inputs[i].id.substring(4);
			//aqui pego o equivalente no valor
			var valor = document.getElementById("valorPreco"+num);
			//multiplico o resultado e jogo dentro de uma variável
			
			if ((inputs[i].value!=0)&&(inputs[i].value!=null)){
				//para não multiplocar por 0
				total += new Number(inputs[i].value) * new Number(valor.value);
			}
		}
	}	
	valorFinal.value = total.toFixed(2);
}

Agora ele faz a soma certinho, pegando a quantidade (se for diferente de 0) de cada produto, multiplica pelo valor desse produto e faz a soma geral.

Obrigado pela dedicação e pela ajuda Carutcho! Coloquei a função sendo chamada por onBlur em casa input de quantidade, daí ele já vai somando quando o usuário muda a quantidade do produto.

Carutcho · Setembro 22, 2008

isso mesmo :D

grande garotooooooooo http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

Estamos ae pro q precisar..

abssss

Arquivado

Multiplicação e Soma de inputs

Recommended Posts

Cesão 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carutcho 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Cesão 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carutcho 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Cesão 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carutcho 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

RogerioRock 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carutcho 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Cesão 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carutcho 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Cesão 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carutcho 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Cesão 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carutcho 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante