Ir para conteúdo

Arquivado

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

Aléx Müller

Somar valores e exibir em input

Por , em Javascript

Recommended Posts

Aléx Müller    0

Aléx Müller
Postado

Bom dia Galera...

Precisando montar um projetinho simples, onde preciso somar os valores conforme o que será selecionado em um formulário (que depois será tratado via php, mas é outra parte daí)

Aqui, preciso exibir uma soma instantânea no input que está no topo do form, conforme o valor de cada item que for selecionado em alguns radio e checkbox.

meu form está assim:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Projeto 01</title>
</head>

<body>
	<form name="fomulario" method="post" action="">
		<label>Valor Total</label><br />
		<input type="text" name="total" readonly="readonly" /><br /><br />
		
		<label>Tamanho</label><br />
		<input type="radio" name="tamanho" value="tamanho1" />Tamanho 1 - R$ 1,00<br />
		<input type="radio" name="tamanho" value="tamanho2" />Tamanho 2 - R$ 2,00<br /><br />
	
		<label>Cor</label><br />
		<input type="radio" name="cor" value="cor1" />Cor 1 - R$ 1,00<br />
		<input type="radio" name="cor" value="cor2" />Cor 2 - R$ 2,00<br /><br />
	
		<label>Gola</label><br />
		<input type="radio" name="gola" value="golav" />Gola V - R$ 1,00<br />
		<input type="radio" name="gola" value="golau" />Gola U - R$ 2,00<br /><br />
	
		<label>Opcional</label><br />
		<input type="checkbox" name="opcional" value="opcional1" />opcional 1 - R$ 1,00<br /><br />
		<input type="checkbox" name="opcional" value="opcional2" />opcional 2 - R$ 2,00<br /><br />
		<input type="checkbox" name="opcional" value="opcional3" />opcional 3 - R$ 3,00<br /><br />
		<input type="checkbox" name="opcional" value="opcional4" />opcional 4 - R$ 4,00<br /><br />
		<input type="checkbox" name="opcional" value="opcional5" />opcional 5 - R$ 5,00<br /><br />
		<input type="checkbox" name="opcional" value="opcional6" />opcional 6 - R$ 6,00<br /><br />
		<input type="checkbox" name="opcional" value="opcional7" />opcional 7 - R$ 7,00<br /><br />
		<input type="checkbox" name="opcional" value="opcional8" />opcional 8 - R$ 8,00<br /><br /><br />
	</form>
</body>
</html>

Pesquisei já um pouco, mas não tenho noção de como posso fazer uma busca precisa para chegar a minha resposta.
Agradeço desde já qualquer ajuda com minha pesquisa ou informações que possam me ajudar a desenvolver isso.

Abraços

Compartilhar este post

Link para o post
Compartilhar em outros sites

L. Henrique    179

L. Henrique
Postado

Alex,

Você pode resgatar um valor de diversas maneiras e a melhor delas é pelo value do input. Se você quiser resgatar pelo text/innerHTML, vai dar um pouquinho mais de trabalho, já que você vai precisar tratar as informações (strlen exemplo) e deixar só o valor registrado, removendo o "opción".

Faz assim: resgata o value com o método value (JS) ou val() (jquery), soma esses valores numa variável ou sei lá e joga esse resultado pro text do input onde deseja exibir.

Se não conseguir entender ou fazer o que citei, volte aqui no post e eu tentarei te ajudar com o código.



Compartilhar este post

Link para o post
Compartilhar em outros sites

Aléx Müller    0

Aléx Müller
Postado

L. Henrique, Obrigado pela contribuição.

Já vi exemplos e até testei aqui em localhost a soma pelo value, onde é atribuído um único name aos checkbox e os values se somam, mas além disso, preciso levar os dados sobre o nome do que se esta incluindo, como no meu exemplo (opcionais1 + R$1,00) e mexendo nos códigos já localizados em pesquisa nenhum surtiu efeito.

Pesquisando encontrei um exemplo perfeito que faz exatamente como eu gostaria :D
mas JS ou jquery não são meu forte :unsure:

neste link tem exatamente o que busco, que é somar (ou subtrair o valor caso o item seja substituido, somando o novo) dos radio's e somar (ou subtrair se desmarcar) dos checkbox, já listando os produtos com o valor
http://opensource.locaweb.com.br/locawebstyle-v1/manual/aplicacoes/soma-valores/

Agradeço luzes e exemplos, Obrigado ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito