$( ".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><!--chamarjsdojquery--><scriptsrc="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 in deploying and finalizing a one-page code I'm creating. I'm just a beginner in the area. can anybody help me? Code below. Thanks!
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><!--chamarjsdojquery--><scriptsrc="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>