ayuda con un div y jquery

killerzystem · #1 (**permalink**) 06/03/2011, 20:43

hola este es mi problema, intento crear un formulario en el cual pueda dar de alta grupos estos grupos tendrian un numero determinado de miembros que puede variar de 5 hasta 8 asi que de primera instancia he usado jquery para saber que valor ha sido seleccionado en el combo y mostrar el mismo numero de text en pantalla los cuales serian los espacios para capturar los nombres de los integrantes ahora quiero que al dar clic en alguno de estos combos los demas se desplieguen hacia abajo para crear mas campos mediante un div para poder capturar la direccion sexo etc de ese integrante el problema es que al crear los text mediante un for en el archivo que llamo con el jquery me parece que para poder recorrer los otros text el div tendria que estar contenido en ese mismo archivo pero al tratarlo de introduccir simplemente no me lo oculta y no entiendo por que es que no lo oculta si alguien pudiera ayudarme por favor.

a continuacion pongo mi codigo

principal

<!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>Documento sin título</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
</head>

<script>

function mostrardiv(a) {

div = document.getElementById(a);
div.style.display = '';

}

function cerrar() {

div = document.getElementById('flotante');

div.style.display='none';

}

</script>
<body>
<table width="80%" border="1" align="center" cellspacing="0">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="right"><input type="button" value="Regresar" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Nombre del Grupo:</td>
<td><input type="text" id="grpNombre" name="grpNombre" /></td>
</tr>
<tr>
<td>Numero de Integrantes:</td>
<td><select name="grpNumInt" id="grpNumInt">
<option value="0" selected="selected">Seleccione...</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select></td>
</tr>
<tr>
<td>Direccion Sitio de Reunion:</td>
<td><input type="text" id="grpSitio" name="grpSitio" /></td>
</tr>
<tr>
<td>N. Veces Incurrido en Mora:</td>
<td><input type="text" id="grpMora" name="grpMora" onfocus="mensaje()" /></td>
</tr>
<td> </td>
<td> </td>
</tr>
<td> </td>
<td><div id="personas"></div></td>
<tr>
<td> </td>
<td></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td align="right"><input type="submit" value="Dar Alta" /></td>
<td> </td>
</tr>
</table>
<script type="text/javascript">
//si el documento esta listo llamamos la funcion function()
$(document).ready(function(){
//si el objeto #grpNumInt sufrio algun cambio llamamos a la siguiente funcion
$('#grpNumInt').change(function(){
//obtenemos el value de la opcion seleccionada
var numero = $('#grpNumInt').val();
//llamamos al documento miembros.php
//enviamos la variable numero por el metodo get con el nombre num
$.get('miembros.php', { num: numero}, function(miembros){

$('#personas').html(miembros);
});
});
});
</script>



</body>
</html>

miembros.php

<?php

$miembros = $_GET['num'];

echo "<table>";
for($i=1;$i<=$miembros;$i++){
/*echo "<tr>";
echo "<td></td>";
echo "<td><input type=text onfocus=mostrardiv(".$i.") /></td>";
echo "</tr>";
echo "<div id=flotante".$i." style=display:none>";

echo "<td>";
echo "hola";
echo "</td>";*/?>

<tr>
<td></td>
<td><input type=text onfocus=mostrardiv(<?=$i; ?>) /></td>
</tr>
<div id="<?=$i; ?>" style="display:none">
<tr>
<td></td>
<td id="<?=$i; ?>">
<input type=text id="<?=$i; ?>" />
</td>
</tr>
</div>

<? }

echo "</table>";

tambien si alguien me dijera si ahi alguna forma de depurar que es lo que esta ocurriendo en codigo que es traido por jquery lo agradaceria mucho

de antemano gracias.