Mostrar/Ocultar n DIV con javascript. [Solucionado]

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]

Autor

Tema: Mostrar/Ocultar n DIV con javascript. [Solucionado] (Leído 8,285 veces)

1mpuls0

Desconectado

Mensajes: 1.186

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

<!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.


« Última modificación: 13 Marzo 2012, 19:23 pm por Darhius »	En línea

abc

bryanmendez

Desconectado

Mensajes: 2

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

Mensajes: 1.186

Re: Mostrar/Ocultar n DIV con javascript. [Solucionado]

« Respuesta #2 en: 17 Abril 2012, 18:56 pm »

Basicamente es lo mismo.

Código

<!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


	En línea

abc

bryanmendez

Desconectado

Mensajes: 2

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

Mensajes: 1.186

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

<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

<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

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

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:


« Última modificación: 19 Abril 2012, 09:25 am por Darhius »	En línea

abc

Páginas: [1]

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,235	14 Mayo 2011, 01:54 am por motocros_elche
	Ocultar/Mostrar panel Java	Xedrox	3	17,009	6 Julio 2011, 02:50 am por Xedrox
	Mostrar y ocultar div con deslizamiento « 1 2 » Desarrollo Web	Poizonus	10	9,925	21 Julio 2011, 16:47 pm por Poizonus
	ayuda, ocultar, mostrar filas con javascript. Desarrollo Web	ameagle04	1	3,813	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,853	29 Mayo 2018, 18:57 pm por #!drvy