Ir para conteúdo

Arquivado

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

Deboracgs

select dinamico com soma automatica

Recommended Posts

Oi gente, então, fiz um select dinâmico e um total dinâmico, só que não está funcionando corretamente, eu precisava que quando a pessoa selecionasse o pista ou camarote, aparecesse o valor unitario, até ai tudo bem. Só que quando coloco quantidade de ingressos, ele não soma. Poderiam me ajudar? Segue código

<html> 
 <body> 
<script>
    function mudarValor(e) {
        document.getElementById('campo2').value = (e.value)
    }
</script>
<script type="text/javascript">
			$(document).ready(function(){
				//Quando o valor do campo mudar...
				$('.calc').change(function(){
					var quantidade = parseFloat($('#quantidade').val());
					var preco = parseFloat($('#campo1').val());
					
					
					var total = quantidade * preco ; 
				
				
					
					$('#total').val(total);
				});
			});
		</script>

 <form name="form" action="#" method="post">
 <select name="campo1" size=1 value="2" onchange="mudarValor(this)"> 
 <option value="">Selecione...</option>
<option value="R$ 25,00">Pista</option>
<option value="R$ 40,00">Camarote</option>
</select>

<input type="text" id="campo2" disabled="disabled" />
<br/>
Quantidade de ingressos<input name="quantidade" value="1" id="quantidade" type="text" />
Total a pagar<input name="total"  id="total" type="text" disabled="disabled"/>

 </form>
 </body> 
 </html>
 
<!--- http://www.vivaolinux.com.br/artigo/Select-dinamico-com-PHP-Javascript-e-MySQL/?pagina=3 ->

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tenho esse que peguei da Net, veja se ajuda com algumas alterações.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
 <script type="text/javascript">
  $(document).ready(function(){
   //Quando o valor do campo mudar...
  $('.calc').change(function(){
  var meals_num = parseFloat($('#meals_num').val()) || 0.0;
  var meal_val = parseFloat($('#meal_val').val()) || 0.0;
  var waiter_tip = parseFloat($('#waiter_tip').val()) || 0.0;
					
  //O total é o número de refeições x o valor da refeição
  var total = meals_num * meal_val;
  //Além disso, ainda tempos a gorjeta para o garçom
  total += total * waiter_tip;
					
  $('#total_val').val(total);
 });
 });
 </script>

<form id="sum-form" method="post" action="">
 <fieldset>
 <legend>Valores</legend>
 <label for="meals_num">Nº de Refeições</label>
 <input type="text" id="meals_num" name="meals_num"/>

 <label for="meal_val">Valor da Refeição</label>
 <input type="text" id="meal_val" name="meals_val"/>

 <label for="waiter_tip">Gorjeta Garçom</label>
 <select id="waiter_tip" name="waiter_tip">
 <option value="0.1">10%</option>
 <option value="0.15">15%</option>
 <option value="0.18">18%</option>
 </select>

 <label for="total_val">Total</label>
 <input type="text" id="total_val" name="total_val" readonly="readonly"/>

 <button type="submit">Enviar</button>
 </fieldset>
 </form>

Agora é só fazer as alterações para as suas necessidades.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Os valores deles sem esta certos, notei que no primeiro script não tinha type="text/javascript" acho que deve ser isso bote teste.

 

A partir do HTML5 é opcional o uso do type="text/javascript" (w3schools), além de outras tags que ficam muito mais "limpas" assim dizendo, recomendo a leitura de um artigo no devmedia. Outra dica (com alguns artigos em inglês): developer.mozilla.org.

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.