CheckBox Dinamicos

mixzplit · #1 (**permalink**) 22/12/2011, 11:04

Hola compañeros de Foros del Web, tengo un problema y se las comento a ver si me pueden ayudar.

Tengo un formulario Padre, en una parte tengo un boton donde me levanta un Pop-UP (Ventana Hijo), en esta ventana hijo se despliega una tabla con datos traidos de una BD, los datos son Tareas, y justo a lado coloque un checkbox que al seleccionar la idea es que se envien a una especie de variable o arreglo para luego enviar esos datos desde el formulario Padre hacia una tabla de mi BD.

Espero haberme explicado, dejo el codigo aqui:

Ventana Padre:

Código PHP:

  <?php 
session_start(); 
if(!isset($_SESSION['us_id'])){ 
header("Location: ../index.php");  
} else {  
$usuario=$_SESSION['us_id']; 
$admin=$_SESSION['us_tipo']; 
$fecha_actual=date("d-m-Y"); 
 
include("conexion.php"); 
include('scripts/funcion.php'); 
$conexion = new ControlBD(); 
$conexion->conectar(); 
$conexion->seleccionarBD(); 
 
$query = "select em_nombre, em_id from cgempresa ORDER BY em_nombre ASC";     
$result=$conexion->ejecutarQuery($query); 
 
$query1 = "select em_nombre, em_id from cgempresa ORDER BY em_nombre ASC";     
$result1=$conexion->ejecutarQuery($query1); 
 
?> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=latin1" /> 
<script type="text/javascript" src="Scripts/jquery-1.6.1.js"></script> 
<script type="text/javascript" src="Scripts/calendario_dw.js"></script> 
<script type="text/javascript" src="cargarCombos.js"></script> 
<link href="Style/calendario_dw-estilos.css" type="text/css" rel="STYLESHEET"> 
<link rel="stylesheet" href="Style/default.css" type="text/css" /> 
<link rel=stylesheet href="Style/menuH.css" type="text/css"> 
 
<script type="text/javascript"> 
$(document).ready(function(){ 
   $(".campofecha").calendarioDW(); 
}) 
 
function abrir(URL){ 
window.open(URL,"",'width=650,height=350,left=380,top=200,toolbar=no,scrollbars=yes,statusbar=no,menubar=no,resizable=no,Location=no,titlebar=no'); 
return false; 
} 
 
function agregaFila( id ) {  
var tabla = document.getElementById( id );  
var tbody = document.getElementById( tabla.id ).tBodies[0];  
var row = tbody.rows[0] .cloneNode( true );  
var id = 1;  
while( document.getElementById( tabla.id+'_fila_'+id ) ) {  
id++;  
 
}  
if (id<=17){  
row.id = tabla.id+'_fila_'+id;  
row.style.display = '';  
tbody.appendChild( row );  
}  
}  
 
function borraFila( fila ) {  
var id = fila.id;  
if( fila.parentNode.rows.length <= 2 ) return;  
document.getElementById( id ).parentNode.removeChild( document.getElementById(id) );  
}  
 
<body> 
<?php 
    include('menu.php'); 
?> 
<form name="form1" id="form1" method="post" action="logistico_BD.php" onSubmit="return validarform(); enviarDatosEmpleado();"> 
  <div class="centrado"> 
<table class="gestor" id="tablaUsuarios"> 
    <tr> 
         
    <tr> 
        <th colspan="4"><label class="labels">Control Logistico</label></th> 
    </tr> 
    <tr> 
        <th colspan="4"><label class="labels">Datos de Registro</label></th> 
    </tr> 
    <tr> 
        <th>Registro del dia Anterior</th> 
    </tr> 
    <tr> 
        <th>Empresa:</th> 
        <td><select name="empresa" id="empresa"  onchange="javascript:cargarSucursales();"> 
           <option value="null">---Seleccione---</option> 
<?      while($array=mysql_fetch_array($result)){ ?> 
        <option value="<?=$array['em_id']?>"><?=$array['em_nombre']?> 
           </option><? }?></select></td> 
        <th>Sucursal:</th> 
        <td><select name="sucursal" id="sucursal" onchange="javascript:cargarProyectos();"/> 
        <option value="null">---Seleccione---</option></select></td> 
    </tr> 
    <tr> 
        <th>Proyecto:</th> 
        <td><select name="proyecto" id="proyecto" onchange="javascript:cargarModulos();"/> 
           <option value="null">---Seleccione---</option></select></td> 
        <th>Modulo:</th> 
        <td><select name="modulo" id="modulo"  onchange="javascript:cargarTransacion();" /> 
           <option value="null">---Seleccione---</option></select></td> 
    </tr> 
    <tr> 
        <th>Transaccion:</th> 
        <td><select name="transacion" id="transacion"/> 
           <option value="null">---Seleccione---</option></select></td> 
        <th>Fecha Seleccionada:</th> 
        <td><input type="text" name="fecha_del_dia_anterior"  id="fecha_del_dia_anterior" class="campofecha" size="20" value="" readonly="readonly"/></td> 
    </tr> 
    <tr> 
        <th colspan="2">Hora de Salida:</th> 
        <td><input type="text" name="hora_de_salida1" id="hora_de_salida1" size="7" /></td> 
        <td><select style="text-align:center" name="hora_de_salida2" id="hora_de_salida2"> 
        <option value="0">---Seleccione---</option> 
        <option value="Am">AM</option> 
        <option value="PM">PM</option></select></td> 
    </tr> 
  
    <tr> 
        <th colspan="4"><label class="labels">Actividades Realizadas</label></th> 
     </tr> 
     <tr> 
          <th colspan="2">Agregar Tareas:</th> 
          <td colspan="2"><input class="submit" type="button" name="Agregar" value="Agregar" onclick="abrir('tareas.php');"/></td> 
    </tr> 
 
    <tr> 
        <th colspan="2">Status de Actividad:</th> 
        <th colspan="2">Observacion:</th> 
    </tr> 
    <tr> 
        <td colspan="2"><select style="text-align:center" name='statud_de_actividad' id='statud_de_actividad'> 
        <option value="seleccione">Seleccione</option> 
        <option value="En Proceso">En Proceso</option> 
        <option value="Procesado">Terminado</option></select></td> 
        <td><textarea name='observacion' id='observacion' cols="25" rows="1"></textarea></td> 
        <td><input class="submit" type="button" name="Eliminar" value="Eliminar" onClick="borraFila(this.parentNode.parentNode)"/></td>  
    </tr> 
    <tr>  
        <td><input type="hidden" name="MM_insert" value="f1" /></td> 
    </tr> 
    <tr> 
        <th colspan="4"><label class="labels">Registro del dia Actual</label></th> 
    <tr> 
        <th>Empresa:</th> 
        <td><select name="empresa1" id="empresa1"  onchange="javascript:cargarSucursales1();" /> 
          <option value="null">---Seleccione---</option> 
<?      while($array=mysql_fetch_array($result1)){ ?> 
           <option value="<?=$array['em_id']?>"><?=$array['em_nombre']?> 
        </option><? }?></select></td>   
        <th>Sucursal:</th> 
        <td><select name="sucursal1" id="sucursal1" onchange="javascript:cargarProyectos1();"/> 
        <option value="null">---Seleccione---</option></select></td> 
    </tr> 
    <tr>     
        <th>Proyecto:</th> 
        <td><select name="proyecto1" id="proyecto1" onchange="javascript:cargarModulos1();"/> 
        <option value="null">---Seleccione---</option></select></td>     
        <th>Modulo:</th> 
         <td><select name="modulo1" id="modulo1"  onchange="javascript:cargarTransacion1();" /> 
          <option value="null">---Seleccione---</option></select></td> 
    </tr> 
    <tr> 
        <th>Transaccion:</th> 
        <td><select name="transacion1" id="transacion1"/> 
           <option value="null">---Seleccione---</option></select></td> 
        <th>Fecha Seleccionada:</th> 
        <td><input type="text" name="fecha_del_dia_actual"  id="fecha_del_dia_actual" class="campofecha" size="20" value="<?= date('d-m-Y') ?>" readonly="readonly"/></td> 
    </tr> 
    <tr> 
        <th colspan="2">Hora de Llegada:</th> 
        <td><input type="text" name="hora_de_llegada1" id="hora_de_llegada1" size="7" /></td> 
        <td><select style="text-align:center" name="hora_de_llegada2" id="hora_de_llegada2"> 
        <option value="Seleccione">Seleccione</option> 
        <option value="AM">AM</option> 
        <option value="PM">PM</option></select></td> 
    </tr> 
    <tr> 
        <td class="center" colspan="2"><input class="submit" type="Submit" name="Guardar" size="30" value="Guarda"></td> 
        <td class="center" colspan="2"><input class="submit" type="reset" name="Borrar" size"30"></td> 
    </tr> 
</table> 
</div> 
</form> 
</body> 
</html> 
<?php } ?>

En la parte de Agregar Tareas esta el boton que me levanta el pop-up tareas.php.

Tareas.php

Código PHP:

  <?php 
session_start(); 
if(!isset($_SESSION['us_id'])){ 
header("Location: ../index.php");  
} else {  
$usuario=$_SESSION['us_id']; 
 
include("conexion.php"); 
     $conexion = new ControlBD(); 
     $conexion->conectar(); 
     $conexion->seleccionarBD(); 
      
$sql="SELECT * FROM cgtarea"; 
       
$trab=$conexion->ejecutarQuery($sql); 
?> 
<html> 
<head> 
<link rel="stylesheet" href="default.css" type="text/css" /> 
<script> 
function checkvalidate(checks) { 
    for (i = 0; lcheck = checks[i]; i++) { 
        if (lcheck.checked) { 
            return true; 
        } 
    } 
    return false; 
    } 
    var grupo = document.getElementById("hijo").taks; 
     if (checkvalidate(grupo)) { 
       alert("Por lo menos uno de los checkbox está marcado"); 
     } else { 
       alert("Ninguno de los checkbox está marcado"); 
     } 
   }      
</script> 
</head> 
<body> 
<style> 
a:link {text-decoration:none;color:#009;} 
a:visited {text-decoration:none;color:#900;} 
a:active {text-decoration:none;color:#ff0000;} 
a:hover {text-decoration:none;color:#009;font-weight:bold}  
</style> 
 
<form name="hijo" id="hijo"> 
<div align="center"> 
<table class="tablas"> 
    <tr> 
        <td colspan="2">Actividad</td>             
    </tr> 
    <? while($trabaj=mysql_fetch_array($trab)){ ?> 
    <tr> 
        <td><?=$trabaj['ta_descripcion']; ?></td> 
        <!--<td><a href="javascript:sel_empleado('<?=$trabaj['ta_descripcion']; ?>')">Agregar</a> </td>--> 
        <td><input name="taks" type="checkbox" value="<?=$trabaj['ta_id']; ?>" > 
    </tr> 
       <? } ?> 
       <td><input type="button" onClick="checkvalidate('<?=$trabaj['ta_id']; ?>')" value="enviar" > 
</table> 
</div> 
</form> 
</body> 
</html> 
<? } ?>

Le agregue un Script que encontre en la WIKI de Foros del Web pero no me funciono, no se que estare haciendo, quizas todo jeje

.

Bueno espero puedan ayudarme con esto, Saludos

el_quick · #2 (**permalink**) 22/12/2011, 11:32

Acabo de escribirte un ejemplo, espero que sea lo que buscabas...

guarda esto como test1.html

Código HTML:

Ver original<a id="_test" href="test2.html">Test</a>
<input type="text" id="_text1" />
<script language="javascript" type="text/javascript">
    document.getElementById("_test").onclick = function(){
        var popup = window.open(this.href, this.target, 'width=300, height=400');
        return false;
    }
</script>

y guarda este otro en la misma carpeta como test2.html

Código HTML:

Ver original<input type="text" id="_text2" />
<script language="javascript" type="text/javascript">
    document.getElementById("_text2").onkeyup = function(){
        opener.document.getElementById("_text1").value = this.value;
    }
</script>

Luego con el browser abre test1.html y haz click sobre el link "Test", cuando se abra el popup escribe en el textbox del popup y observa el textbox de la ventana padre.

Espero que te sirva,
Saludos!

mixzplit · #3 (**permalink**) 22/12/2011, 13:35

Hola el_quick gracias por tu respuesta.

El script funciona, yo este tipo de cosas la he logrado hacer, pero en este caso yo no quiero recibir los datos en un campo de texto, en mi caso, como el pop-up que abre muestra informacion de una BD, la tabla es dinamica y los campos CheckBox de igual manera, se mostraran N cantidad de CheckBox como tantos datos haya en la BD, no se si me explico.

La idea es que si seleccion 4 elementos con el CheckBox, yo pueda con un boton enviar esos datos a un arreglo de variables (quizas, es lo que pienso ahorita) y luego desde el form principal enviar todos los datos.

Saludos, espero se entiendo lo que intento hacer, gracias de nuevo por tu respuesta

el_quick · #4 (**permalink**) 22/12/2011, 14:28

Entonces puedes poner los checkbox y un botón en el popup y cuando le des click al botón recorrer todos los checkbox y enviar su "value" concatenado a un campo de tu formulario (puede ser hidden o como mejor te funcione).

Saludos!

mixzplit · #5 (**permalink**) 23/12/2011, 08:06

hola el_quick, gracias por tu respuesta, no lo habia visto de esa manera, pero como haria para que recorra todos lo check al darle al boton y solo me envie los value de los que estas en "cheked" y bueno como concatenar esos value.

Saludos

el_quick · #6 (**permalink**) 23/12/2011, 09:12

Código Javascript:

Ver original<div id="_container">
    <input type="checkbox" value="1" /><label>Opci&oacute;n 1</label><br />
    <input type="checkbox" value="2" /><label>Opci&oacute;n 2</label><br />
    <input type="checkbox" value="3" /><label>Opci&oacute;n 3</label><br />
    <input type="checkbox" value="4" /><label>Opci&oacute;n 4</label><br />
    <input type="checkbox" value="5" /><label>Opci&oacute;n 5</label><br />
    <input type="checkbox" value="6" /><label>Opci&oacute;n 6</label>
</div>
<input id="_test" type="submit" value="Test" />
<script language="javascript" type="text/javascript">
    document.getElementById("_test").onclick = function(){
        var r = "" ;
        var s = "" ;
        var inputs = document.getElementById("_container").getElementsByTagName("input") ;
        for(var i = 0 ; i < inputs.length ; i++){
            if(inputs[i].checked){
                r += s + inputs[i].value;
                s = "," ;
            }
        }
        alert(r);
    }
</script>

mixzplit · #7 (**permalink**) 23/12/2011, 12:51

Muchisimas gracias el_quick, te agradezco tu gran ayuda

Saludos