JavaScript - Error al querer mostrar div oculto en form con Chrome y Opera

 
Vista:
Imágen de perfil de Felix
Val: 13
Ha aumentado su posición en 8 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Error al querer mostrar div oculto en form con Chrome y Opera

Publicado por Felix (9 intervenciones) el 27/06/2019 04:17:18
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:

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
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 ScriptShow
Val: 2.019
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Error al querer mostrar div oculto en form con Chrome y Opera

Publicado por ScriptShow (692 intervenciones) el 27/06/2019 14:20:29
Saludos, Félix

en código JavaScript nativo 100% compatible con tod@s, sería:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
var actual=null;
function showhide(id) {
if (actual != null) document.getElementById(actual).style.display="none";
actual=id;
document.getElementById(id).style.display="block";
}
</script>
 
<p align="left">
<br><br><a href="javascript:void(0)" onclick="showhide('sec1')"> Ejemplo #01</a> / <a href="javascript:void(0)" onclick="showhide('sec2')"> Ejemplo #02</a> /<br><br>
<span id="sec1" style="display:none">
Sección #1 Etc...
</span>
<span id="sec2" style="display:none">
Sección #2 Etc...
</span>
</p>

Se puede adaptar, ampliar y complicar sin límites.

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Felix
Val: 13
Ha aumentado su posición en 8 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Error al querer mostrar div oculto en form con Chrome y Opera

Publicado por Felix (9 intervenciones) el 27/06/2019 16:15:45
Hola! Gracias por tomarte el tiempo para contestar.

He probado como me has dicho y nada, sigue sin funcionar el Chrome y Opera. Creo que el problema está en que estoy desplegando un check desde un select.

Es decir, con el primer click se muestra un formulario que tiene un select que a su vez al seleccionar una opción debe mostrar una lista de checkbox; es esta ultima es la que no se muestra, no cambia su estado de display: none.
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 ScriptShow
Val: 2.019
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Error al querer mostrar div oculto en form con Chrome y Opera

Publicado por ScriptShow (692 intervenciones) el 28/06/2019 03:32:32
Veamos un ejemplo más concreto, en JavaScript nativo y compatible 100%. No precisa librerías de terceros...

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
<script>
var actual=null;
function showhide(id) {
if (id == "null") return;
if (actual != null) document.getElementById(actual).style.display="none";
actual=id;
document.getElementById(id).style.display="block";
}
</script>
 
<select class="form-control sombra-form" style="width: 503px;" required="required" onchange="showhide(this.value)">
<option value="null" id="">Seleccione tipo de ayuda </option>
<option value="mostrar5" class="" id="">Técnica - ortopedia</option>
<option value="mostrar6" class="" id="">Nutrición</option>
<option value="mostrar7" class="" id="">Mujer embarazada</option>
<option value="mostrar8" class="" id="">Mujer lactante</option>
</select>
 
<div class="form-inline" id="mostrar5" style="display: none; padding-bottom: 2%;">
<div class="mx-sm-3">
<label ><input type="checkbox" id="" name="" value=""> Colchón antiescaras</label>
</div>
<div class="mx-sm-3">
<label ><input type="checkbox" id="" name="" value=""> Andadera pediátrica</label>
</div>
</div>
 
<div class="form-inline" id="mostrar6" style="display: none; padding-bottom: 2%;">
<div class="mx-sm-3">
<label ><input type="checkbox" id="" name="" value=""> Alimentos</label>
</div>
<div class="mx-sm-3">
<label ><input type="checkbox" id="" name="" value=""> Leche maternizada</label>
</div>
</div>
 
<div class="form-inline" id="mostrar7" style="display: none; padding-bottom: 2%;">
<div class="mx-sm-3">
<label ><input type="checkbox" id="" name="" value=""> Mujer embarazada 1 ...</label>
</div>
<div class="mx-sm-3">
<label ><input type="checkbox" id="" name="" value=""> Mujer embarazada 2 ...</label>
</div>
</div>
 
<div class="form-inline" id="mostrar8" style="display: none; padding-bottom: 2%;">
<div class="mx-sm-3">
<label ><input type="checkbox" id="" name="" value=""> Mujer lactante 1 ...</label>
</div>
<div class="mx-sm-3">
<label ><input type="checkbox" id="" name="" value=""> Mujer lactante 2 ...</label>
</div>
</div>

Este código irá bien en todos los navegadores desde IExplorer 5.x + hasta los más modernos.
Pruébalo como está, sin otros scripts ó librerías, css, etc. Después, puedes ir implementando según necesites.

Espero sea útil.

Un saludo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
Imágen de perfil de Felix
Val: 13
Ha aumentado su posición en 8 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Error al querer mostrar div oculto en form con Chrome y Opera

Publicado por Felix (9 intervenciones) el 07/07/2019 15:52:02
saludos!

Efectivamente me funciona muchas gracias. El problema es que luego de des seleccionar y querer volver no sucede. Es decir funciona la primera vez que le das click pero por alguna razón si quieres seleccionar otra y luego volver, no te lo permite.
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 Felix
Val: 13
Ha aumentado su posición en 8 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

[SOLUCIONADO] Error al querer mostrar div oculto en form con Chrome y Opera

Publicado por Felix (9 intervenciones) el 08/07/2019 21:32:18
Saludos!

Logré solucionar el problema!

Lo que estaba pasando era que al seleccionar una opción que nos estuviera afectada por la función, esta la tomaba como nula y dejeva de funcionar.

Para solucionarlo coloque varias etiquetas <span> con el ide de las opciones pero sin nada entre ellas:

1
<span id="mi_opcion"></span>

de esta manera no deja de ejecutarse la función y si quiero volver entre las opciones puedo hacerlo con tranquilidad.

Un millón de gracias ScriptShow.
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