Horoscopo en formulario

Saludos a todos! Recientemente empece con el curso de FrontEnd de mejorando.la y he llegado al apartado de Jquery! Me cuesta un poco asi que he comprado un libro, para empezar desde 0 con JavaScript...

Me encontraba intentando desarollar una aplicación simple de contacto, con los siguientes datos para añadir "nombre, apellidos, email, fecha, horoscopo" y mi intención es la siguiente...

Al rellenar la fecha se autocomplete el textarea de horoscopo con el horoscopo correcto.

Hice un código muy basico y me funciono

Código Javascript :

<script language = "Javascript" >

dia = prompt ("Introduce día");
mes = prompt ("Introduce mes");

switch(mes)

{
case "enero": // 01
if (dia>=21)
alert("acuario");


case "febrero": // 02
if (dia<=19)
alert("acuario");
else
alert("piscis");

case "marzo": // 03
if (dia<=20)
alert("piscis");
else
alert("aries");

case "abril": // 04
if (dia<=20)
alert("aries");
else
alert("tauro");

case "mayo": // 05
if (dia<=21)
alert("tauro");
else
alert("geminis");

case "junio": // 06
if (dia<=21)
alert("geminis");
else
alert("cancer");

case "julio": // 07
if (dia>=23)
alert("cancer");
else
alert("leo");

case "agosto": // 08
if (dia<=23)
alert("leo");
else
alert("virgo");

case "septiembre": // 09
if (dia<=23)
alert("virgo");
else
alert("libra");

case "octubre": // 10
if (dia<=23)
alert("libra");
else
alert("escorpio");

case "noviembre": // 11
if (dia<=22)
alert("escorpio");
else
alert("sagitario");

case "diciembre": // 12
if (dia<=21)
alert("sagitario");
else
alert("capricornio");

}

</script>

Pero ahora me gustaría aplicarlo al formulario.... Como comente antes
Este es mi formulario


y este es el codigo de mi formulario

Código HTML :

 <form action="" method="get">
           <div class="fr">
  <label for="Sr"></label><br>
  <select name="Sr" size="1" id="Sr">
    <option value="Sr.">Sr.</option>
    <option value="Sra.">Sra.</option>
    <option value="Srta.">Srta.</option>
  </select>
  <label for="nombre" ></label>
  <input type="text" name="nombre" value="Nombre" id="nombre">
  <label for="Apellido"></label>
  <input type="text" name="Apellido"  value="Apellido"  id="Apellido">
  <label for="Email"></label>

  <input type="text" name="Email" value="Email"  id="Email"><select name="Dia">
  

  <div class="tur">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
    <option value="21">21</option>
    <option value="22">22</option>
    <option value="23">23</option>
    <option value="24">24</option>
    <option value="25">25</option>
    <option value="26">26</option>
    <option value="27">27</option>
    <option value="28">28</option>
    <option value="29">29</option>
    <option value="30">30</option>
    <option value="31">31</option>
  </select>
  <select name="Mes">
    <option value="Enero">Enero</option>
    <option value="Febrero">Febrero</option>
    <option value="Marzo">Marzo</option>
    <option value="Abril">Abril</option>
    <option value="Mayo">Mayo</option>
    <option value="Junio">Junio</option>
    <option value="Julio">Julio</option>
    <option value="Agosto">Agosto</option>
    <option value="Septiembre">Septiembre</option>
    <option value="Octubre">Octubre</option>
    <option value="Noviembre">Noviembre</option>
    <option value="Diciembre">Diciembre</option>
  </select>
  <select name="Año">
    <option value="1995">1995</option>
    <option value="1994">1994</option>
    <option value="1993">1993</option>
    <option value="1992">1992</option>
     </div>
  </select>

  
  <label for="horoscopo" ></label>
  <input type="text" name="horoscopo" value="$VariableHoroscopo" id="horoscopo">
  <input type="submit" name="Enviar" id="Enviar" value="Enviar">

 

</form>  </div>

Tiene algunos div para darle estilos.. De momento soy incapaz de realizarlo con exito, lo sigo intentando

Muchas gracias a todos.

dentro del switch cambia los alert por una variable, por ejemplo zodiaco

al final del switch seleccionas por medio del id el campo y le asignas como valor el dato de la variable:

Código Javascript :

document.getElementById('horoscopo').value = zodiaco;

Falta una etiqueta SELECT antes de los OPTION

Creo que algo debo de estar haciendo mal....
cambie las variables definidas al principio por estas dos

Código Javascript :

var dia = $("input#dia").val();
var mes = $("input#mes").val();

para obtener el valor de los imput tipo "text" lo probe en text para saber si funcionaba...
y cambie los alert por variables... tal que un case se ve asi ahora

Código Javascript :

case "marzo": // 03
if (dia<=20)
zodiaco = "piscis";
else
zodiaco = "aries";
break;

(Añadi un break al final de cada case)

y al final de mi switch puse

Código Javascript :

document.getElementById('horoscopo').value = zodiaco;

y no consigo que funcione.... les pongo el codigo html y js entero.

Código HTML :

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script language = "Javascript" >

var dia = $("input#dia").val();
var mes = $("input#mes").val();

switch(mes)

{
case "enero": // 01
if (dia>=21)
zodiaco = "acuario";
break;


case "febrero": // 02
if (dia<=19)
zodiaco = "acuario";
else
zodiaco = "piscis";
break;

case "marzo": // 03
if (dia<=20)
zodiaco = "piscis";
else
zodiaco = "aries";
break;

case "abril": // 04
if (dia<=20)
zodiaco = "aries";
else
zodiaco = "abril";
break;

case "mayo": // 05
if (dia<=21)
zodiaco = "tauro";
else
zodiaco = "geminis";
break;

case "junio": // 06
if (dia<=21)
zodiaco = "geminis";
else
zodiaco = "cancer";
break;

case "julio": // 07
if (dia>=23)
zodiaco = "cancer";
else
zodiaco = "leo";
break;

case "agosto": // 08
if (dia<=23)
zodiaco = "leo";
else
zodiaco = "virgo";
break;

case "septiembre": // 09
if (dia<=23)
zodiaco = "virgo";
else
zodiaco = "libra";
break;

case "octubre": // 10
if (dia<=23)
zodiaco = "libra";
else
zodiaco = "escorpio";
break;

case "noviembre": // 11
if (dia<=22)
zodiaco= "escorpio";
else
zodiaco = "sagitario";
break;

case "diciembre": // 12
if (dia<=21)
zodiaco = "sagitario";
else
zodiaco = "capricornio";
break;


document.getElementById('horoscopo').value = zodiaco;

}

</script>
</head>
<body>
   <form action="" method="get">
      <p>Dia</p> <input name="dia" id="dia" type="text" />
      <p>Mes</p><input name="mes" id="mes" type="text" />
<br>
<label for="horoscopo"></label><br><br><br><br> <p> Horoscopo </p>
<input type="text" name="horoscopo" id="horoscopo">

</form>
</body>
</html>

Aqui un ejemplo mas o menos apegado a lo que hisiste ojala te pongas a estudiarlo un pokitin.

http://jsfiddle.net/fCEyd/

elporfirio escribió: