Muestre checkbox cuando se seleccione item

[JeMaGa]

como puedo hacer para que se me presente un checkbox hasta que seleccione un item de la lista desplegable.

Código Javascript:

function Carga_file(){
 
//recibes el valor del select   
var ruta_file = document.getElementById("lista").value;
var dir = "archivos/"
 
  if(ruta_file == 0){
     return 0;
  }else{
     window.open(dir + ruta_file);
  }
 
}
 

Esta es la lista desplegable, la idea es que al seleccionar un archivo (item) se muestre un checkbox.

Código PHP:

echo "<select name='lista' id='lista' onchange='javascript:Carga_file()'>";                                             
        echo "<option value='0'>Seleccionar Documento</option>";    
              
            while($row_rs_query = mysql_fetch_assoc($result)){                                                        
                echo "<option value = '".$row_rs_query['Adjunto']."'>".$row_rs_query['Adjunto']."</option>";               
            }
 
        echo "</select>";
 

Gracias por toda la ayuda que me puedan brindar.

[Raziel_Ravenheart]

Primero una recomendación, no utilizar javascript intrusivo, o sea ese que se pone directamente en la etiqueta de apertura del elemento, aquí:

<select name='lista' id='lista' onchange='javascript:Carga_file()'>

Retirar el atributo "onchange='javascript:Carga_file()'", el resto está bien.

1. Detectar el evento load del objeto window
2. Agregar un escucha de eventos al select
3. Utilizar el objeto evento recibido por el escucha (listener) del select para mostrar el checkbox.

Código Javascript:

window.onload = function ()
{
    document.getElementById('lista').addEventListener( "change", carga_file, false); 
    /* 
        Por ahora solo enfoquémonos en los 2 primeros parámetros del método addEventListener
        El primero es el evento que se quiere detectar
        El segundo, la referencia a la función que se quiere ejecutar
        Ojo: El nombre de la función va sin paréntesis, por que solo se está asignando.
        Si se agregan los paréntesis, lo que hace es ejecutar la función apenas lee esa línea de código
    */  
}
 
function Carga_file (evt) // evt es una variable mágica que se recibe al apenas se ejecuta el evento, el navegador la "crea"
{
     var select = evt.target;
     /* 
     evt.target, nos devuelve una referencia al elemento que activó el evento
     en este caso el select lista, y es igual a hacer lo siguiente
     var select = document.getElementById("lista");
     */
 
    var ruta_file = select.value
    // es lo mismo que: var ruta_file = document.getElementById("lista").value;
    
    var dir = "archivos/";
 
 
    //Aquí van las variables que van a guardar las referencias a los otros elementos
    var br = document.createElement('br');
    var checkbox = document.createElement('input');
    var  label = document.createElement('label')
 
    checkbox.type = "checkbox"
    checkbox.value = ruta_file; //Supongo que este es el valor que se va a colocar al checkbox, pero puede ser cualquier otro
 
    label.innerHTML = "Descargar Archivo";
 
    /*
    Ahora solo falta colocar el salto de línea, el checkbox y el label en la página, pero como no conozco en donde está posicionado el elemento
    que los contiene, simplemente voy a tomar el elemento padre donde está el select, y los voy a añadir ahí;
    */
 
    var contenedor = select.parentNode;
     
    parentNode.appendChild( br );
    parentNode.appendChild( checkbox );
    parentNode.appendChild( label );
 
    if(ruta_file == 0){
        return 0;
    }else{
       window.open(dir + ruta_file);
    } 
}
 

El resto del código y los demás arreglos van por tu cuenta.

Exitos!

[JeMaGa]

Gracias por tu ayuda pero tengo una pregunta si quito "onchange='javascript:Carga_file()'" como llamo a la funcion? que pena la molestia

[Raziel_Ravenheart]

En el código javascript que te dejé, en la línea 3, cuando se añade el escucha del evento change, ahí es donde se define que se quiere llamar esa función. Revísa bien esa línea y te vas a dar cuenta que está todo ahí.

Si sigues utilizando los eventos en las etiquetas, en un futuro vas a tener un rato muy difícil depurando el código, si hay errores, es mejor que aprendas a utilizar el método
addEventListener, que vale para casi cualquier tipo de nodo en HTML.

[JeMaGa]

No fuciona ni me abre el archivo, ni me muestra el checkbox?

[JeMaGa]

que pena es que soy un poco lenta para el javascript :p

[Raziel_Ravenheart]

Lo que sucede es que ese ejemplo es genérico, necesitaría ver todo el código tanto html, como javascript y php que tienes, para saber cual es el error, aunque una buena práctica es utilizar un depurador para saber que errores está generando, uno como el firebug te puede servir, es un addon del firefox.

[JeMaGa]

el codigo es muy largo y un poco enredado :/

[JeMaGa]

Ya depure en explore y el error lo muestra en esta linea

document.getElementById('lista').addEventListener( "change", Carga_file, false);

y el error dice 'document.getElementById(...)' is null or not an object

[Raziel_Ravenheart]

Si pusiste esa línea de código dentro del bloque:

Código Javascript:

window.onload = function ()
{
...
}
 

Si lo pones fuera, nunca lo va a reconocer, por que el navegador primero debe esperar a cargar generar todos los elementos de la página, y luego si reconocerlos por medio del document.getElementById.

En este caso se va a demorar algo más en generar la página por que está creando la lista con elementos traídos de la base de datos con la que estás trabajando.

Otra cosa es que aquí es donde vas a empezar y espero que lo hagas pronto, a odiar el internet explorer, por que hasta donde tengo entendido, en internet explorer para añadir eventos se usa es
attachEvent

Código Javascript:

document.getElementById('lista').attachEvent('onload', Carga_file);
 

mientras que en chrome, firefox, opera, y otros se usa es addEventListener

Código Javascript:

document.getElementById('lista').addEventListener('load', Carga_file, false);
 

Y no solo en esto, internet explorer se comporta de diferentes maneras con diferentes elementos del DOM en javascript, y también hace casi imposible poder realizar un buen diseño con CSS que sea compatible para todos.

Generalmente el que menos es compatible con los diseños de los otros navegadores es internet explorer, mientras que chrome, opera, safari, firefox y entre otros, se comportan relativamente igual.

Puede que sea cualquiera de las dos situaciones la que te esté generando ese error, pero te recomiendo mejor que depures en firefox o google chrome.

[Raziel_Ravenheart]

Jemaga, ahora estoy de buen genio, no importa que tan enredado esté el código, ya que he logrado desenredar códigos con 2 años de mantenimiento de diferentes personas, tanto en C++ y PHP.

Además mis ex compañeros del curso de webmaster del sena, a veces se enredaban con códigos de 10 líneas no más. Igual, si piensas con calma y buscas algunos ejemplos en internet vas a ver que es más fácil de lo que te imaginas.

Para lograr entender bien todo esto de los eventos, me tomó alrededor de 1 mes, ya que, estaba trabajando desde cero(0) en un proyecto sin saber casi nada de javascript, php y css.

[JeMaGa]

Si esa linea esta adentro del codigo

Código Javascript:

window.onload = function ()
{
    document.getElementById('lista').addEventListener( "change", Carga_file, false); 
}
 

pero no muestra nada en ningún explorador, voy a intentar organizar un poco el código y lo pongo para que por fa si puedes le eches una revisadita haber cual podría ser el error :)

[JeMaGa]

Este es el codigo Mostrar_Lista.php

Código PHP:

<?php
session_start();
 
<DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Strict / / EN" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
 
<!-- Se llama el archivo  estilo.css, se encarga de manejar el estilo. -->
<link type="text/css" rel="stylesheet" href="estilo.css">
<head>
 
 
 
<!-- Se llama el archivo  js/Ajax.js este archivo contiene las funciones de validaciones -->
<script language="JavaScript" type="text/javascript" src="js/funciones.js"></script>
 
</head>
 
<body>
<form name="documento" action="Consul.php" method="post">
<?php
 
require("Conexion.php");
$codigo_area = $_SESSION['Area'];
$id = $_SESSION['Cod.Persona'];
$palabra = $_POST['clave'];
 
$consultaextra = "select `Cod.Doc` from `firma_conocimiento` where `Cod.Doc` like '%$clave%'"; 
$ejecutarextra = mysql_query($consultaextra,$Conexion) or die ('Error en la parte de la consulta extra '.mysql_error());
$conut = mysql_num_rows($ejecutarextra); 
 
if($conut == 1){
     
    $subconsulta = "select  d.`Codigo`, d.`Nombre`, d.`Adjunto`, ad.`Cod.Area`, d.`Version` from `datos` d inner join  area_documento ad on 
    d.`Codigo`= ad.`Cod.Doc` inner join `firma_conocimiento` fir on d.`Codigo`=fir.`Cod.Doc` where ad.`Cod.Area`= '$codigo_area' and d.`Codigo` 
    like '%$clave%' and `Verificacion`='' group by ad.`Cod.Doc` order by ad.`Cod.Doc`"; 
    $executable = mysql_query($subconsulta,$Conexion) or die('Error en la parte de la subconsulta '.mysql_error());
    
        echo '<script language="javascript">alert("Ya firmo el procedimiento!");</script>';
 
}else if($conut == 0){
 
$q_query = "select  d.`Codigo`, d.`Nombre`, d.`Adjunto`, ad.`Cod.Area`, d.`Version` from `datos` d inner join  area_documento ad on d.`Codigo`= ad.`Cod.Doc` where ad.`Cod.Area`= '$codigo_area' and d.`Codigo` like '%$clave%' group by ad.`Cod.Doc` order by ad.`Cod.Doc` asc";
$result = mysql_query($q_query,$Conexion) or die (mysql_error());
$cant_rows = mysql_num_rows($result);
 
    if($cant_rows > 0){
    ?>
        <center><h3>Escriba el codigo del procedimiento a leer: <?php                                              
        echo "<select name='lista' id='lista' >";                                             
        echo "<option value='0'>Seleccionar Documento</option>";    
              
            while($row_rs_query = mysql_fetch_assoc($result)){                                                        
                echo "<option value = '".$row_rs_query['Adjunto']."'>".$row_rs_query['Adjunto']."</option>";               
            }
 
        echo "</select>";
 
    }else if($cant_rows == 0) {
        echo "<center><h3>No se encontraron resultados</h3></center>";
    }
        
}else {
    $select = "select  d.`Codigo`, d.`Nombre`, d.`Adjunto`, ad.`Cod.Area`, d.`Version` from `datos` d inner join  area_documento ad on d.`Codigo`           = ad.`Cod.Doc` inner join `firma_conocimiento` fir on d.`Codigo`=fir.`Cod.Doc` where ad.`Cod.Area`= 13 and d.`Codigo` like '%%' and             `Verificacion`='' group by ad.`Cod.Doc` order by ad.`Cod.Doc`";
    $executeSelect = mysql_query($select,$Conexion) or die ('Error en la parte de $select '.mysql_error());
    
    echo '<script language="javascript">alert("Debe escribir algun codigo de procedimiento");</script>';
    
}
?>
 
</form>
</body>
 

y el archivo funciones.js

es el mismo script que pusiste tu gracias por toda la ayuda

[Raziel_Ravenheart]

Mira, por fin pude volver, te organicé un poco el código y te hice unos comentarios, para que los leas. Por lo que veo ya están utilizando consultas algo complejas en mysql y eso me parece muy bien.

Código PHP:

<?php
session_start();
// Después del session_start() te hace falta cerrar la etiqueta de php
?> 
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8" />
        <!-- Se llama el archivo  estilo.css, se encarga de manejar el estilo. -->
        <link type="text/css" rel="stylesheet" href="estilo.css">
 
        <!-- Se llama el archivo  js/Ajax.js este archivo contiene las funciones de validaciones -->
        <script language="JavaScript" type="text/javascript" src="js/funciones.js"></script>        
    </head>
 
    <body>
        <form name="documento" action="Consul.php" method="post">
        <?php 
        require("Conexion.php");
        $codigo_area = $_SESSION['Area'];
        $id = $_SESSION['Cod.Persona'];
        $palabra = $_POST['clave'];
        
        /*
            En la siguiente variable, $consultaextra, estás utilizando la variable $clave para hacer una búsqueda
            de documentos.  Donde la declaraste? o es la variable $palabra la que necesitas poner ahí, la cual
            es lo mismo que $_POST['clave']
        */ 
        $consultaextra = "select `Cod.Doc` from `firma_conocimiento` where `Cod.Doc` like '%$clave%'"; 
        $ejecutarextra = mysql_query($consultaextra,$Conexion) or die ('Error en la parte de la consulta extra '.mysql_error());
        $conut = mysql_num_rows($ejecutarextra); 
 
        if($conut == 1){
     
            $subconsulta = "select d.`Codigo`, d.`Nombre`, d.`Adjunto`, ad.`Cod.Area`, d.`Version` 
            from `datos` d 
            inner join  area_documento ad 
            on d.`Codigo`= ad.`Cod.Doc` 
            inner join `firma_conocimiento` fir on d.`Codigo`=fir.`Cod.Doc` 
            where ad.`Cod.Area`= '$codigo_area' and d.`Codigo` like '%$clave%' and `Verificacion`='' 
            group by ad.`Cod.Doc` 
            order by ad.`Cod.Doc`"; 
            
            $executable = mysql_query($subconsulta,$Conexion) or die('Error en la parte de la subconsulta '.mysql_error());
    
            echo '<script language="javascript">alert("Ya firmo el procedimiento!");</script>';
 
        }else if($conut == 0){
 
            $q_query = "select  d.`Codigo`, d.`Nombre`, d.`Adjunto`, ad.`Cod.Area`, d.`Version` 
            from `datos` d 
            inner join  area_documento ad 
            on d.`Codigo`= ad.`Cod.Doc` 
            where ad.`Cod.Area`= '$codigo_area' and d.`Codigo` like '%$clave%' 
            group by ad.`Cod.Doc` 
            order by ad.`Cod.Doc` asc";
            
            $result = mysql_query($q_query,$Conexion) or die (mysql_error());
            $cant_rows = mysql_num_rows($result);
 
            if($cant_rows > 0){
        ?>
                <center><h3>Escriba el codigo del procedimiento a leer: 
                <?php                                              
                echo "<select name='lista' id='lista' >";                                             
                echo "<option value='0'>Seleccionar Documento</option>";    
              
                while($row_rs_query = mysql_fetch_assoc($result)){                                                        
                    echo "<option value = '".$row_rs_query['Adjunto']."'>".$row_rs_query['Adjunto']."</option>";               
                } 
                echo "</select>";
 
            }else if($cant_rows == 0) {
                echo "<center><h3>No se encontraron resultados</h3></center>";
            }
        
        }else {
            /*
            En la sentencia where de esta consulta, cuando consultad por d.`Codigo` es por cualquiera o te hace falta una
            variable?
            */
            $select = "select  d.`Codigo`, d.`Nombre`, d.`Adjunto`, ad.`Cod.Area`, d.`Version` 
            from `datos` d 
            inner join  area_documento ad 
            on d.`Codigo` = ad.`Cod.Doc` 
            inner join `firma_conocimiento` fir 
            on d.`Codigo`=fir.`Cod.Doc` 
            where ad.`Cod.Area`= 13 and d.`Codigo` like '%%' and `Verificacion`='' 
            group by ad.`Cod.Doc` 
            order by ad.`Cod.Doc`";
            
            $executeSelect = mysql_query($select,$Conexion) or die ('Error en la parte de $select '.mysql_error());
    
            echo '<script language="javascript">alert("Debe escribir algun codigo de procedimiento");</script>';
        }
        ?> 
        </form>
    </body>
</html>
 

Por el lado del javascript también le eliminé los comentarios, que puedes leer en el primer comentario en que los dejé, trata de revisar que el nombre de la función "Carga_file", este bien, tanto dentro del window.onload, como cuando se declara la misma función, o sea que la letra "C" sea mayúscula y el resto minúscula.

También me di cuenta que había cometido un error en la función carga file, donde declaro la variable contenedor, en las lineas siguiente va es esa variable que es una referencia al formulario, y no la palabra
"parentNode", aquí está corregido:

Código Javascript:

window.onload = function ()
{
    document.getElementById('lista').addEventListener( "change", Carga_file, false); 
}
 
function Carga_file (evt)
{
    var select = evt.target;    
    var ruta_file = select.value   
    var dir = "archivos/";    
    var br = document.createElement('br');
    var checkbox = document.createElement('input');
    var label = document.createElement('label')
    var contenedor = select.parentNode;
 
    checkbox.type = "checkbox"
    checkbox.value = ruta_file;  
    label.innerHTML = "Descargar Archivo";
     
    contenedor.appendChild( br );
    contenedor.appendChild( checkbox );
    contenedor.appendChild( label );
 
    if(ruta_file == 0){
        return 0;
    }else{
       window.open(dir + ruta_file);
    } 
}
 

Por lo que ví tienes bien la consulta que carga el select, y el código debería por lo menos mostrarte el select sin ningún problema.

Trata de ejecutarlos y me dices que te aparece

[JeMaGa]

HOla oye gracias por tu ayuda, y si el select si me muestra pero al seleccionar un item se supone que me tiene que abrir un archivo pdf correspondiente al item elegido, y cuando seleccione el item me muestre el checkbox pero solo muestra el select que pena contigo Gracias por tu ayuda

[Raziel_Ravenheart]

Eso debe ser algún problema con el javascript, pero como no tengo la base de datos, y recrearla incluyendo los archivos, me quedaría un poco pesado, así que ahora si te toca ir haciendo las cosas paso por paso.

Ya intentaste correr la aplicación en google chrome o firefox, pero utilizando el depurador? Como te había dicho, para firefox te recomiendo instalar el firebug, pero para google chrome, puedes utilizar el que ya viene con el.

Para abrir el depurador, solo utilizas la tecla F12, luego recargas la página, escoges un elemento de la lista, y debe aparecer algún tipo de error en el depurador.

Puedes buscar en google, por que se da el error, y si no entiendes, me preguntas.

[JeMaGa]

Hola oye gracias por toda tu ayuda, este es el error que sale


Uncaught TypeError: Cannot call method 'addEventListener' of null
Uncaught TypeError: Cannot read property 'target' of undefined

[JeMaGa]

hay alguna posibilidad de desactivar un checkbox y que cuando seleccione un item me lo habilite? ;)

[Raziel_Ravenheart]

Pon el siguiente código dentro del bloque window.onload, y dime que te sale en el depurador, justo antes de document.getElementById('lista').addEventListener. .. :

Código Javascript:

var lista = document.getElementById('lista');
console.log(lista);
 

Debe mostrarte algo en la consola del depurador

[JeMaGa]

sale null?

[Raziel_Ravenheart]

Eso significa que no está reconociendo la lista, pero tu dices que si la muestra, y eso es lo que se me hace raro, por que cuando el window.onload se activa, es decir, cuando el evento load es disparado, es por que se han cargado todos los elementos en la página.

Cuando se muestra el select, se ve con todos los elementos que tienes en la base de datos?

[JeMaGa]

Hola si la lista se muestra tal cual con los elementos que necesito que muestre, te comento algo que me paso, esa funcion funciono en otro formulario, en el que tambien carga una lista, esta lista no carga archivos solo muestra los numeros de analisis no muestra como un link para tener acceso a los archivo no se si me hago entender.

el punto que no funciona en el formulario que necesito que funcione que es el que me abre los archivos en pdf

Gracias :)