Como calcular o valor do input radio em javascript?
10/07/2019
0
Como posso calcular o valor do input radio em javascript e o resultado aparecer no alerta?
<!DOCTYPE html>
<html>
<head>
<title>Agência de viagens</title>
<link href="estilo.css" rel="Stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Pacifico|Roboto+Slab:400,700" rel="stylesheet">
</head>
<body>
<form method="POST" action="index.php">
<section id= "destinos">
<h2>Opção de destinos:</h2>
<input type=radio name="cidade" id="Lisboa" onclick="calculo()" value="250€">Lisboa: 250€<br>
<input type=radio name="cidade" id="Paris" onclick="calculo()" value="250€">Paris: 250€<br>
<input type=radio name="cidade" id="Londres" onclick="calculo()" value="250€">Londres: 250€<br>
<input type=radio name="cidade" id="Roma" onclick="calculo()" value="250€">Roma: 250€<br>
<input type=radio name="cidade" id="Miami" onclick="calculo()" value="250€">Miami: 250€<br>
<br>Quantidade de pessoas no quarto: <br>
<input type="radio" name="dormitorio" id="Solteiro" onclick="calculo()" value="35€">Solteiro: 35€<br>
<input type="radio" name="dormitorio" id="Casal" onclick="calculo()" value="60€"> Casal: 60€<br>
<input type="radio" name="dormitorio" id="4_pessoas" onclick="calculo()" value="120€">4 pessoas 120€<br>
<input type="radio" name="dormitorio" id="8_pessoas" onclick="calculo()" value="180€"> 8 pessoas: 180€<br>
<input type="submit" name="salvar" id="submit" value="Enviar">
<input type="Reset" name="apagar" type="text" value="Apagar tudo">
</section>
<script type="text/javascript">
function calculo(){
var type = document.getElementById(''cidade'',''dormitorio'')
alert(valor);
}
</script>
</form>
</body>
</html>
Matheus
Curtir tópico
+ 0
Responder
Posts
10/07/2019
Manoel Junior
Não irá precisar nem de getElement, é só informar o valor como parâmetro ao chamar o método. Segue o exemplo:
Não fiz o teste, mas essa ideia funciona perfeitamente.
<!DOCTYPE html>
<html>
<head>
<title>Agência de viagens</title>
<link href="estilo.css" rel="Stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Pacifico|Roboto+Slab:400,700" rel="stylesheet">
</head>
<body>
<form method="POST" action="index.php">
<section id= "destinos">
<h2>Opção de destinos:</h2>
<input type=radio name="cidade" id="Lisboa" onclick="cidValor(250.0)" value="250€">Lisboa: 250€<br>
<input type=radio name="cidade" id="Paris" onclick="cidValor(250)" value="250€">Paris: 250€<br>
<input type=radio name="cidade" id="Londres" onclick="cidValor(250)" value="250€">Londres: 250€<br>
<input type=radio name="cidade" id="Roma" onclick="cidValor(250)" value="250€">Roma: 250€<br>
<input type=radio name="cidade" id="Miami" onclick="cidValor(250)" value="250€">Miami: 250€<br>
<br>Quantidade de pessoas no quarto: <br>
<input type="radio" name="dormitorio" id="Solteiro" onclick="calculo(35)" value="35€">Solteiro: 35€<br>
<input type="radio" name="dormitorio" id="Casal" onclick="calculo(60)" value="60€"> Casal: 60€<br>
<input type="radio" name="dormitorio" id="4_pessoas" onclick="calculo(120)" value="120€">4 pessoas 120€<br>
<input type="radio" name="dormitorio" id="8_pessoas" onclick="calculo(180)" value="180€"> 8 pessoas: 180€<br>
<input type="submit" name="salvar" id="submit" value="Enviar">
<input type="Reset" name="apagar" type="text" value="Apagar tudo">
</section>
<script type="text/javascript">
var valorCidade=0;
function cidValor(valor){
valorCidade=valor;
}
function calculo(vlDormitorio){
if (valorCidade <> 0){
alert(valorCidade+vlDormitorio);
}else{
alert('Cidade não informada');
}
}
</script>
</form>
</body>
</html>
Não fiz o teste, mas essa ideia funciona perfeitamente.
Responder
12/07/2019
Manoel Junior
Era o operador '<>', que não funciona no JS. Segue a correção:
<!DOCTYPE html>
<html>
<head>
<title>Agкncia de viagens</title>
<link href="estilo.css" rel="Stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Pacifico|Roboto+Slab:400,700" rel="stylesheet">
</head>
<body>
<form method="POST" action="index.php">
<section id= "destinos">
<h2>Opзгo de destinos:</h2>
<input type=radio name="cidade" id="Lisboa" onclick="cidValor(250.0)" value="250А">Lisboa: 250А<br>
<input type=radio name="cidade" id="Paris" onclick="cidValor(250)" value="250А">Paris: 250А<br>
<input type=radio name="cidade" id="Londres" onclick="cidValor(250)" value="250А">Londres: 250А<br>
<input type=radio name="cidade" id="Roma" onclick="cidValor(250)" value="250А">Roma: 250А<br>
<input type=radio name="cidade" id="Miami" onclick="cidValor(250)" value="250А">Miami: 250А<br>
<br>Quantidade de pessoas no quarto: <br>
<input type="radio" name="dormitorio" id="Solteiro" onclick="calculo(35)" value="35А">Solteiro: 35А<br>
<input type="radio" name="dormitorio" id="Casal" onclick="calculo(60)" value="60А"> Casal: 60А<br>
<input type="radio" name="dormitorio" id="4_pessoas" onclick="calculo(120)" value="120А">4 pessoas 120А<br>
<input type="radio" name="dormitorio" id="8_pessoas" onclick="calculo(180)" value="180А"> 8 pessoas: 180А<br>
<input type="submit" name="salvar" id="submit" value="Enviar">
<input type="Reset" name="apagar" type="text" value="Apagar tudo">
</section>
<script type="xml">
var valorCidade=0;
function cidValor(valor){
valorCidade=valor;
}
function calculo(vlDormitorio){
if (valorCidade != 0){
alert(valorCidade+vlDormitorio);
}else{
alert('Cidade nгo informada');
}
}
</script>
</form>
</body>
</html>
Responder
Clique aqui para fazer login e interagir na Comunidade :)
