Foros del Web » Programando para Internet » Javascript »

Porfavor, necesito vuestra ayuda con esta tontería

Estas en el tema de Porfavor, necesito vuestra ayuda con esta tontería en el foro de Javascript en Foros del Web. Buenos días desde Barcelona amigos, Llevo mucho tiempo leyendo este foro porque es un tesoro para la comunidad programadora. Escribo muy poco porque intento siempre ...
  #1 (permalink)  
Antiguo 24/05/2010, 02:58
 
Fecha de Ingreso: mayo-2009
Mensajes: 21
Antigüedad: 15 años
Puntos: 0
Porfavor, necesito vuestra ayuda con esta tontería

Buenos días desde Barcelona amigos,

Llevo mucho tiempo leyendo este foro porque es un tesoro para la comunidad programadora. Escribo muy poco porque intento siempre encontrar las soluciones por mi cuenta, pero esta vez os invoco para pediros ayuda con un maldito script en javascript que me tiene nervioso.

Veréis, el caso es muy simple:

Tengo un formulario. Si eliges un día de la semana, se cargan unos horarios, si eliges otro, pues se cargan otros horarios.

El script está hecho. Es el siguiente (por favor, haced copy & paste en un notepad para visualizar mejor el problema y guardarlo en archivo.html)

Cita:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

</head>
<SCRIPT>

function Combos(x)
{
ItDepend1=document.getElementById('CombDependiente 1');
ItDepend2=document.getElementById('CombDependiente 2');
ItDepend3=document.getElementById('CombDependiente 3');
ItDepend4=document.getElementById('CombDependiente 4');
if(!ItDepend1){return;}
if(!ItDepend2){return;}
if(!ItDepend3){return;}
if(!ItDepend4){return;}
var mitems=new Array();
var mitems_ids=new Array();
mitems['Triar']=[' '];
mitems['Tardor']=['Dia 1 - 09:00','Dia 1 - 11:30','Dia 2 - 09:00','Dia 2 - 11:30'];
mitems['Primavera']=['Dia 3 - 09:00','Dia 3 - 11:30','Dia 4 - 09:00','Dia 4 - 11:30'];
mitems['Tardor2']=['Dia 5 - 09:00','Dia 5 - 11:30','Dia 5 - 09:00','Dia 5 - 11:30'];
mitems['Primavera2']=['Dia 6 - 09:00','Dia 6 - 11:30','Dia 6 - 09:00','Dia 6 - 11:30'];


mitems_ids['Tardor']=['dia1a','dia1b','dia2a','dia2b','4'];
mitems_ids['Primavera']=['dia3a','dia3b','dia4a','dia4b','8'];
mitems_ids['Tardor2']=['dia5a','dia5b','dia5a','dia5b','4'];
mitems_ids['Primavera2']=['dia6a','dia6b','dia6a','dia6b','8'];



ItDepend1.options.length=0;
ItDepend2.options.length=0;
ItDepend3.options.length=0;
ItDepend4.options.length=0;
ItActual=mitems[x.options[x.selectedIndex].value];

ItActual_ids=mitems_ids[x.options[x.selectedIndex].value];

if(!ItActual){return;}
ItDepend1.options.length=ItActual.length;
ItDepend2.options.length=ItActual.length;
ItDepend3.options.length=ItActual.length+1;
ItDepend4.options.length=ItActual.length+1;
ItDepend3.options[0].text='SENSE ESCOLLIR';
ItDepend4.options[0].text='SENSE ESCOLLIR';
for(var i=0;i<ItActual.length;i++)
{
ItDepend1.options[i].text=ItActual[i];
ItDepend1.options[i].value=ItActual_ids[i];
ItDepend2.options[i].text=ItActual[i];
ItDepend2.options[i].value=ItActual_ids[i];
ItDepend3.options[i+1].text=ItActual[i];
ItDepend3.options[i+1].value=ItActual_ids[i];
ItDepend4.options[i+1].text=ItActual[i];
ItDepend4.options[i+1].value=ItActual_ids[i];
}
ItDepend1.options.length=1;
ItDepend2.options.length=1;
ItDepend3.options.length=1;
ItDepend4.options.length=1;
if(x.value == "Tardor"){
ItDepend1.options[0].text='DIA 1 - 09:00';
}else if(x.value == "Primavera"){
ItDepend1.options[0].text='DIA 3 - 09:00';
}else if(x.value == "Tardor2"){
ItDepend1.options[0].text='DIA 5 - 09:00';
}else if("Primavera2"){
ItDepend1.options[0].text='DIA 6 - 09:00';
}

if(x.value == "Tardor"){
ItDepend2.options[0].text='DIA 1 - 11:30';
}else if(x.value == "Primavera"){
ItDepend2.options[0].text='DIA 3 - 11:30';
}else if(x.value == "Tardor2"){
ItDepend2.options[0].text='DIA 5 - 09:00';
}else if("Primavera2"){
ItDepend2.options[0].text='DIA 6 - 09:00';
}

if(x.value == "Tardor"){
ItDepend3.options[0].text='DIA 2 - 09:00';
}else if(x.value == "Primavera"){
ItDepend3.options[0].text='DIA 4 - 09:00';
}else if(x.value == "Tardor2"){
ItDepend3.options[0].text='DIA 5 - 09:00';
}else if("Primavera2"){
ItDepend3.options[0].text='DIA 6 - 09:00';
}

if(x.value == "Tardor"){
ItDepend4.options[0].text='DIA 2 - 11:30';
}else if(x.value == "Primavera"){
ItDepend4.options[0].text='DIA 4 - 11:30';
}else if(x.value == "Tardor2"){
ItDepend4.options[0].text='DIA 5 - 09:00';
}else if("Primavera2"){
ItDepend4.options[0].text='DIA 6 - 09:00';
}



}

</SCRIPT>
<form>
<table>
<h2>Datos</h2>
<tr>
<td><label>Numero</label></td>
<td> <input type="text" name="alumnes1" id="alumnes" tabindex="8" /></td>

<td><label for="or">Dias</label></td>
<td><select name="or1" id="or1" onChange="Combos(this)">
<option value="Triar">Selecciona</option>
<option value=Tardor>Lunes</option><option value=Primavera>Viernes</option></select></td></tr><tr>
<td><label>Curso</label></td>
<td><select name="curs1" id="curs" tabindex="10">

<option value="selecciona" >Selecciona</option>
<option value="1rbtx" >1r BATX</option>
<option value="2nbtx" >2n BATX</option>
</select></td>
<td><label>Modalitat</label></td>
<td><select name="modalitat1" id="modalitat" tabindex="11">
<option value="noescollit" >Selecciona</option>

<option value="cietec" >Cientifico</option>
<option value="social" >Social</option>
</select></td>
</tr>
<tr>
<td> <select name="CombDependiente1" id="CombDependiente1"></select></td>
<td><select name="dia11gr1" id="modalitat" tabindex="11">
<option value="pref1" >preferencia 1</option>

<option value="pref2" >preferencia 2</option>
<option value="pref3" >preferencia 3</option>
<option value="pref4" >preferencia 4</option>
<option value="nopref" >No puedo</option>
</select></td>
<td> <select name="CombDependiente2" id="CombDependiente2" ></select></td>
<td> <select name="dia12gr1" id="modalitat" tabindex="11">

<option value="pref1" >preferencia 1</option>
<option value="pref2" >preferencia 2</option>
<option value="pref3" >preferencia 3</option>
<option value="pref4" >preferencia 4</option>
<option value="nopref" >No puedo</option>
</select></td>

</tr>
<tr>
<td> <select name="CombDependiente3" id="CombDependiente3" ></select></td>
<td> <select name="dia21gr1" id="modalitat" tabindex="11">
<option value="pref1" >preferencia 1</option>
<option value="pref2" >preferencia 2</option>
<option value="pref3" >preferencia 3</option>
<option value="pref4" >preferencia 4</option>

<option value="nopref" >No puedo</option>
</select></td>
<td> <select name="CombDependiente4" id="CombDependiente4" ></select></td>
<td> <select name="dia22gr1" id="modalitat" tabindex="11">
<option value="pref1" >preferencia 1</option>
<option value="pref2" >preferencia 2</option>
<option value="pref3" >preferencia 3</option>

<option value="pref4" >preferencia 4</option>
<option value="nopref" >No puedo</option>
</select></td>

</tr>

</table>

</form>

</table>
</body>
</html>
Vale, ahora abrid el html con vuestro navegador favorito. El problema es el siguiente:

Cuando selecciono un día de la semana, se carga correctamente el horario. PERO, el horario , a nivel de código, se carga con el tag "select". Cuando cambio el tag select por el tag label, si escojo un día de la semana, ya no se carga el horario.

Queda feo que se cargue con el tag select porque en realidad no hay que escoger nada ahí porque son datos predefinidos. Y no entiendo por qué poniendo el tag label no lo carga y no hace nada el script.

Por favor, agradecería muchísimo vuestra ayuda, esto me mantiene en vilo.

Muchas gracias de antemano compañeros.

Última edición por Waska; 24/05/2010 a las 03:04
  #2 (permalink)  
Antiguo 25/05/2010, 03:09
 
Fecha de Ingreso: mayo-2009
Mensajes: 21
Antigüedad: 15 años
Puntos: 0
Respuesta: Porfavor, necesito vuestra ayuda con esta tontería

UP UP UP . Agradecería muchísimo vuestra ayuda !!
  #3 (permalink)  
Antiguo 25/05/2010, 04:26
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Sabadell
Mensajes: 4.897
Antigüedad: 16 años, 1 mes
Puntos: 574
Respuesta: Porfavor, necesito vuestra ayuda con esta tontería

Bon dia des de Sabadell,

Ayer ya intente echarte una mano... pero es que tu script no hace nada de la manera que lo has colgado, y claro no es un script de tres lineas....

Intenta concretar que és lo que te esta fallando....

No entiendo lo que dices del tag label... no se porque lo usas puedes usar un span y modificar su innerHTML...

Intenta hacer una version reducida del problema y seguro que te podemos ayudar...

Quim

Última edición por quimfv; 25/05/2010 a las 15:38
  #4 (permalink)  
Antiguo 25/05/2010, 07:06
 
Fecha de Ingreso: mayo-2009
Mensajes: 21
Antigüedad: 15 años
Puntos: 0
Respuesta: Porfavor, necesito vuestra ayuda con esta tontería

Hola Quim,

Agradezco mucho tu ayuda, he simplificado el problema:

Copiad el siguiente código y guardadlo en un archivo llamado javascript.html (o el nombre que queráis):

Cita:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<SCRIPT>

function Combos(x)
{
ItDepend1=document.getElementById('CombDependiente 1');
if(!ItDepend1){return;}
var mitems=new Array();
var mitems_ids=new Array();
mitems['Triar']=[' '];
mitems['Tardor']=['Dia 1 - 09:00','Dia 1 - 11:30','Dia 2 - 09:00','Dia 2 - 11:30'];
mitems['Primavera']=['Dia 3 - 09:00','Dia 3 - 11:30','Dia 4 - 09:00','Dia 4 - 11:30'];
mitems_ids['Tardor']=['dia1a','dia1b','dia2a','dia2b','4'];
mitems_ids['Primavera']=['dia3a','dia3b','dia4a','dia4b','8'];

ItDepend1.options.length=0;
ItActual=mitems[x.options[x.selectedIndex].value];
ItActual_ids=mitems_ids[x.options[x.selectedIndex].value];
if(!ItActual){return;}
ItDepend1.options.length=ItActual.length;
for(var i=0;i<ItActual.length;i++)
{
ItDepend1.options[i].text=ItActual[i];
ItDepend1.options[i].value=ItActual_ids[i];
}
ItDepend1.options.length=1;

if(x.value == "Tardor"){
ItDepend1.options[0].text='DIA 1 - 09:00';
}else if(x.value == "Primavera"){
ItDepend1.options[0].text='DIA 3 - 09:00';
}


}

</SCRIPT>
<form>
<table>
<h2>Datos</h2>
<tr>
<td><select name="or1" id="or1" onChange="Combos(this)">
<option value="Triar">Selecciona</option>
<option value=Tardor>Lunes</option><option value=Primavera>Viernes</option></select></td></tr><tr>
<td><label>Curso</label></td>

</tr>
<tr>
<td> <select name="CombDependiente1" id="CombDependiente1"></select></td>
<td><select name="dia11gr1" id="modalitat" tabindex="11">
<option value="pref1" >preferencia 1</option>
<option value="pref2" >preferencia 2</option>
<option value="pref3" >preferencia 3</option>
<option value="pref4" >preferencia 4</option>
<option value="nopref" >No puedo</option>
</select></td>

</tr>

</table>

</form>

</table>
</body>
</html>
Bien, ahora abridlo con el Firefox, por ejemplo.
Mira lo que he resaltado en negrita de color azul, sobretodo (en el código).

Vale, el script es simple, dependiendo de si escoges Lunes o Viernes. Se carga un día y su hora u otro día con su hora.

Al lado del día-hora, se muestra la preferencia (seleccionable de 1 a 4), en teoría, lo que hay que hacer es seleccionar la preferencia (preferencia 1...preferencia4) . El día/hora que se muestra si haces click para desplegar, no se desplega nada salvo el mismo valor, y así tiene que ser, ya que no es un valor que se cambia.

El select en azul negrita corresponde a la hora, a la visualización del campo del horario. Éste parámetro no ha de ser seleccionable para el usuario ya que es un valor único que cambia en función si coges Lunes o Viernes. Por tanto, quisiera cambiar el tag "select" por cualquier tag que no hiciera intuir al usuario que ha de seleccionar Dia/horario y preferencia, cuando sólo tiene que seleccionar preferencia.

El problema es que cuando pongo, por ejemplo "label" por decir un tag, el script ya no funciona y no puedo ver el horario en función del día que eliges (Lunes o Viernes). Ya que no se carga el día/hora si selecciono Lunes o Viernes.

Espero haberme explicado mejor y muchísimas gracias de antemano.

P.D: Sabadell estoy a 2 paradas en FGC porque ahora estoy currando en Sant Cugat! jojojojo visca Sabadell (no es peloteo).

Un saludo ;)

Última edición por Waska; 25/05/2010 a las 07:13
  #5 (permalink)  
Antiguo 26/05/2010, 01:06
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Sabadell
Mensajes: 4.897
Antigüedad: 16 años, 1 mes
Puntos: 574
Respuesta: Porfavor, necesito vuestra ayuda con esta tontería

Código HTML:
Ver original
  1. <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  2. </head>
  3.  
  4. function Combos(x)
  5. {
  6. ItDepend1=document.getElementById('diaHora');
  7. if(!ItDepend1){return;}
  8. if(x.value == "Tardor"){
  9.     ItDepend1.innerHTML='DIA 1 - 09:00';
  10. }else if(x.value == "Primavera"){
  11.     ItDepend1.innerHTML='DIA 3 - 09:00';
  12. }else{
  13.     ItDepend1.innerHTML="";
  14. }
  15.  
  16.  
  17. }
  18.  
  19. <h2>Datos</h2>
  20. <tr>
  21. <td><select name="or1" id="or1" onChange="Combos(this)">
  22. <option value="Triar">Selecciona</option>
  23. <option value="Tardor">Dilluns</option>
  24. <option value="Primavera">Divendres</option></select></td></tr><tr>
  25. <td><label>Curso</label></td>
  26.  
  27. </tr>
  28. <tr>
  29. <td id="diaHora">&nbsp;</td>
  30. <td><select name="dia11gr1" id="modalitat" tabindex="11">
  31. <option value="pref1" >preferencia 1</option>
  32. <option value="pref2" >preferencia 2</option>
  33. <option value="pref3" >preferencia 3</option>
  34. <option value="pref4" >preferencia 4</option>
  35. <option value="nopref" >No puedo</option>
  36. </select></td>
  37.  
  38. </tr>
  39.  
  40.  
  41. </form>
  42.  
  43. </body>
  44. </html>

Mucho mas simple.... no?

Quim
  #6 (permalink)  
Antiguo 26/05/2010, 02:00
 
Fecha de Ingreso: mayo-2009
Mensajes: 21
Antigüedad: 15 años
Puntos: 0
Respuesta: Porfavor, necesito vuestra ayuda con esta tontería

Eres el Mejor! Muchísimas gracias, agradezco muchísimo tu ayuda y tu esfuerzo.
En serio te lo agradezco !!! Es justo lo que no me salía! Y es como lo quería.

Muchas gracias en serio! :)
Cualquier cosa ya sabes, puedes contar conmigo! ;)

Gràcies i Salutacions !!!

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:53.