Eventos con checkbox Lo que necesito hacer es:
Después de haber obtenido los resultados de una consulta en php, se agregan casillas de verificación a ciertos campos de la tabla.
Quiero que haciendo un clic en cualquiera de las casillas, se haga el correspondiente update a la base de datos cambiando el estado de esa variable.
No sé cómo empezar.
Ya tengo los resultados y las casillas se agregan bien, pero no sé cómo seguir.
Ayuda por favor.
El código de mi página buscar-certificado.php es el siguiente y espero que ayude a pensar la solución.
Código PHP:
<!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=utf-8" />
<title>Resultados de consulta de certificados</title>
<link href="plantilla_estilo.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon"
<!--<script language="JavaScript" type="text/javascript" src="js/codigo.js"></script> -->
<style type="text/css">
<!--
.Estilo1 {
color: #CC6600;
font-weight: bold;
}
-->
</style>
<script type="text/javascript">
/*function actualizarpagina (checkbox) {
//Location: buscar-certificado.php;
//document.getElementById('campoOculto').value = val;
//document.forms[0].submit();
if (checkbox.checked) {
alert ("The check box is checked.");
}
else {
alert ("The check box is not checked.");
}
}*/
function seleccionaTR(elemento) {
ele = elemento;
while (ele.tagName != "TR") {ele = ele.parentNode;}
if (ele.style.backgroundColor != "#FE9A2E") { // #FE9A2E color naranja
ele.style.backgroundColor = "#FE9A2E";
for (i = 0, celdas = ele.getElementsByTagName("TD"), total = celdas.length; i < total; i ++)
if (celdas[i].getElementsByTagName("SPAN").length > 0) {
yo = celdas[i].getElementsByTagName("SPAN")[0];
contenido = yo.innerHTML; //inner sirve para "escribir" dentro de un elemento HTML
//nuevo = document.createElement("input");
//nuevo.setAttribute("type", "text");
//nuevo.value = contenido;
//yo.parentNode.replaceChild(nuevo, yo);
if (i == celdas.length - 1) {
cambiar = document.createElement("button"); //creo el botón
cambiar.innerHTML = "cambiar"; //lo agrego a la celda
yo.parentNode.appendChild(cambiar);
cambiar.onclick = cambiarTR;
}
}
} else alert("fila seleccionada")
}
function cambiarTR(e) {
if (window.event) elemento = event.srcElement;
else elemento = e.target;
ele = elemento;
while (ele.tagName != "TR") {ele = ele.parentNode;}
elemento.parentNode.removeChild(elemento);
ele.style.backgroundColor = "#D0F5A9";
for (i = 0, celdas = ele.getElementsByTagName("TD"), total = celdas.length; i < total; i ++)
if (celdas[i].getElementsByTagName("INPUT")[0].getAttribute("type") == "text") {
yo = celdas[i].getElementsByTagName("INPUT")[0];
contenido = yo.value;
nuevo = document.createElement("span");
nuevo.appendChild(document.createTextNode(contenido));
yo.parentNode.replaceChild(nuevo, yo);
}
}
</script>
</head>
<body>
<div id="plantilla_wrapper">
<div id="plantilla_header">
<div id="site_title">
<h1><a href="index.php"><img src="images/logo2.png" alt="logo" width="387" height="44" border="0" /><span>Módulo de consultas</span></a></h1>
</div> <!-- end of site_title -->
</div> <!-- end of header -->
<div id="plantilla_main"><span class="main_top"></span>
<p class="welcome_text"><span class="fl_img"><img src="images/logo_escuela.png" alt="Our services" width="186" height="181" /></span><span class="Estilo1">"Creciendo, Trabajando, Capacitando... "</span></p>
<div class="col_w620 float_r">
<h2>Resultados de la búsqueda</h2>
<div class="image_wrapper fl_img"><img src="images/lupa.png" alt="lupa" width="90" height="90" /></div>
<p>
<?php
$apellido = $_POST['apellido'];
$link = mysql_connect("localhost","root","") or die ("no se ha podido conectar");
mysql_select_db("certificados") or die("Error al tratar de selecccionar esta base");
$sql = "SELECT * FROM certificado WHERE apellido = '$apellido'";
$result = mysql_query($sql,$link);
if (mysql_num_rows($result)){
echo "<table border = '1'";
echo "<tr>";
echo "<td><b> Código del certificado </b></td>";
echo "<td><b> Nombre </b></td>";
echo "<td><b> Apellido </b></td>";
echo "<td><b> Nombre del Curso/Taller </b></td>";
echo "<td><b> Fecha de realización </b></td>";
echo "<td><b> Retiró certificado </b></td>";
echo "</tr>";
while($row = mysql_fetch_object($result)) {
echo "<tr>";
echo "<td>$row->id_certificado</td>";
echo "<td>$row->nombre</td>";
echo "<td>$row->apellido</td>";
echo "<td>$row->curso</td>";
echo "<td>$row->fecha</td>";
//echo "<td>$row->dia</td>";
//echo "<td>$row->mes</td>";
//echo "<td>$row->año</td>";
if($row->retirado=="NO") {
//<form name="Modificar Registro" action="modificar-registro.php" method="post" >
//echo "<input type="submit" value="Retirado" name="boton_modificar"/>";
//echo "<td>$row->retirado</td>" +'<button onclic=""><font color="#cc0000"><strong>AQUI EL TEXTO</strong></font> </button>';
//echo "<td>$row->retirado <input name=\"casilla\" type=\"checkbox\" id=\"campoOculto\" value=\"si\" onclick=\"javascript:actualizarpagina(this);\" /></td>";
echo "<td>$row->retirado <input name=\"casilla\" type=\"checkbox\" id=\"campoOculto\" value=\"si\" onclick=\"seleccionaTR(this)\" /></td>";
//</form>
} else {
echo "<td>$row->retirado</td>";
}
echo "</tr>";
}
echo "</table>";
}else
echo "No se ha encontrado ningún registro.";
mysql_free_result($result);
mysql_close($link);
?>
</p>
<div class="button float_r"><a href="index.php">Volver...</a></div>
</div>
<div class="cleaner"></div>
</div> <!-- end of main -->
<div id="plantilla_main_bottom"></div> <!-- end of main -->
<div id="plantilla_footer"><a href="http://www.wix.com/escuelavirtualcat/escuela" target="_parent">Escuela de Capacitación Judicial</a> | por Yorch-Tecno </div>
<!-- end of plantilla_footer -->
</div> <!-- end of wrapper -->
</body>
</html> Lo que necesito es que lo agregue y que haciendo clic en el botón se actualicen los cambios en la base de datos.
