3

inserir a descrição da imagem aqui

Como não tenho muito conhecimento de javascript preciso de uma ajudinha de vocês.

Esse meu script é uma simples calculadora mais não estou conseguindo fazer algumas funções funcionar. Eu só preciso que

  • Ao escolher um Campo Radio ele mostrar o valor do campo
  • E logo em seguida fazer a multiplicação do dropdwon n sacolas x valor do campo radio escolhido e somar ao calculo final

A baixo segue o script funcionando se possível preciso de uma solução que mexa o menos possível no código

$(document).ready(function() {
  $(".valores1").change(function() {
    var total = 50;
    total += $('input[class="valores1"]:checked').get().reduce(function(tot, el) {
      return tot + Number(el.value);
    }, 0);
        
    var f = document.getElementById("valores7");    
    var itemSelecionadof = f.value;
         
    var e = document.getElementById("valores2");
    var itemSelecionado = e.options[e.selectedIndex].value;
    var primeiroDigito = (itemSelecionado.substring(0,1));
    total=total+(primeiroDigito*100);
    ///////////////////////////////////////////////////////////////
    var d = document.getElementById("valores3");
    var itemSelecionado3 = d.options[d.selectedIndex].value;
    var primeiroDigito3 = (itemSelecionado3.substring(0,1));
    total=total+(primeiroDigito3*itemSelecionadof);
    //////////////////////////////////////////////////////////////
    var g = document.getElementById("valores4");
    var itemSelecionado4 = g.options[g.selectedIndex].value;
    
    if (g.value == 1) {
     d.value = 0;
     g.value = 0;
     f.value = 0
     total = total-(primeiroDigito3*100);
     $('#total1').val(total);
     }
    //////////////////////////////////////////////////////////////
    
    
    
    //aqui pega primeiro digito
    
    $('#total1').val(total.toFixed(2));     
  });  
});
<form>
PERA:<input type="checkbox" class="valores1"  name="direcao" value="10" id="option_1"  />
Banana:<input type="checkbox" class="valores1" name="bilingue" value="15" id="option_1"  /><br />

<select id="valores2"   class="valores1 form-control" name="tipo carnes" >
    <option value="0">Carnes</option>
    <option value="1">1 Picanha</option>
    <option value="2">2 Picanhas</option>
    <option value="3">3 Picanhas</option>
    
</select>  <br /><br />

Sacola Pequena<input type="radio" class="valores1" name="normal" value="100" id="valores7" />
Sacola Grande<input type="radio" class="valores1" name="normal"    value="150" id="valores7"/>
&nbsp;&nbsp;====>Mostrar Valor da sacola<input type="text" size="5"  readonly="" id="valorsacola" name="valor da sacola"  value="0.00" style="background-color: transparent; border-color: transparent; font-weight: bold; font-size: 18px; color: green; "    />            
<br />
<select id="valores3"   class="valores1 form-control" name="nsacolas" >
    <option value="0">N de Sacola</option>
    <option value="1">x1</option>
    <option value="2">x2</option>
    <option value="3">x3</option>
    
</select>  
<br /><hr />

Zerar Calculo da Sacola
<select id="valores4"   class="valores1 form-control" name="cadeirinha2" >
    <option value="0"></option>
    <option value="1">zerar</option>
    <option value="2">x2</option>    
</select>  
<br /><br /><br />

Consuma&ccedil;&atilde;o Minima
<input type="text" size="5"  readonly="" name="valor" id="total1" value="50.00" style="background-color: transparent; border-color: transparent; font-weight: bold; font-size: 18px; color: green; "    />            
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

2
  • è que esse script é so de demostração depois eu pego a logica e passo para o meu sistema. coloquei ele só como exemplo Commented 29/12/2017 às 15:37
  • Esse valor inicial de 50 é fixo? Vamos supor que o cara escolha sacola de 100 x 2, seria o total 250?
    – Sam
    Commented 29/12/2017 às 18:52

2 Respostas 2

1

Coloque um event handler na função $(".valores1").change(function para detectar quando um radio for clicado. Coloquei evt, desta forma:

                                ↓
$(".valores1").change(function(evt) {

Alterei o código para torná-lo mais simples usando jQuery:

$(document).ready(function() {
  $(".valores1").change(function(evt) {
     
   var total = 50;
   var frutas_val = 0;
   var sacolas = 0;

   if(evt.target.id == "valores4"){
      if($(this).val() == 1){
         $('#valores3, #valores4').prop('selectedIndex',0);
         $('form input[type="radio"]').prop('checked', false);
         $('#valorsacola').val('0.00');
      }else if($(this).val() == 2){
         alert("x2");
      }
   }
     
   //pego valor das frutas
   var frutas = $('form input[type="checkbox"]:checked');
   for( var x =0; x < frutas.length; x++ ){
      frutas_val += parseInt($(frutas[x]).val());
   }
   !isNaN(frutas_val) ? frutas_val : 0;
   
   //pego qtd de carnes
   var carnes = $('#valores2').val();
   carnes = carnes != 0 ? carnes*100 : 0;
   
   // valor das sacolas
   if(evt.target.type == "radio"){
     $('#valorsacola').val(parseFloat($(this).val()).toFixed(2));
   }

   var radio = $('form input.valores1[type="radio"]:checked').val();
   var vradio = parseFloat(radio);
   if(!isNaN(vradio)){
      var sacolas_qtd = $('#valores3').val();
      // multiplico o valor da sacola pelo número de sacolas escolhidas
      sacolas = vradio * sacolas_qtd;
   }

   total += frutas_val+carnes+sacolas;

   total = total <= 50 ? 50+frutas_val : total;
   $('#total1').val(total.toFixed(2));
     
  });  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
PERA:<input type="checkbox" class="valores1"  name="direcao" value="10" id="option_1"  />
Banana:<input type="checkbox" class="valores1" name="bilingue" value="15" id="option_1"  /><br />

<select id="valores2" class="valores1 form-control" name="tipo carnes" >
    <option value="0">Carnes</option>
    <option value="1">1 Picanha</option>
    <option value="2">2 Picanhas</option>
    <option value="3">3 Picanhas</option>
    
</select>  <br /><br />

Sacola Pequena<input type="radio" class="valores1" name="normal" value="100" id="valores7" />
Sacola Grande<input type="radio" class="valores1" name="normal"    value="150" id="valores7"/>
&nbsp;&nbsp;====>Mostrar Valor da sacola<input type="text" size="5"  readonly="" id="valorsacola" name="valor da sacola"  value="0.00" style="background-color: transparent; border-color: transparent; font-weight: bold; font-size: 18px; color: green; "    />            
<br />
<select id="valores3"   class="valores1 form-control" name="nsacolas" >
    <option value="0">N de Sacola</option>
    <option value="1">x1</option>
    <option value="2">x2</option>
    <option value="3">x3</option>
    
</select>  
<br /><hr />

Zerar Calculo da Sacola
<select id="valores4" class="valores1 form-control" name="cadeirinha2" >
    <option value="0"></option>
    <option value="1">zerar</option>
    <option value="2">x2</option>    
</select>  
<br /><br /><br />

Consuma&ccedil;&atilde;o Minima
<input type="text" size="5"  readonly="" name="valor" id="total1" value="50.00" style="background-color: transparent; border-color: transparent; font-weight: bold; font-size: 18px; color: green; "    />            
</form>

1
  • Perfeito meu Caro Muito Obrigado pela sua ajuda Commented 30/12/2017 às 3:56
0

Ao escolher um campo Radio ele mostra o valor desse campo

Basta colocar a seguinte linha na função abaixo:

$(".valores1").change(function() {
        $('#valorsacola').val($('input[class="valores1"]:checked').val());
});

Assim você pega o valor (atributo value do elemento input) do radio button selecionado e seta esse valor como valor do campo com id #valorsacola.

E logo em seguida fazer a multiplicação do dropdwon n sacolas x valor do campo radio escolhido e somar ao calculo final

Essa parte, a descrição esta conflitante com o que o codigo atualmente faz. Aparentemente já há essa multiplicação.

2
  • Ok estamos chegando la... se voce olhar aqui jsfiddle.net/ocws27Ln vai notar que se clicarmos no radio ele calcula direto na soma, e não deveria ocorre isso só seria calculado na soma quando e valor do radio fosse multiplicado pelo dropdown Commented 29/12/2017 às 18:21
  • sequencia é... escolhe o valor no Radio depois escolhe a quantidade. que multiplica valor do radio escolhido x quantidade Commented 29/12/2017 às 18:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .