Foro - Perl en Español

La comunidad de programadores en Perl de habla hispana.

Obviar


  • Publicidad

Desplegable dependiente

Discute todo acerca de JavaScript así como DHTML o la tecnología AJAX.
Publicar una respuesta

Desplegable dependiente

Notapor gonzalos » 2017-01-25 04:58 @249

Buenos días.

Tengo un formulario con dos desplegables dependientes que capturaban la información de una base de datos. Y ahora he añadido otro desplegable en el que el usuario selecciona la información y que no se captura desde ninguna base de datos.

Y quisiera conseguir que el último desplegable que he añadido, no estuviera activo, hasta que lo estuvieran los dos anteriores. Pero no tengo idea de cómo hacerlo, ya que nunca he usado JavaScript.

¿Alguna idea?

Saludos,
Gonzalo
gonzalos
Perlero nuevo
Perlero nuevo
 
Mensajes: 77
Registrado: 2009-11-27 05:47 @283
Arriba

Publicidad

Re: Desplegable dependiente

Notapor explorer » 2017-01-25 10:19 @472

Puedes darle un atributo CSS como 'display: none' para que permanezca oculto, y luego, con código JavaScript que se activa al haber cambios (onChange) en los desplegables, cambiar ese atributo, para que aparezca en pantalla.
JF^D Perl programming & Raku programming. Grupo en Telegram: https://t.me/Perl_ES
Avatar de Usuario
explorer
Administrador
Administrador
 
Mensajes: 14480
Registrado: 2005-07-24 18:12 @800
Ubicación: Valladolid, España
Arriba

Re: Desplegable dependiente

Notapor gonzalos » 2017-01-27 07:16 @344

Hola, explorer.

Los dos desplegables que están anidados, una vez que se realiza la segunda selección se guarda el resultado en la base de datos. Y el tercer desplegable que añadí, es uno con datos externos, que se añaden a la misma tabla de la base de datos.

Y por mucho que lo intento soy incapaz de anidar ese tercer desplegable, para que cuando se seleccionen todos los datos elegidos se añadan a la base de datos.

Dejo parte del código para que se pueda ver de lo que hablo.

Saludos,
Gonzalo.

Sintáxis: [ Descargar ] [ Ocultar ]
Using perl Syntax Highlighting
  1. "#!C:\xampp\perl\bin\perl.exe"
  2.  
  3. content-type: text/html\n\n<html><head>
  4. <script><!--
  5. function f()
  6. {
  7.    top.document.formu.action='grupox.cgi#docentes';
  8.         top.document.formu.cache.value= (new Date()).getTime();
  9.         top.document.formu.submit();
  10. }
  11. //--></script></head><body onLoad="javascript&#058;f();"></body></html>
  12. EOF
  13. ;
  14.        
  15. sub opciones()
  16. {
  17.   my ( $includeDep, $selected ) = @_;
  18.         my $html = ($selected eq "")?"<option value=\"-1\" selected style=\"color: red\">Seleccione departamento/instituto</option>\n":"";
  19.         foreach $Depto ( @$includeDep )
  20.         {
  21.           if( $selected == $Depto->[0] )
  22.                 {
  23.           $html .= <<EOF;
  24. <option selected value="$Depto->[0]" style=\"color: white\">$Depto->[2]</option>
  25. EOF
  26. ;
  27.                 }
  28.                 else
  29.                 {
  30.           $html .= <<EOF;
  31. <option value="$Depto->[0]">$Depto->[2]</option>
  32. EOF
  33. ;
  34.     }
  35.         }
  36.         return $html;
  37. }                                                                              
  38.  
  39.  
  40.  
  41. sub miembros()
  42. {
  43.   my $depto = shift;
  44.         my $html = "<option value=\"-1\" selected style=\"color: red\">Seleccione docente</option>\n";
  45.   return ( $html, "<select name=\"es\" class=\"unamed2\"disabled >" )  if( $depto == -1 );
  46.        
  47.         $dbh->{"conectar"}(); #$dbh1->{"conectar"}();
  48.        
  49.   #obtenemos los docentes de un departamento
  50.   my ( $result, $rData, $j, $html_miembros, $a1, $a2, $no );
  51.   ( $result, $rData ) =  &leer_de( $dbh->{"handle"} #$dbh1->{"handle"}
  52.                                  , { "FROM" => "Investigadores" #"miembros"
  53.                                                                                                                  , "SELECT" => "Id, Apellido1, Apellido2, Nombre" #"id, apellido1, apellido2, nombre"
  54.                                                                                                                                    , "WHERE" => "Cod_Departamento = '$depto'" #"departamento = '$depto'"
  55.                                                                                                                                    , "ORDERBY" => "Apellido1, Apellido2, Nombre" #"apellido1, apellido2, nombre"
  56.                                                                                                                                    }
  57.                                  );
  58.  
  59.   return ( $html, "<select name=\"miembros\" class=\"unamed2\"disabled >" )  if( $result == 0 );
  60.   for ($j = 0; $j < $result; $j++ )
  61.   {
  62.           $a1 = ucfirst $rData->[$j][1];
  63.                 $a2 = ucfirst $rData->[$j][2];
  64.                 $no = ucfirst $rData->[$j][3];
  65.           $html .= <<EOF;
  66. <option value="$rData->[$j][0]">$a1 $a2, $no</option>
  67. EOF
  68. ;
  69.   }
  70.        
  71.         $dbh->{"desconectar"}(); #$dbh1->{"desconectar"}();
  72.        
  73.         return ( $html, " <select name=\"miembros\" class=\"unamed2\"disabled >" );
  74. }
  75.  
  76.  
  77.  
  78.  
  79. content-type: text/html\n\n
  80. <html>
  81. <head>
  82. <script language="JavaScript">
  83. <!--
  84. $savefunction
  85.  
  86. function validarSeleccion( s )
  87. {
  88.   if( s.options[s.selectedIndex].value != -1 )
  89.         {
  90.                 document.formulario.submit();
  91.         }
  92. }
  93.  
  94.  
  95. function cerrarForm()
  96. {
  97.         if( top.document.getElementById('fBusqueda') )
  98.         {
  99.     top.document.getElementById('fBusqueda').style.display = 'none';
  100.         }
  101. }
  102.  
  103. //-->
  104. </script>
  105. <style type="text/css">
  106. <!--
  107. .mio {  background-color: #CAE4FF; font-family: Arial, Helvetica, sans-serif; font-size: 9px}
  108. .unamed2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-weight: ligther; color: #333399}
  109. .unnamed1 {  background-color: #D5D5FF; font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: normal; color: #333399}
  110. body {margin-top: 0px; margin-left: 0px}
  111.  
  112. -->
  113. </style>
  114.  
  115. </head>
  116.  
  117. <body bgcolor="#F1F4F5" onLoad="javascript&#058;document.formulario.grupo.value=top.document.formu.cod_grupo.value;">
  118.   <form name="formulario" method="post" action="viewselect.cgi">
  119.           <INPUT type="hidden" name="grupo" value="">
  120.         <center>
  121.     <TABLE cellpadding="0" cellspacing="0" width="400">
  122.       <tbody>
  123.                           <tr>
  124.            <td height="9" width="9"><img src="/servicios/ui/grupos/imagenes/es_se.bmp"></td>
  125.            <td background="/servicios/ui/grupos/imagenes/es_ls.bmp"></td>
  126.            <td width="9"><img src="/servicios/ui/grupos/imagenes/es_sd.bmp"></td>
  127.         </tr>
  128.                 <tr>
  129.                   <td style="background-repeat: repeat-y;" background="/servicios/ui/grupos/imagenes/es_le.bmp"></td>
  130.                   <td bgcolor="#f0f0f0">
  131.                                                                           <div align="justify">
  132. <!-- -->
  133.     <TABLE cellpadding="0" cellspacing="0" width="350">
  134.       <tbody>
  135.                           <tr>
  136.                                   <td nowrap>
  137.     <select name="deptos" class="unamed2" >
  138.                   $departamentos
  139.     </select>
  140.         <FONT face="Verdana, Arial, Helvetica, sans-serif" color="#990000" size="-1" class="unamed2" display:none>
  141.                                                                    <LABEL FOR="txtEsMiembro">Miembro:</LABEL>
  142.                                                                  </FONT>
  143.                                        
  144.                              
  145.     $miembros_disabled
  146.                   $option_miembros
  147.     </select>
  148.                         <select name="txtEsMiembro" class="unamed2">       
  149.                                $esmiembro
  150.                                            $no_miemb
  151.                  </select>                     
  152.                                                                          
  153.                           <input name="button2" id="button"
  154.                                        style="border: 0px none ; background-image: url(/servicios/ui/grupos/imagenes/borde_grande.jpg); font-weight: bold;  font-size: 7px;
  155.                                                                color: rgb(102, 103, 102); width: 65px; background-repeat: no-repeat; height: 20px;"
  156.                                                          onclick="cerrarForm();"
  157.                                                          value="Cancelar"
  158.                                                          size="31"
  159.                                                          type="reset">
  160.        
  161.                 </td>
  162.         </tr>
  163.       </tbody>
  164.     </TABLE>
  165. <!-- -->
  166.                     </div>
  167.                                                                         </td>
  168.                   <td style="background-repeat: repeat-y;" background="/servicios/ui/grupos/imagenes/es_ld.bmp"></td>
  169.         </tr>
  170.         <tr>
  171.                   <td height="9" width="9"><img src="/servicios/ui/grupos/imagenes/es_ie.bmp"></td>
  172.                   <td background="/servicios/ui/grupos/imagenes/es_li.bmp"></td>
  173.                   <td width="9"><img src="/servicios/ui/grupos/imagenes/es_id.bmp"></td>
  174.         </tr>
  175.       </tbody>
  176.     </TABLE>
  177.   </center>
  178. </form>
  179. </body>
  180. </html>
  181. EOF
  182. ;
  183.  
  184.         return $_;
  185. }
Coloreado en 0.005 segundos, usando GeSHi 1.0.8.4
gonzalos
Perlero nuevo
Perlero nuevo
 
Mensajes: 77
Registrado: 2009-11-27 05:47 @283
Arriba

Re: Desplegable dependiente

Notapor explorer » 2017-01-28 18:23 @807

Hace poco tuve que hacer algo parecido. La solución es tener una función en JavaScript a la que se llama cada vez que ocurre un cambio en alguno de los tres selectores, y dentro de esa función se comprueba si los tres selectores contienen al menos un elementos seleccionado.

Si todo es correcto, hace aparecer un botón para que el usuario confirme que quería almacenar esa combinación en la base de datos, y llama una petición Ajax al servidor para que la procese.

Y si no, vuelve a esconder el botón.
JF^D Perl programming & Raku programming. Grupo en Telegram: https://t.me/Perl_ES
Avatar de Usuario
explorer
Administrador
Administrador
 
Mensajes: 14480
Registrado: 2005-07-24 18:12 @800
Ubicación: Valladolid, España
Arriba

Re: Desplegable dependiente

Notapor gonzalos » 2017-01-30 06:18 @304

Hola, explorer.

Muchas gracias. Me ha sonado a chino, ¡ja,ja,ja,ja! Voy a ver si encuentro algo en Internet, porque de JavaScript no tengo ni la más remota idea.

Saludos,
Gonzalo
gonzalos
Perlero nuevo
Perlero nuevo
 
Mensajes: 77
Registrado: 2009-11-27 05:47 @283
Arriba

Re: Desplegable dependiente

Notapor explorer » 2017-01-30 16:00 @708

Pues... yo que tú, me haría un par de cursos intensivos de JavaScript y JQuery, porque hoy en día no se puede encontrar un buen puesto de trabajo sin saber al menos un poquito de JavaScript.

Nuestro amado líder, Larry Wall, lo recomienda:

JF^D Perl programming & Raku programming. Grupo en Telegram: https://t.me/Perl_ES
Avatar de Usuario
explorer
Administrador
Administrador
 
Mensajes: 14480
Registrado: 2005-07-24 18:12 @800
Ubicación: Valladolid, España
Arriba

Re: Desplegable dependiente

Notapor gonzalos » 2017-01-31 04:21 @223

Bueno, digamos que hoy no se puede encontrar un buen puesto de trabajo... a secas.

Sí, tengo que mirarme algo, porque ando como pez fuera del agua. Ya podría nuestro amado líder pasarme un poquito de sus conocimientos :)

Saludos,
Gonzalo.
gonzalos
Perlero nuevo
Perlero nuevo
 
Mensajes: 77
Registrado: 2009-11-27 05:47 @283
Arriba

Re: Desplegable dependiente

Notapor gonzalos » 2017-01-31 08:58 @415

Bueno, he hecho un apaño para que no se envíen los datos hasta que no se pulse el botón "aceptar".

Sintáxis: [ Descargar ] [ Ocultar ]
Using perl Syntax Highlighting
  1.     "#!C:\xampp\perl\bin\perl.exe"
  2.      
  3.     content-type: text/html\n\n<html><head>
  4.     <script><!--
  5.     function f()
  6.     {
  7.        top.document.formu.action='grupox.cgi#docentes';
  8.             top.document.formu.cache.value= (new Date()).getTime();
  9.             top.document.formu.submit();
  10.     }
  11.     //--></script></head><body onLoad="javascript&#058;f();"></body></html>
  12.     EOF
  13.     ;
  14.            
  15.     sub opciones()
  16.     {
  17.       my ( $includeDep, $selected ) = @_;
  18.             my $html = ($selected eq "")?"<option value=\"-1\" selected style=\"color: red\">Seleccione departamento/instituto</option>\n":"";
  19.             foreach $Depto ( @$includeDep )
  20.             {
  21.               if( $selected == $Depto->[0] )
  22.                     {
  23.               $html .= <<EOF;
  24.     <option selected value="$Depto->[0]" style=\"color: white\">$Depto->[2]</option>
  25.    EOF
  26.    ;
  27.                    }
  28.                    else
  29.                    {
  30.              $html .= <<EOF;
  31.    <option value="$Depto->[0]">$Depto->[2]</option>
  32.    EOF
  33.    ;
  34.        }
  35.            }
  36.            return $html;
  37.    }                                                                              
  38.    
  39.    
  40.    
  41.    sub miembros()
  42.    {
  43.      my $depto = shift;
  44.            my $html = "<option value=\"-1\" selected style=\"color: red\">Seleccione docente</option>\n";
  45.       return ( $html, "<select name=\"es\" class=\"unamed2\"disabled >" )  if( $depto == -1 );
  46.            
  47.             $dbh->{"conectar"}(); #$dbh1->{"conectar"}();
  48.            
  49.       #obtenemos los docentes de un departamento
  50.       my ( $result, $rData, $j, $html_miembros, $a1, $a2, $no );
  51.       ( $result, $rData ) =  &leer_de( $dbh->{"handle"} #$dbh1->{"handle"}
  52.                                      , { "FROM" => "Investigadores" #"miembros"
  53.                                                                                                                      , "SELECT" => "Id, Apellido1, Apellido2, Nombre" #"id, apellido1, apellido2, nombre"
  54.                                                                                                                                        , "WHERE" => "Cod_Departamento = '$depto'" #"departamento = '$depto'"
  55.                                                                                                                                        , "ORDERBY" => "Apellido1, Apellido2, Nombre" #"apellido1, apellido2, nombre"
  56.                                                                                                                                        }
  57.                                      );
  58.      
  59.       return ( $html, "<select name=\"miembros\" class=\"unamed2\"disabled >" )  if( $result == 0 );
  60.       for ($j = 0; $j < $result; $j++ )
  61.       {
  62.               $a1 = ucfirst $rData->[$j][1];
  63.                     $a2 = ucfirst $rData->[$j][2];
  64.                     $no = ucfirst $rData->[$j][3];
  65.               $html .= <<EOF;
  66.     <option value="$rData->[$j][0]">$a1 $a2, $no</option>
  67.     EOF
  68.     ;
  69.       }
  70.            
  71.             $dbh->{"desconectar"}(); #$dbh1->{"desconectar"}();
  72.            
  73.             return ( $html, " <select name=\"miembros\" class=\"unamed2\"enabled >" );
  74.     }
  75.      
  76.      
  77.      
  78.      
  79.     content-type: text/html\n\n
  80.     <html>
  81.     <head>
  82.     <script language="JavaScript">
  83.     <!--
  84.     $savefunction
  85.      
  86.     function validarSeleccion( s )
  87.     {
  88.       if( s.options[s.selectedIndex].value != -1 )
  89.             {
  90.                     document.formulario.submit();
  91.             }
  92.     }
  93.      
  94.      
  95.     function cerrarForm()
  96.     {
  97.             if( top.document.getElementById('fBusqueda') )
  98.             {
  99.         top.document.getElementById('fBusqueda').style.display = 'none';
  100.             }
  101.     }
  102.      
  103.     //-->
  104.     </script>
  105.     <style type="text/css">
  106.     <!--
  107.     .mio {  background-color: #CAE4FF; font-family: Arial, Helvetica, sans-serif; font-size: 9px}
  108.     .unamed2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-weight: ligther; color: #333399}
  109.     .unnamed1 {  background-color: #D5D5FF; font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: normal; color: #333399}
  110.     body {margin-top: 0px; margin-left: 0px}
  111.      
  112.     -->
  113.     </style>
  114.      
  115.     </head>
  116.      
  117.     <body bgcolor="#F1F4F5" onLoad="javascript&#058;document.formulario.grupo.value=top.document.formu.cod_grupo.value;">
  118.       <form name="formulario" method="post" action="viewselect.cgi">
  119.               <INPUT type="hidden" name="grupo" value="">
  120.             <center>
  121.         <TABLE cellpadding="0" cellspacing="0" width="400">
  122.           <tbody>
  123.                               <tr>
  124.                <td height="9" width="9"><img src="/servicios/ui/grupos/imagenes/es_se.bmp"></td>
  125.                <td background="/servicios/ui/grupos/imagenes/es_ls.bmp"></td>
  126.                <td width="9"><img src="/servicios/ui/grupos/imagenes/es_sd.bmp"></td>
  127.             </tr>
  128.                     <tr>
  129.                       <td style="background-repeat: repeat-y;" background="/servicios/ui/grupos/imagenes/es_le.bmp"></td>
  130.                       <td bgcolor="#f0f0f0">
  131.                                                                               <div align="justify">
  132.     <!-- -->
  133.         <TABLE cellpadding="0" cellspacing="0" width="350">
  134.           <tbody>
  135.                               <tr>
  136.                                       <td nowrap>
  137.         <select name="deptos" class="unamed2"onchange="javascript&#058;validarSeleccion(this);">
  138.                       $departamentos
  139.         </select>
  140.             <FONT face="Verdana, Arial, Helvetica, sans-serif" color="#990000" size="-1" class="unamed2" display:none>
  141.                          <LABEL FOR="txtEsMiembro">Miembro:</LABEL>
  142.              </FONT>
  143.                                            
  144.                                  
  145.         $miembros_disabled
  146.                       $option_miembros
  147.         </select>
  148.                             <select name="txtEsMiembro" class="unamed2"onchange="javascript&#058;validarSeleccion(this);">      
  149.                                    $esmiembro
  150.                                                $no_miemb
  151.                      </select>                    
  152.                               <input name="button1" id="button1"style="border: 0px none ; background-image: url(/servicios/ui/grupos/imagenes/borde_grande.jpg); font-weight: bold; font-size: 7px;color: rgb(102, 103, 102); width: 65px; background-repeat: no-repeat; height: 20px;"
  153.                                                                                 onclick="return;$savecall"
  154.                                                                                 value="Aceptar"
  155.                                                                                 size="31"
  156.                                                                                 type="submit">                                                 
  157.                               <input name="button2" id="button"
  158.                                            style="border: 0px none ; background-image: url(/servicios/ui/grupos/imagenes/borde_grande.jpg); font-weight: bold;  font-size: 7px;
  159.                                                                   color: rgb(102, 103, 102); width: 65px; background-repeat: no-repeat; height: 20px;"
  160.                                                              onclick="cerrarForm();"
  161.                                                              value="Cancelar"
  162.                                                              size="31"
  163.                                                              type="reset">
  164.            
  165.                     </td>
  166.             </tr>
  167.           </tbody>
  168.         </TABLE>
  169.     <!-- -->
  170.                         </div>
  171.                                                                             </td>
  172.                       <td style="background-repeat: repeat-y;" background="/servicios/ui/grupos/imagenes/es_ld.bmp"></td>
  173.             </tr>
  174.             <tr>
  175.                       <td height="9" width="9"><img src="/servicios/ui/grupos/imagenes/es_ie.bmp"></td>
  176.                       <td background="/servicios/ui/grupos/imagenes/es_li.bmp"></td>
  177.                       <td width="9"><img src="/servicios/ui/grupos/imagenes/es_id.bmp"></td>
  178.             </tr>
  179.           </tbody>
  180.         </TABLE>
  181.       </center>
  182.     </form>
  183.     </body>
  184.     </html>
  185.     EOF
  186.     ;
  187.      
  188.             return $_;
  189.     }
  190.  
Coloreado en 0.005 segundos, usando GeSHi 1.0.8.4


Un saludo,
Gonzalo.
gonzalos
Perlero nuevo
Perlero nuevo
 
Mensajes: 77
Registrado: 2009-11-27 05:47 @283
Arriba
Publicar una respuesta

Volver a JavaScript

¿Quién está conectado?

Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 0 invitados

Powered by phpBB® Forum Software © phpBB Group
Traducción al Español Mexicano por nextgen en colaboración con phpbb-es.com
phpBB SEO
Advertisements by Advertisement Management