Sum optin: how to do?

Asked

Viewed 42 times

1

$( ".form-control" ).blur(function(){
    calcular();
});

function calcular() {
    var soma = 0;
    $( ".form-control").each(function(indice, item){
        var valor = parseFloat($(item).val());
        console.log(valor);
        if (!isNaN(valor)) {
            soma += valor;
        }
    });
    $("#resultado").val(soma);
}

<!DOCTYPE html>



        <title>ORÇAMENTO - JEFOTOGRAFIA E VÍDEO</title>
        <!-- META NAME COMEÇO-->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <!-- META NAME FINAL -->

        <!-- CSS COMEÇO-->
    <link href="/css/style.css" type="text/css" rel="stylesheet" /><!-- chamar css do site -->
    <link rel="stylesheet" href="responsivo/css/bootstrap.css"><!-- chamar css do bootstrap -->
        <!-- CSS FIM-->

        <!-- JAVASCRIPTS COMEÇO-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script><!-- chamar js do jquery -->
    <script src="responsivo/js/bootstrap.js"></script><!-- chamar js do bootstrap -->
        <!-- JAVASCRIPTS FINAL -->

</head>
<body style="background: #09f;">

<div class="tudo"><!-- Abrir DIV tudo -->

    <div class="btn-group">
        <label class="btn btn-primary">
    <button type="button" class="btn btn-primary"><a style="color: #fff;font-weight: bold;" href="http://www.jefotografiaevideo.com.br" target="_top">Home</a></button>
        </label>
        <label class="btn btn-primary">
    <button type="button" class="btn btn-primary"><a style="color: #fff;font-weight: bold;" href="#" target="_top">Orçamentos</a></button>
        </label>
        <label class="btn btn-primary">
    <button type="button" class="btn btn-primary"><a style="color: #fff;font-weight: bold;" href="#" target="_top">Parceiros</a></button>
        </label>
        <label class="btn btn-primary">
    <button type="button" class="btn btn-primary"><a style="color: #fff;font-weight: bold;" href="#" target="_top">Contato</a></button>
        </label>
    </div>

<div class="orcamento"><!-- Abrir DIV orcamento -->

    <h4 style="text-align: center;">ORÇAMENTO PARA COBERTURA DE CASAMENTO</h4>
    <div class="alert alert-success" role="alert">

    <strong>Olá! Tudo bem?</strong> O que você deseja acrescentar em seu casamento? </a></div>

     <label for="gender1" class="badge badge-default">DESEJA ACRESCENTAR ENSAIO PRÉ-CASAMENTO?</label>
        <select class="form-control" onChange="calcular()">
         <option>Escolher opções</option>
          <option value="100">10 fotos</option>
          <option value="100">20 fotos</option>
          <option value="0">Não</option>
        </select>          


        <label for="gender1" class="badge badge-default">DESEJA ACRESCENTAR O DIA DA NOIVA?</label>
        <select class="form-control selcls" onChange="calcular()">
         <option>Escolher opções</option>
          <option value="100">Sim (10 fotos)</option>
          <option value="0">Não</option>
        </select>          



        <label for="gender1" class="badge badge-default">DESEJA ACRESCENTAR O DIA DO NOIVO?</label>
        <select class="form-control" onChange="calcular()">
         <option>Escolher opções</option>
          <option value="100">Sim (10 fotos)</option>
          <option value="0">Não</option>
        </select>          



        <label for="gender1" class="badge badge-default">DESEJA ACRESCENTAR A COBERTURA FOTOGRÁFICA DA CERIMONIA?</label>
        <select class="form-control" onChange="calcular()">
         <option>Escolher opções</option>
          <option value="100">Sim</option>
          <option value="0">Não</option>
        </select>          


        <label for="gender1" class="badge badge-default">DESEJA ACRESCENTAR ENSAIO PÓS-CASAMENTO?</label>
        <select class="form-control" onChange="calcular()">
         <option>Escolher opções</option>
           <option value="100">Sim (10 fotos)</option>
          <option value="0">Não</option>
        </select>          

        <label for="gender1" class="badge badge-default">DESEJA ACRESCENTAR A COBERTURA FOTOGRÁFICA DA RECEPÇÃO? (PÓS CERIMONIA)</label>
        <select class="form-control" onChange="calcular()">
         <option>Escolher opções</option>
          <option value="100">Sim</option>
          <option value="0">Não</option>
        </select>          


        <label for="gender1" class="badge badge-default">DESEJA ACRESCENTAR CLIPE EM VÍDEO?</label>
        <select class="form-control" onChange="calcular()">
         <option>Escolher opções</option>
          <option value="100">05 minutos de vídeo</option>
          <option value="100">10 minutos de vídeo</option>
          <option value="100">20 minutos de vídeo</option>
          <option value="0">Não</option>
        </select>          




        <label for="gender1" class="badge badge-default">DESEJA ACRESCENTAR ÁLBUM FOTOGRÁFICO?</label>
        <select class="form-control" onChange="calcular()">
         <option>Escolher opções</option>
          <option value="100">Álbum 25x25cm (fechado)</option>
          <option value="100">Álbum 30x40cm (fechado)</option>
          <option value="0">Não</option>
        </select>          



        <label for="gender1" class="badge badge-default">DESEJA ACRESCENTAR MÍDIA REMOVÍVEL?</label>
        <select class="form-control" onChange="calcular()">
         <option>Escolher opções</option>
          <option value="100">Pen driver</option>
          <option value="#">Já tenho a mídia removível</option>
        </select>          


<input class="form-control" readonly="readonly" onFocus="valor()" id="resultado" value="0.0">

</div><!-- fechar DIV orcamento -->




<center>
<div class="btn-group" data-toggle="buttons" style="margin-top: 3px; fonte-size: 10px; width: auto;" >
  <label class="btn btn-primary active">
   <a class="btn btn-primary" value="inprimir" onclick="window.print()" role="button" target="_blank">Salvar orçamento em PDF</a>
  </label>
  <label class="btn btn-primary">
   <a class="btn btn-primary" href="#" role="button" target="_blank">Enviar PDF</a>
  </label>
  </center>

    </div><!-- Fechar DIV container-2 -->

    </div><!-- Fechar DIV tudo -->
</body>
</html>

I’m having a huge difficulty deploying and finalizing a one-page code that I’m creating. I’m just a beginner in the area. Can someone help me? Code below. Thank you!

function somar(){

        var result = $("option:checked");
        var total  = 0;

        for (var i=0 ; i<result.length; i++)
        {
            total = total + parseFloat(result[i].value);
        }

        $("#result").val(total.toFixed(2));
        }

        somar();
        $(":option").click(somar);

<!DOCTYPE html>

<html>
<head>
        <title>ORÇAMENTO - JEFOTOGRAFIA E VÍDEO</title>
        <!-- META NAME COMEÇO-->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <!-- META NAME FINAL -->

        <!-- CSS COMEÇO-->
    <link href="orcamento/css/style.css" type="text/css" rel="stylesheet" /><!-- chamar css do site -->
    <link rel="stylesheet" href="responsivo/css/bootstrap.css"><!-- chamar css do bootstrap -->
        <!-- CSS FIM-->

        <!-- JAVASCRIPTS COMEÇO-->
    <script src="js/jef.js" type="text/javascript"></script><!-- chamar js do site -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script><!-- chamar js do jquery -->
    <script src="responsivo/js/bootstrap.js"></script><!-- chamar js do bootstrap -->
        <!-- JAVASCRIPTS FINAL -->

</head>
<body style="background: #09f;">

<div class="tudo"><!-- Abrir DIV tudo -->

    <div class="btn-group">
        <label class="btn btn-primary">
    <button type="button" class="btn btn-primary"><a style="color: #fff;font-weight: bold;" href="http://www.jefotografiaevideo.com.br" target="_top">Home</a></button>
        </label>
        <label class="btn btn-primary">
    <button type="button" class="btn btn-primary"><a style="color: #fff;font-weight: bold;" href="#" target="_top">Orçamentos</a></button>
        </label>
        <label class="btn btn-primary">
    <button type="button" class="btn btn-primary"><a style="color: #fff;font-weight: bold;" href="#" target="_top">Parceiros</a></button>
        </label>
        <label class="btn btn-primary">
    <button type="button" class="btn btn-primary"><a style="color: #fff;font-weight: bold;" href="#" target="_top">Contato</a></button>
        </label>
    </div>

<div class="orcamento"><!-- Abrir DIV orcamento -->

    <h4 style="text-align: center;">ORÇAMENTO PARA COBERTURA DE CASAMENTO</h4>
    <div class="alert alert-success" role="alert">

    <strong>Olá! Tudo bem?</strong> O que você deseja acrescentar em seu casamento? </a></div>


      <div class="form-control">
        <label for="gender1" class="badge badge-default">DESEJA ACRESCENTAR ENSAIO PRÉ-CASAMENTO?</label>
        <select class="form-control selcls" id="gender1">
         <option>Escolher opções</option>
          <option>10 fotos</option>
          <option value="100">20 fotos</option>
          <option value="0">Não</option>
        </select>          
 </div>    

      <div class="form-control">
        <label for="gender1" class="badge badge-default">DESEJA ACRESCENTAR O DIA DA NOIVA?</label>
        <select class="form-control selcls" id="gender1">
         <option>Escolher opções</option>
          <option value="100">Sim (10 fotos)</option>
          <option value="0">Não</option>
        </select>          
 </div>

       <div class="form-control">
        <label for="gender1" class="badge badge-default">DESEJA ACRESCENTAR O DIA DO NOIVO?</label>
        <select class="form-control selcls" id="gender1">
         <option>Escolher opções</option>
          <option value="100">Sim (10 fotos)</option>
          <option value="0">Não</option>
        </select>          
 </div>

       <div class="form-control">
        <label for="gender1" class="badge badge-default">DESEJA ACRESCENTAR A COBERTURA FOTOGRÁFICA DA CERIMONIA?</label>
        <select class="form-control selcls" id="gender1">
         <option>Escolher opções</option>
          <option value="100">Sim</option>
          <option value="0">Não</option>
        </select>          
 </div>   

        <div class="form-control">
        <label for="gender1" class="badge badge-default">DESEJA ACRESCENTAR ENSAIO PÓS-CASAMENTO?</label>
        <select class="form-control selcls" id="gender1">
         <option>Escolher opções</option>
           <option value="100">Sim (10 fotos)</option>
          <option value="0">Não</option>
        </select>          
 </div> 

       <div class="form-control">
        <label for="gender1" class="badge badge-default">DESEJA ACRESCENTAR A COBERTURA FOTOGRÁFICA DA RECEPÇÃO? (PÓS CERIMONIA)</label>
        <select class="form-control selcls" id="gender1">
         <option>Escolher opções</option>
          <option value="100">Sim</option>
          <option value="0">Não</option>
        </select>          
 </div>    

       <div class="form-control">
        <label for="gender1" class="badge badge-default">DESEJA ACRESCENTAR CLIPE EM VÍDEO?</label>
        <select class="form-control selcls" id="gender1">
         <option>Escolher opções</option>
          <option value="100">05 minutos de vídeo</option>
          <option value="100">10 minutos de vídeo</option>
          <option value="100">20 minutos de vídeo</option>
          <option value="0">Não</option>
        </select>          
 </div>    


<div class="form-control">
        <label for="gender1" class="badge badge-default">DESEJA ACRESCENTAR ÁLBUM FOTOGRÁFICO?</label>
        <select class="form-control selcls" id="gender1">
         <option>Escolher opções</option>
          <option value="100">Álbum 25x25cm (fechado)</option>
          <option value="100">Álbum 30x40cm (fechado)</option>
          <option value="0">Não</option>
        </select>          
 </div>    

 <div class="form-control">
        <label for="gender1" class="badge badge-default">DESEJA ACRESCENTAR MÍDIA REMOVÍVEL?</label>
        <select class="form-control selcls" id="gender1">
         <option>Escolher opções</option>
          <option value="100">Pen driver</option>
          <option>Já tenho a mídia removível</option>
        </select>          
 </div>    
          <input style="margin-top:3px;" class="form-control" type="text" placeholder="total"  readonly="readonly" id="result" value="0,0">

</div><!-- fechar DIV orcamento -->




<center>
<div class="btn-group" data-toggle="buttons" style="margin-top: 3px; fonte-size: 10px; width: auto;" >
  <label class="btn btn-primary active">
   <a class="btn btn-primary" value="inprimir" onclick="window.print()" role="button" target="_blank">Salvar orçamento em PDF</a>
  </label>
  <label class="btn btn-primary">
   <a class="btn btn-primary" href="#" role="button" target="_blank">Enviar PDF</a>
  </label>
  </center>

    </div><!-- Fechar DIV container-2 -->

    </div><!-- Fechar DIV tudo -->
</body>
jquery html

  • You want to add up all the values of options when the user selects any of them?

  • Yes! That’s my difficulty. I’m still learning how to create functions.

1 answer

0

Just do it like this:

  $('select').change(function(event) {
    var valor = $(this).val();
    // verifica se o valor é um número
    if (isNaN(valor)) {
      return false;
    }
    var totalAtual = parseFloat($("#result").val());
    var total = totalAtual + parseFloat(valor);
    $("#result").val(total.toFixed(2));
 });

At the event change of selects you sum the selected value to an accumulated value in your field result

  • @John-Lder managed to solve with my example?

Browser other questions tagged jquery html

You are not signed in. Login or sign up in order to post.