Ir para conteúdo

POWERED BY:

Arquivado

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

Rogerio J. Gentil

Soma dinâmica com input radio e text

Por , em Javascript

Recommended Posts

Rogerio J. Gentil    0

Rogerio J. Gentil
Postado

Olá galera.

 

Estou tentando fazer um código que some um pedido (bebida + lanche * qtde_lanche) e conforme o usuário vai escolhendo o valor total é apresentado dinamicamente. Não estou conseguindo fazer com que o valor do input radio seja somado ao do select option.

 

Alguém para ajudar?

 

O código HTML é algo como:

<body onload="document.getElementById('subtotal').innerHTML = 0;">
   <form id="pedidoForm">
            <fieldset id="bebida">
               <legend>Bebidas (Qualquer bebida R$ 5,00)</legend>

               <input type="radio" name="bebida" value="5" onclick="somar();"> Coca-Cola
               <br>
               <input type="radio" name="bebida" value="5" onclick="somar();"> Guaraná Antartica
               <br>
               <input type="radio" name="bebida" value="5" onclick="somar();"> Fanta
               <br>
               <input type="radio" name="bebida" value="5" onclick="somar();"> Suco DellVale
            </fieldset>

            <fieldset id="lanche">
               <legend>Lanches (Qualquer lanche R$ 15,00)</legend>

               <select name="lanche">
                  <option value="15">Fast-Food Burger (Hambúrger, maionese, mussarela e tomate)</option>
                  <option value="15">Fast-Food Egg (Hambúrger, ovo, maionese, mussarela e tomate)</option>
                  <option value="15">Fast-Food Burger (Hambúrger, maionese, mussarela e tomate)</option>
               </select>

               Qtd. <input type="text" name="qtde_lanche" size="10" maxlength="3" onchange="somar();">
            </fieldset>

            <fieldset id="total">
               Total da compra Total: R$ <span id="subtotal"></span>
            </fieldset>
           
            <input type="button" value="Enviar">
         </form>
</body>

Javascript:

 

var somar = function() {
            if (pedidoForm.qtde_lanche.value === null) {
               pedidoForm.qtde_lanche.value = 0;
            }
            
            var subtotal_bebida = 0;
            
            for (var i = 0; pedidoForm.bebida.length; i++) {
               if (pedidoForm.bebida[i].checked) {
                  subtotal_bebida = 5;
               }
            }
                        
            var subtotal_lanches = pedidoForm.qtde_lanche.value * 15;

            document.getElementById('subtotal').innerHTML = subtotal_bebida + subtotal_lanches;
         };

Vlw!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Dough Lda    0

Dough Lda
Postado 

<script src="jquery.js"></script>

<script>
$(document).ready(function() {

$(".soma").bind("blur change check", function() {
total = 0;

$("input[type='checkbox']:checked,input[type='radio']:checked").each(function() {
total+=parseFloat($(this).val());
});

$(".soma").each(function() {
if( $(this).attr('type')=='text' || $(this).is('select') ) {
total+=parseFloat($(this).val());
}
});

$("#input_resultado").val(total.toFixed(2));
$("#resultado").html(total.toFixed(2));
});

});
</script>




<body>
   <form id="pedidoForm">
            <fieldset id="bebida">
               <legend>Bebidas (Qualquer bebida R$ 5,00)</legend>

               <input type="checkbox" name="" class="soma" value="5.00"> Coca-Cola
               <br>
               <input type="checkbox" name="" class="soma" value="5.00"> Guaraná Antartica
               <br>
               <input type="checkbox" name="" class="soma" value="5.00"> Fanta
               <br>
               <input type="checkbox" name="" class="soma" value="5.00" > Suco DellVale
            </fieldset>


            <fieldset id="lanche">
               <legend>Lanches (Qualquer lanche R$ 15,00)</legend>

            
                 
                  <input type="checkbox" name="" class="soma" value="15.00">Fast-Food Burger (Hamburger, maionese, mussarela e tomate)<br>

                  <input type="checkbox" name="" class="soma" value="15.00">Fast-Food Egg (Hamburger, ovo, maionese, mussarela e tomate)<br>
                  <input type="checkbox" name="" class="soma" value="15.00">Fast-Food Burger (Hamburger, maionese, mussarela e tomate)
            

              
            </fieldset>

            <fieldset id="lanche">
               <legend>Lanches (Qualquer lanche R$ 15,00)</legend>

               <select class="soma">
                  <option value="0">Escolha o lanche</option>
                  <option value="15.00">Fast-Food Burger (Hamburger, maionese, mussarela e tomate)</option>
                  <option value="15.00">Fast-Food Egg (Hamburger, ovo, maionese, mussarela e tomate)</option>
                  <option value="15.00">Fast-Food Burger (Hamburger, maionese, mussarela e tomate)</option>
               </select>

              
            </fieldset>

            <fieldset id="total">
               Total da compra Total: R$ <input type="text" id="input_resultado" name="" value="0">
            </fieldset>
           
            <input type="button" value="Enviar">
         </form>
</body>

Não use campos rádio nem select pois se alguém quiser escolher mais de um produto , não será possível.

É necessário baixar o jquery no site: http://jquery.com/download/

Baixa qualquer um e renomeia pra jquery.js

 

Antes tarde do que nunca.

 

Se mesmo assim vc quiser rádio + select:

 

<script src="jquery.js"></script>

<script>
$(document).ready(function() {

$(".soma").bind("blur change check", function() {
total = 0;

$("input[type='checkbox']:checked,input[type='radio']:checked").each(function() {
total+=parseFloat($(this).val());
});

$(".soma").each(function() {
if( $(this).attr('type')=='text' || $(this).is('select') ) {
total+=parseFloat($(this).val());
}
});

$("#input_resultado").val(total.toFixed(2));
$("#resultado").html(total.toFixed(2));
});

});
</script>

<form>
<select class="soma">
<option value="0">selecione</option>
<option value="10.00">10.00</option>
<option value="20.00">20.00</option>
<option value="30.00">30.00</option>
</select>
<br />
50 <input type="checkbox" name="" class="soma" value="50">
40 <input type="checkbox" name="" class="soma" value="50">
<br />
10 <input type="radio" name="radio1" class="soma" value="10">
<br />
20 <input type="radio" name="radio1" class="soma" value="20">
<br />
resultado <input type="text" id="input_resultado" name="" value="0">
</form>

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