Error al querer mostrar div oculto en form con Chrome y Opera
Publicado por Felix (1 intervención) el 27/06/2019 13:38:36
Saludos!
Estoy programando unos formularios que deben desplegar opciones al hacer select en una opción. Lo estoy haciendo por medio de div's ocultos que deben mostrarse al seleccionar.
No tengo ningún problema al mostrar el primer div padre, todo se complica cuando intento mostrar un div hijo.
El detalle esta que funciona perfectamente con Mozilla Firefox 67.0.4 pero no es lo mismo con Chrome u Opera en sus versiones actuales.
Este es mi codigo del formulario:
y este el condigo JavaScript:
Como les decía en Chrome y opera al hacer click o seleccionar la opción "Técnica - ortopedia" con el id="mostrar5" debería mostrar un div con el id="target5". En Firefox funciona a la perfección.
De antemano muchísimas gracias a quienes pueda ayudar.
Estoy programando unos formularios que deben desplegar opciones al hacer select en una opción. Lo estoy haciendo por medio de div's ocultos que deben mostrarse al seleccionar.
No tengo ningún problema al mostrar el primer div padre, todo se complica cuando intento mostrar un div hijo.
El detalle esta que funciona perfectamente con Mozilla Firefox 67.0.4 pero no es lo mismo con Chrome u Opera en sus versiones actuales.
Este es mi codigo del formulario:
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<a id="atencion-al-ciudadano"></a>
<!-- Inicio Sección Atención al ciudadano --><section class='page-section bg-section-atencion-ciudadano text-white mb-0'>
<div class='container'>
<div class='container'>
<div class='row'>
<div class='seccion-maracaibo col-lg-4' id="mostrar" onclick="estiloActivo()">
<a href='#!' id='sin-link'>
<div>
<img src='img/ico_ayuda.png' class="ico-seccion" alt=''/>
</div>
<h3>Ayudas</h3>
</a>
</div>
<!-- Formulario de AYUDA --><div class="container centrar_form" id="target" style="display: none; padding: 5%; background-color: #6f888c; border-radius: 0 10px 10px 10px;">
<div class="row">
<div class="col-sm-4">
<p>Descripción de la funcionalidad</p>
</div>
<div class="col-sm-8">
<form class="form-horizontal" action="php/enviar_denuncia.php" style="">
<div class="form-inline" style="align-content: center;">
<div class="form-group mx-sm-3">
<select class="form-control sombra-form" style="width: 503px;" required="required">
<option value="" id="ocultar7">Seleccione tipo de ayuda </option>
<option value="salud" class="ocultar6" id="mostrar5">Técnica - ortopedia</option>
<option value="nutricion" class="ocultar5" id="mostrar6">Nutrición</option>
<option value="salud" class="ocultar8" id="mostrar7">Mujer embarazada</option>
<option value="salud" class="ocultar9" id="mostrar8">Mujer lactante</option>
</select>
</div>
</div>
<br>
<div class="form-inline" id="target5" style="display: none; padding-bottom: 2%; text-align: left;">
<div class="mx-sm-3">
<label ><input type="checkbox" id="cbox01" name="" value="" > Colchón antiescaras</label>
<label ><input type="checkbox" id="cbox01" name="" value="" > Andadera pediátrica</label>
<label ><input type="checkbox" id="cbox01" name="" value="" > Andadera adulto</label>
<label ><input type="checkbox" id="cbox01" name="" value="" > Silla tipo coche</label>
<label ><input type="checkbox" id="cbox01" name="" value="" > Silla pediátrica</label>
<label ><input type="checkbox" id="cbox01" name="" value="" > Prótesis auditiva</label>
<label ><input type="checkbox" id="cbox01" name="" value="" > Prótesis de miembro</label>
<label ><input type="checkbox" id="cbox01" name="" value="" > Silla de ruedas adulto</label>
<label ><input type="checkbox" id="cbox01" name="" value="" > Pañales</label>
</div>
<div class="mx-sm-3">
<label ><input type="checkbox" id="cbox01" name="" value="" > Muletas canadienses</label>
<label ><input type="checkbox" id="cbox01" name="" value="" > Bastón de un punto</label>
<label ><input type="checkbox" id="cbox01" name="" value="" > Bastón de 4 puntos</label>
<label ><input type="checkbox" id="cbox01" name="" value="" > Bastón de rastreo</label>
<label ><input type="checkbox" id="cbox01" name="" value="" > Coche ortopédico infantil</label>
<label ><input type="checkbox" id="cbox01" name="" value="" > Centro de cama</label>
<label ><input type="checkbox" id="cbox01" name="" value="" > Cama clínica Fowler</label>
<label ><input type="checkbox" id="cbox01" name="" value="" > Colchón para cama clínica</label>
<label ><input type="checkbox" id="cbox01" name="" value="" > Órtesis (félula, collarin)</label>
</div>
</div>
<div class="form-inline" id="target6" style="display: none; padding-bottom: 2%;">
<div class="mx-sm-3">
<label ><input type="checkbox" id="cbox01" name="" value="" > Alimentos</label>
</div>
<div class="mx-sm-3">
<label ><input type="checkbox" id="cbox01" name="" value="" > Leche maternizada</label>
</div>
</div>
<div class="form-inline" style="align-content: center;">
<div class="form-group mx-sm-3">
<input class="form-control sombra-form" type="name" name="nombre" placeholder="Nombres" required="required"/>
</div>
<div class="form-group mx-sm-3">
<input class="form-control sombra-form" type="name" name="apellido" placeholder="Apellidos" required="required" />
</div>
</div>
<br>
<div class="form-inline">
<div class="form-group mx-sm-3">
<input class="form-control sombra-form" type="text" name="cedula" placeholder="Cédula" required="required" />
</div>
<div class="form-group mx-sm-3">
<input class="form-control sombra-form" type="number" name="edad" placeholder="Edad" style="width: 237px;" />
</div>
</div>
<br>
<div class="form-inline">
<div class="form-group mx-sm-3">
<input class="form-control sombra-form" type="tel" name="tlf" placeholder="Número de teléfono" required="required" />
</div>
<div class="form-group mx-sm-3">
<input class="form-control sombra-form" type="email" name="correo" placeholder="Correo electrónico" />
</div>
</div>
<br>
<div class="form-group row">
<div class="col-sm-6 mx-sm-3">
<textarea class="form-control sombra-form mx-sm-3" name="denuncia" placeholder="Explique su solicitud" required="required" style="width: 503px;" ></textarea>
</div>
</div>
<br>
<button class="btn btn-primary" type="submit">Enviar</button>
<button class="btn btn-primary" id="ocultar" onclick="removerEstiloActivo()">Cerrar</button>
</form>
</div>
</div>
</div>
<!-- FIN Formulario de AYUDA --></section>
<!-- Fin Sección Beneficios Sociales -->y este el condigo JavaScript:
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
$(document).ready(function(){
$("#mostrar").click(function(){
$('#target').show("swing");
$('#target2').hide("slow");
$('#target3').hide("slow");
$('#target4').hide("slow");
});
$("#mostrar2").click(function(){
$('#target2').show("swing");
$('#target').hide("slow");
$('#target3').hide("slow");
$('#target4').hide("slow");
});
$("#mostrar3").click(function(){
$('#target3').show("swing");
$('#target').hide("slow");
$('#target2').hide("slow");
$('#target4').hide("slow");
});
$("#mostrar4").click(function(){
$('#target4').show("swing");
$('#target').hide("slow");
$('#target2').hide("slow");
$('#target3').hide("slow");
});
$("#ocultar").click(function(){
$('#target').hide("slow");
});
$("#ocultar2").click(function(){
$('#target2').hide("slow");
});
$("#ocultar3").click(function(){
$('#target3').hide("slow");
});
$("#ocultar4").click(function(){
$('#target4').hide("slow");
});
$("#mostrar5").click(function(){
$('#target5').show("swing");
});
$(".ocultar5").click(function(){
$('#target5').hide("slow");
});
$("#mostrar6").click(function(){
$('#target6').show("swing");
});
$(".ocultar6").click(function(){
$('#target6').hide("slow");
});
$("#ocultar7").click(function(){
$('#target5').hide("slow");
$('#target6').hide("slow");
});
$("#mostrar14").click(function(){
$('#target14').show("swing");
});
});
Como les decía en Chrome y opera al hacer click o seleccionar la opción "Técnica - ortopedia" con el id="mostrar5" debería mostrar un div con el id="target5". En Firefox funciona a la perfección.
De antemano muchísimas gracias a quienes pueda ayudar.
Valora esta pregunta
0