Mostrar/Ocultar n DIV con javascript. [Solucionado]

Iniciado por 1mpuls0, 12 Marzo 2012, 22:04 PM

0 Miembros y 2 Visitantes están viendo este tema.

Imprimir
Ir Abajo Páginas1
Acciones del Usuario

1mpuls0

12 Marzo 2012, 22:04 PM Ultima modificación: 13 Marzo 2012, 19:23 PM por Darhius
Hola.
En un select tengo opciones del 1 al 10, quiero que dependiendo de la cantidad seleccionada me muestre el contenido del div en misma cantidad.
He intentado y buscado pero no sé como hacerlo, si sabe como se lo agradeceré.

Modificado
Solo bastaba con unos ciclos.

Código (php) [Seleccionar]

<!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>Mostrar</title>
<script type="text/javascript">
function mostrar(num) {
for(i=1;i<=10;i++)
document.getElementById('canchas'+i).style.display='none';

if(num.value!=0){
for(i=1;i<=num;i++)
document.getElementById('canchas'+i).style.display='block';
}
}
</script>
</head>
<body>
<p>
 <select name="select" id="select" onchange="mostrar(this.selectedIndex)">
   <option value="0">Selecciona</option>
   <?php
   for($i=1;$i<=10;$i++){
 echo "<option value='$i'>$i</option>";
}
   ?>
 </select>
</p>
<p>&nbsp;</p>
<?php
for($i=1;$i<=10;$i++){
?>
<li class="tituloItem">
   <div id="canchas<?php echo $i;?>" style="display:none;" class="contenidoItem">
   <table width="200" border="0">
     <tr>
       <td>Cancha <?php echo $i;?></td>
       <td><input name="txtNombreCancha<?php echo $i;?>" type="text" id="txtNombreCancha<?php echo $i;?>" size="40" maxlength="30"/></td>
     </tr>
     <tr>
       <td>Futbol</td>
       <td>
       <select name="txtTipoFutbol<?php echo $i;?>" id="txtTipoFutbol<?php echo $i;?>">
           <option value="0"> Seleccione </option>
           <option value="11">5</option>
           <option value="12">7</option>
           <option value="13">11</option>
       </select></td>
     </tr>
     <tr>
       <td>Terreno</td>
       <td>
       <select name="txtTipoTerreno<?php echo $i;?>" id="txtTipoTerreno<?php echo $i;?>">
         <option value="0"> Seleccione </option>
         <option value="1">Pasto</option>
         <option value="2">Cemento</option>
         <option value="3">Duela</option>
         <option value="4">Sintetico</option>
         <option value="5">Natural</option>
         <option value="6">Tierra</option>
       </select>
       </td>
     </tr>
     <tr>
       <td>Gradas</td>
       <td>
       <select name="txtGrada<?php echo $i;?>" id="txtGrada<?php echo $i;?>">
         <option value="">Seleccione</option>
         <option value="1">Si</option>
         <option value="0">No</option>
       </select></td>
     </tr>
     <tr>
       <td>Comentarios</td>
       <td><textarea name="txtComentario<?php echo $i;?>" id="txtComentario<?php echo $i;?>" maxlength="500" cols="45" rows="5" ></textarea></td>
     </tr>
   </table>
   </div>
   </li>
<?php
}
?>
</body>
</html>


Saludos.
abc

bryanmendez

#1
12 Abril 2012, 20:44 PM
Hola.
Muy buen aporte, pero quisiera por favor que si en vez de un select vaya una caja de texto y dependiendo el valor mostrar tantas veces los div, si sabe como se lo agradeceré.

1mpuls0

#2
17 Abril 2012, 18:56 PM
Basicamente es lo mismo.

Código (html4strict) [Seleccionar]

<!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>Mostrar</title>
<script type="text/javascript">
function mostrar(num) {
for(i=1;i<=10;i++)
document.getElementById('textfield'+i).style.display='none';

if(num.value!=0){
for(i=1;i<=num;i++)
document.getElementById('textfield'+i).style.display='block';
}
}
</script>
</head>
<body>
<p>
  <select name="select" id="select" onchange="mostrar(this.selectedIndex)">
    <option value="0">Selecciona</option>
    <?php
   for($i=1;$i<=10;$i++){
 echo "<option value='$i'>$i</option>";
}
   ?>
  </select>
</p>
<p>
 
</p>
<?php
for($i=1;$i<=10;$i++){
?>
<li class="tituloItem">
    <div id="textfield<?php echo $i;?>" style="display:none;" class="contenidoItem">
    <input type="text" name="textfield<?php echo $i?>" id="textfield<?php echo $i?>" size=50 value="TextFiel <?php echo $i; ?>"/>
    </div>
</li>
<?php
}
?>
</body>
</html>

Saludos
abc

bryanmendez

#3
17 Abril 2012, 22:52 PM
Claro, pero exactamente ah eso no hiba.. Lo que deseo ahora es que si en el combo box selecionas el item 2 Ok. Entonces te va mostrar 2 Cajas de Texto... lo que quiero ahora es que va ir un boton y ese boton va recuperar lo que esta escrito en esas dos cajas de texto, en una nueva pagina de PHP. Me podrias ayudar te lo agradecere mucho Gracias, Saludos..!

1mpuls0

#4
18 Abril 2012, 17:25 PM Ultima modificación: 19 Abril 2012, 09:25 AM por Darhius
EDITADO.

Con base al código.

Ahora debes de tener un form para poder enviar por post las variables de tus componentes en este caso seran textfield.

Código (html4strict) [Seleccionar]

<form id="form1" name="form1" method="post" action="action.php">
...
</form>


Además del select, textfields (ocultos) también debes agregar un boton al form para poder enviar la acción.
Debes tomar en cuenta, las propiedades y valores correspondientes.
NOTA: Para los textfield toma en cuenta que deben cambiar el name y id para eso utilizas el ciclo (para crear hasta n y colocar un nombre por cada itereacion, textfield1, textfield2... texfieldn.

Código (html4strict) [Seleccionar]

<form id="form1" name="form1" method="post" action="action.php">
<select name="select" id="select" >
...
</select>
<input type="text" name="textfield" id="textfield" />
<input type="submit" name="submit" value="submit" id="submit"/>
</form>


En el archivo donde recibes las variables (en este caso "action.php") además de validaciones etc, tambien debes valida4 que el value del select sea mayor a 0 para este caso.

Código (html4strict) [Seleccionar]

if(!isset($_POST['submit']))
...
if($_POST['select']>0)
...


Con el valor del select crearas una iteración en donde por cada iteracion debes tomar el valor de cada textfiel (texfield1, 2... etc).

Código (html4strict) [Seleccionar]

for($i=1;$i<=$"valordelselect";$i++)


En "valor del select" debes colocar el value del select

Dentro de la iteracion debes mostrar o guardar dependiendo del caso, el valor de los texfield, esto lo haces como recibes las demas variables, es decir con el método POST.

OBSERVACION: $_POST['textfield'].$i ES DIFERENTE DE $_POST['textfield'.$i]

Saludos C:
abc
Imprimir
Ir Arriba Páginas1
Acciones del Usuario