Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: 1mpuls0 en 12 Marzo 2012, 22:04 pm


Título: Mostrar/Ocultar n DIV con javascript. [Solucionado]
Publicado por: 1mpuls0 en 12 Marzo 2012, 22:04 pm
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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Mostrar</title>
  6. <script type="text/javascript">
  7. function mostrar(num) {
  8. 	for(i=1;i<=10;i++)
  9. 			document.getElementById('canchas'+i).style.display='none';
  10.  
  11. 	if(num.value!=0){
  12. 		for(i=1;i<=num;i++)
  13. 			document.getElementById('canchas'+i).style.display='block';
  14. 	}
  15. }
  16. </script>
  17. </head>
  18. <body>
  19. <p>
  20.   <select name="select" id="select" onchange="mostrar(this.selectedIndex)">
  21.     <option value="0">Selecciona</option>
  22.     <?php
  23.   	for($i=1;$i<=10;$i++){
  24. 		echo "<option value='$i'>$i</option>";	
  25. 	}
  26.   	?>
  27.   </select>
  28. </p>
  29. <p>&nbsp;</p>
  30. <?php
  31. for($i=1;$i<=10;$i++){
  32. ?>
  33. 	<li class="tituloItem">
  34.     <div id="canchas<?php echo $i;?>" style="display:none;" class="contenidoItem">
  35.     <table width="200" border="0">
  36.       <tr>
  37.         <td>Cancha <?php echo $i;?></td>
  38.         <td><input name="txtNombreCancha<?php echo $i;?>" type="text" id="txtNombreCancha<?php echo $i;?>" size="40" maxlength="30"/></td>
  39.       </tr>
  40.       <tr>
  41.         <td>Futbol</td>
  42.         <td>
  43.         <select name="txtTipoFutbol<?php echo $i;?>" id="txtTipoFutbol<?php echo $i;?>">
  44.             <option value="0"> Seleccione </option>
  45.             <option value="11">5</option>
  46.             <option value="12">7</option>
  47.             <option value="13">11</option>
  48.         </select></td>
  49.       </tr>
  50.       <tr>
  51.         <td>Terreno</td>
  52.         <td>
  53.         <select name="txtTipoTerreno<?php echo $i;?>" id="txtTipoTerreno<?php echo $i;?>">
  54.           <option value="0"> Seleccione </option>
  55.           <option value="1">Pasto</option>
  56.           <option value="2">Cemento</option>
  57.           <option value="3">Duela</option>
  58.           <option value="4">Sintetico</option>
  59.           <option value="5">Natural</option>
  60.           <option value="6">Tierra</option>
  61.         </select>
  62.         </td>
  63.       </tr>
  64.       <tr>
  65.         <td>Gradas</td>
  66.         <td>
  67.         <select name="txtGrada<?php echo $i;?>" id="txtGrada<?php echo $i;?>">
  68.           <option value="">Seleccione</option>
  69.           <option value="1">Si</option>
  70.           <option value="0">No</option>
  71.         </select></td>
  72.       </tr>
  73.       <tr>
  74.         <td>Comentarios</td>
  75.         <td><textarea name="txtComentario<?php echo $i;?>" id="txtComentario<?php echo $i;?>" maxlength="500" cols="45" rows="5" ></textarea></td>
  76.       </tr>
  77.     </table>
  78.     </div>
  79.     </li>
  80. <?php
  81. }
  82. ?>
  83. </body>
  84. </html>
  85.  

Saludos.

Título: Re: Mostrar/Ocultar n DIV con javascript. [Solucionado]
Publicado por: bryanmendez en 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é.

Título: Re: Mostrar/Ocultar n DIV con javascript. [Solucionado]
Publicado por: 1mpuls0 en 17 Abril 2012, 18:56 pm
Basicamente es lo mismo.

Código
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Mostrar</title>
  6. <script type="text/javascript">
  7. function mostrar(num) {
  8. 	for(i=1;i<=10;i++)
  9. 			document.getElementById('textfield'+i).style.display='none';
  10.  
  11. 	if(num.value!=0){
  12. 		for(i=1;i<=num;i++)
  13. 			document.getElementById('textfield'+i).style.display='block';
  14. 	}
  15. }
  17. </head>
  19. <p>
  20.   <select name="select" id="select" onchange="mostrar(this.selectedIndex)">
  21.     <option value="0">Selecciona</option>
  22.     <?php
  23.   	for($i=1;$i<=10;$i++){
  24. 		echo "<option value='$i'>$i</option>";	
  25. 	}
  26.   	?>
  27.   </select>
  28. </p>
  29. <p>
  30.  
  31. </p>
  32. <?php
  33. for($i=1;$i<=10;$i++){
  34. ?>
  35. 	<li class="tituloItem">
  36.     <div id="textfield<?php echo $i;?>" style="display:none;" class="contenidoItem">
  37.     <input type="text" name="textfield<?php echo $i?>" id="textfield<?php echo $i?>" size=50 value="TextFiel <?php echo $i; ?>"/>
  38.     </div>
  39. </li>
  40. <?php
  41. }
  42. ?>
  43. </body>
  44. </html>
  45.  
  46. Saludos
  47.  

Título: Re: Mostrar/Ocultar n DIV con javascript. [Solucionado]
Publicado por: bryanmendez en 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..!

Título: Re: Mostrar/Ocultar n DIV con javascript. [Solucionado]
Publicado por: 1mpuls0 en 18 Abril 2012, 17:25 pm
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
  1. <form id="form1" name="form1" method="post" action="action.php">
  2. ...
  3. </form>
  4.  

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
  1. <form id="form1" name="form1" method="post" action="action.php">
  2. <select name="select" id="select" >
  3. ...
  5. <input type="text" name="textfield" id="textfield" />
  6. <input type="submit" name="submit" value="submit" id="submit"/>
  7. </form>
  8.  

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
  1. if(!isset($_POST['submit']))
  2. ...
  3. if($_POST['select']>0)
  4. ...
  5.  

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
  1. for($i=1;$i<=$"valordelselect";$i++)
  2.  

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:


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines