Foro - Perl en Español

La comunidad de programadores en Perl de habla hispana.
http://perlenespanol.com/foro/

Desplegable dependiente

http://perlenespanol.com/foro/desplegable-dependiente-t9358.html

Página 1 de 1

Desplegable dependiente

NotaPublicado: 2017-01-25 04:58 @249
por gonzalos
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

Re: Desplegable dependiente

NotaPublicado: 2017-01-25 10:19 @472
por explorer
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.

Re: Desplegable dependiente

NotaPublicado: 2017-01-27 07:16 @344
por gonzalos
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.007 segundos, usando GeSHi 1.0.8.4

Re: Desplegable dependiente

NotaPublicado: 2017-01-28 18:23 @807
por explorer
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.

Re: Desplegable dependiente

NotaPublicado: 2017-01-30 06:18 @304
por gonzalos
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

Re: Desplegable dependiente

NotaPublicado: 2017-01-30 16:00 @708
por explorer
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:

Re: Desplegable dependiente

NotaPublicado: 2017-01-31 04:21 @223
por gonzalos
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.

Re: Desplegable dependiente

NotaPublicado: 2017-01-31 08:58 @415
por gonzalos
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.006 segundos, usando GeSHi 1.0.8.4


Un saludo,
Gonzalo.
Todos los horarios son UTC - 6 horas [ DST ]
Página 1 de 1
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/