Como calcular o valor do input radio em javascript?

10/07/2019

0

HTML JavaScript PHP

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

Matheus

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: 
<!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
Gostei + 0

10/07/2019

Matheus

não deu certo
Responder
Gostei + 0

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
Gostei + 0

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar