elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Trabajando con las ramas de git (tercera parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Mostrar/Ocultar n DIV con javascript. [Solucionado]		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Mostrar/Ocultar n DIV con javascript. [Solucionado]  (Leído 8,247 veces)
1mpuls0


Desconectado Desconectado

Mensajes: 1.186


Ver Perfil
Mostrar/Ocultar n DIV con javascript. [Solucionado]
« 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.
« Última modificación: 13 Marzo 2012, 19:23 pm por Darhius » En línea
abc
bryanmendez

Desconectado Desconectado

Mensajes: 2


Ver Perfil
Re: Mostrar/Ocultar n DIV con javascript. [Solucionado]
« Respuesta #1 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é.
En línea
1mpuls0


Desconectado Desconectado

Mensajes: 1.186


Ver Perfil
Re: Mostrar/Ocultar n DIV con javascript. [Solucionado]
« Respuesta #2 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.  
En línea
abc
bryanmendez

Desconectado Desconectado

Mensajes: 2


Ver Perfil
Re: Mostrar/Ocultar n DIV con javascript. [Solucionado]
« Respuesta #3 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..!
En línea
1mpuls0


Desconectado Desconectado

Mensajes: 1.186


Ver Perfil
Re: Mostrar/Ocultar n DIV con javascript. [Solucionado]
« Respuesta #4 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:
« Última modificación: 19 Abril 2012, 09:25 am por Darhius » En línea
abc
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Ocultar enlaces y mostrar un botón[SOLUCIONADO]
Desarrollo Web 		motocros_elche 2 4,203 Último mensaje 14 Mayo 2011, 01:54 am
por motocros_elche
Ocultar/Mostrar panel
Java 		Xedrox 3 16,977 Último mensaje 6 Julio 2011, 02:50 am
por Xedrox
Mostrar y ocultar div con deslizamiento « 1 2 »
Desarrollo Web 		Poizonus 10 9,823 Último mensaje 21 Julio 2011, 16:47 pm
por Poizonus
ayuda, ocultar, mostrar filas con javascript.
Desarrollo Web 		ameagle04 1 3,770 Último mensaje 5 Febrero 2016, 00:58 am
por CeLaYa
Scrip de javascript para ocultar/mostrar elementos tras refrescar la página
Desarrollo Web 		RiasChan 1 2,822 Último mensaje 29 Mayo 2018, 18:57 pm
por #!drvy
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines