JavaScript - Mostrar/Ocultar secciones según Formulario

 
Vista:
Imágen de perfil de Pablo

Mostrar/Ocultar secciones según Formulario

Publicado por Pablo (2 intervenciones) el 01/06/2018 11:32:39
Hola a todos, soy novato sin experiencia con JavaScript. AGRADECERÍA AYUDA para poder obtener un primer código con el que comenzar a trabajar y hacer pruebas.

Tengo en página web un formulario seguido de varias secciones (inicialmente ocultas). Lo que pretendo es que usuario rellene formulario y al pulsar el botón se muestre sólo la sección que corresponda.

Formulario #form1 que incluye 2 campos (de lista desplegable) y 1 botón:
1
2
3
Campo #curso (Valores: “curso 1”, “curso 2”)
Campo #centro (Valores: “centro 1”, “centro 2”)
Botón #boton_busca

Secciones (inicialmente ocultas):
1
2
3
4
Sección #curso1_centro1 .calendario
Sección #curso1_centro2 .calendario
Sección #curso2_centro1 .calendario
Sección #curso2_centro2 .calendario

Gracias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Mostrar/Ocultar secciones según Formulario

Publicado por xve (2100 intervenciones) el 01/06/2018 18:40:03
Los valores de campo y centro son <select>?

Puedes mostrar el código HTML para mortificarlo?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Pablo

Mostrar/Ocultar secciones según Formulario

Publicado por Pablo (2 intervenciones) el 01/06/2018 20:47:30
Hola, muchas gracias por contestar.
Efectivamente son elementos Select (listas desplegables).
He conseguido lo que buscaba con el código JS de abajo. Aunque efectivo, muy probablemente no será muy eficiente.

Al final tengo 4 <select>:
#et_pb_contact_tipo_1 puede tomar valores: 'Curso' o 'Taller'
#et_pb_contact_curso_1 sólo se muestra si el <select> Tipo es 'Curso' e incluye 6 opciones de texto (nombre de cursos)
#et_pb_contact_taller_1 sólo se muestra si el <select> Tipo es 'taller' e incluye 8 opciones de texto (nombre de talleres)
#et_pb_contact_centro_1 sólo se muestra si se han seleccionado los <select> anteriores e incluye 6 opciones de texto (poblaciones en Mayúscula y sin tildes ni ñ)

El <button> para realizar búsqueda de la secciones a mostrar/ocultar:
#boton_busca_fechas

Tengo tantas secciones como la suma de productos cartesianos: nº cursos x nº centros + nº talleres x nºcentros.
Para hacer menos complicado el código, he usado estos identificadores en las secciones (todas ellas tienen como clase .mostrarCalendario):

Sección de curso 1 en VALENCIA: #cur1_VALENCIA
Sección de curso 1 en MADRID: ]#cur1_MADRID
...
Sección de curso 6 en ALICANTE: ]#cur6_ALICANTE


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<script type="text/javascript">
// Se ejecutará automáticamente cuando la página esté lista.
jQuery(document).ready(function($) {
// Ocultar todas las secciones
jQuery('.mostrarCalendario').hide();
 
// Acción por defecto al pulsar botón.
jQuery('#boton_busca_fechas').click( function(e) {
 
var tipo = document.getElementById("et_pb_contact_tipo_1");
var tipoSel = tipo.options[tipo.selectedIndex].value; //Curso o Taller.
 
var curso = document.getElementById("et_pb_contact_curso_1");
var cursoSel = curso.options[curso.selectedIndex].value; //valores del select: Fundamentos de MTCh, ACUMUSI Canales Meridianos, ACUMUSI Zang-Fu, ACUMUSI Vasos Reguladores, Moxibustión, Fitoterapia.
 var taller = document.getElementById("et_pb_contact_taller_1");
 var tallerSel = taller.options[taller.selectedIndex].value; //Hombro, Codo, Muñeca, Cadera, Rodilla, Tobillo, Columna lumbar y cintura pélvica, Columna cérvico dorsal y cintura escapular.
 var centro = document.getElementById("et_pb_contact_centro_1");
 var centroSel = centro.options[centro.selectedIndex].value; //Alicante, Irún, Madrid, Santander, Sevilla, Valencia
 
 //Validación de campos
 if(tipoSel==null || tipoSel==''){
 alert("Seleccione el tipo formativo");
 return false;
 }
 if(tipoSel=='Curso' && (cursoSel==null || cursoSel=='')){
 alert("Seleccione un curso");
 return false;
 }
 if(tipoSel=='Taller' && (tallerSel==null || tallerSel=='')){
 alert("Seleccione un taller");
 return false;
 }
 if(centroSel==null || centroSel==''){
 alert("Seleccione un centro formativo");
 return false;
 }
 
 // Calcular ID de sección a mostrar
 var ID='';
 if(tipoSel=='Curso' && (cursoSel=='Fundamentos de MTCh')){
 ID='cur1';
 }
 if(tipoSel=='Curso' && (cursoSel=='ACUMUSI Canales Meridianos')){
 ID='cur2';
 }
 if(tipoSel=='Curso' && (cursoSel=='ACUMUSI Zang-Fu')){
 ID='cur3';
 }
 if(tipoSel=='Curso' && (cursoSel=='ACUMUSI Vasos Reguladores')){
 ID='cur4';
 }
 if(tipoSel=='Curso' && (cursoSel=='Moxibustión')){
 ID='cur5';
 }
 if(tipoSel=='Curso' && (cursoSel=='Fitoterapia')){
 ID='cur6'
 }
 
 if(tipoSel=='Taller' && (tallerSel=='Hombro')){
 ID='tal1';
 }
 if(tipoSel=='Taller' && (tallerSel=='Codo')){
 ID='tal2';
 }
 if(tipoSel=='Taller' && (tallerSel=='Muñeca')){
 ID='tal3';
 }
 if(tipoSel=='Taller' && (tallerSel=='Cadera')){
 ID='tal4';
 }
 if(tipoSel=='Taller' && (tallerSel=='Rodilla')){
 ID='tal5';
 }
 if(tipoSel=='Taller' && (tallerSel=='Tobillo')){
 ID='tal6';
 }
 if(tipoSel=='Taller' && (tallerSel=='Columna lumbar y cintura pélvica')){
 ID='tal7';
 }
 if(tipoSel=='Taller' && (tallerSel=='Columna cérvico dorsal y cintura escapular')){
 ID='tal8';
 }
 
 if(!ID==''){
 jQuery('.mostrarCalendario').hide();
 ID='#' + ID + '_' + centroSel;
 e.preventDefault(); // deja por defecto la acción dentro de función
 jQuery(ID).show();
 }
 });
});
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar