Foros del Web » Programando para Internet » Javascript »

Crear Formulario dinámico

Estas en el tema de Crear Formulario dinámico en el foro de Javascript en Foros del Web. Hola compañeros!! Necesito crear un formulario dinámico, os explico: Primeramente tengo un pequeño enlace, si lo pincho se tiene que desplegar una especie de ventanita ...
  #1 (permalink)  
Antiguo 25/03/2008, 07:57
 
Fecha de Ingreso: septiembre-2006
Ubicación: Madrid
Mensajes: 14
Antigüedad: 17 años, 7 meses
Puntos: 0
Crear Formulario dinámico

Hola compañeros!!

Necesito crear un formulario dinámico, os explico:

Primeramente tengo un pequeño enlace, si lo pincho se tiene que desplegar una especie de ventanita debajo (desplazando el resto del contenido) para mostrar cierta información.

Después tengo una lista de seleccción. Cuando elija alguna de las opciones de la lista, tiene que mostrarse más información y desplegarse más partes de la página para seguir rellenando información.

Mi idea sería realizarlo todo en la misma página, sin tener que pulsar botones de envío para poder recibir las variables. Se que se puede hacer, pero he estado buscando y no encuentro nada que me ayude.

Lo estoy haciendo con PHP y la funcionalidad tengo que hacerla con javascript.

No se si me he explicado bien.

¿Alguna idea?

Si conocéis algún manual u otro hilo que me pueda ayudar, agradecería que me lo indicaseis.

Muchas gracias por anticipado.
  #2 (permalink)  
Antiguo 25/03/2008, 09:04
 
Fecha de Ingreso: marzo-2008
Mensajes: 21
Antigüedad: 16 años, 1 mes
Puntos: 1
Re: Crear Formulario dinámico

Hola PAQUEDO!


Creo haber entendido tu problema y tiene una muy sencilla solución, te explico paso a paso:


1.- Crea un único fomulario.

<form name='ejemplo'>
</form>
2.- Dentro de este fomulario vas a colocar una tabla para cada sección que deberá ir apareciendo:

<form name='ejemplo'>
//Sección 1
<table>
<tr>
<select name='ejmplo'>
<option value=1>ejemplo1</option>
<option value=1>ejmeplo2</option>
</select>
</tr>
</table>
//Sección 2
<table>
<tr>
<select name='signo'>
<option value=1>aries</option>
<option value=1>tauro</option>
</select>
</tr>
</table>
//Sección 3
<table>
<tr>
<input name='hobbie' type='text'>
</tr>
</table>

</form>

3.- Cada sección la dividimos en bloques 'DIV' así:

<form name='ejemplo'>
//Sección 1
<div id='bloque1'>
<table>
<tr>
<select name='ejmplo'>
<option value=1>ejemplo1</option>
<option value=1>ejmeplo2</option>
</select>
</tr>
</table>
</div>

//Sección 2
<div id='bloque2'>
<table>
<tr>
<select name='signo'>
<option value=1>aries</option>
<option value=1>tauro</option>
</select>
</tr>
</table>
</div>
//Sección 3
<div id='bloque3'>
<table>
<tr>
<input name='hobbie' type='text'>
</tr>
</table>
</div>

</form>
4.- Hasta este punto vamos a ver todo las dos listas yla caja de texto, pero ahora es donde va a pasar lo que quieres.

Necesitamos que dependiendo de la selección de cada una de las listas pase algo, llamemos a esa función 'mostrar_siguiente(x)', donde x es el valor seleccionado en ese momento. Ejemplo:

<form name='ejemplo'>
//Sección 1
<div id='bloque1'>
<table>
<tr>
<select name='ejmplo'>
<option value=1 onclik='mostra_siguiente("1");'>
ejemplo1</option>
<option value=2 onclik='mostra_siguiente("2");'>
ejmeplo2</option>
</select>
</tr>
</table>
</div>

//Sección 2
<div id='bloque2'>
<table>
<tr>
<select name='signo'>
<option value=1>aries</option>
<option value=2>tauro</option>
</select>
</tr>
</table>
</div>
//Sección 3
<div id='bloque3'>
<table>
<tr>
<input name='hobbie' type='text'>
</tr>
</table>
</div>

5.- DEfinimos la función:

<script>
function mostrar-siguiente(x){
if (x==1){
document.getElementById("bloque_2").style.display= " ";

}
if (x==2){
document.getElementById("bloque_3").style.display= " ";

}

}
</script>


Esta función muestra el bloque 2 o 3 dependiendo de la selección.

lo colocas en el <head></head> si tienes html +php pero, si tienes solo php colocalo simplemente al inicio del archivo .


Hasta ahora seguramente no verás el efecto que quieres y esto es porque deseas que se vea bloque 1 y dependiendo de lo que selecciones el bloque 2 ó 3 y así sucesivamente...

Esto lo lograrás ocultando todos los bloques a excepción del inicial.


5.- Forma de ocultar todos los bloques menos el primero:

<script>
document.getElementById("bloque_2").style.display= " none";
document.getElementById("bloque_3").style.display= " none";
</script>

este estracto de código lo vas a colocar al final de tu código php, ejemplo:


<?php>
'tu código';
<?>

<script>
document.getElementById("bloque_2").style.display= " none";
document.getElementById("bloque_3").style.display= " none";
</script>

Eso es todo ....espero que te sirva!!!!
  #3 (permalink)  
Antiguo 25/03/2008, 10:06
 
Fecha de Ingreso: septiembre-2006
Ubicación: Madrid
Mensajes: 14
Antigüedad: 17 años, 7 meses
Puntos: 0
Re: Crear Formulario dinámico

Muchas gracias Marietica

Tiene muy buena pinta lo que me has puesto, he conseguido hacer más o menos lo que quería usando solo php, la solución ha sido hacer submit automaticamente al tener un cambio en la lista de selección.

En principio esto me resuelve la problemática que necesitaba, pero se nota que recarga la página. Probaré la opción que me has propuesto para que no me recargue la página solo cuando sea justo y necesario, dado que tendré (según tu planteamiento) unos 6/7 bloques.

Saludos
  #4 (permalink)  
Antiguo 25/03/2008, 12:39
 
Fecha de Ingreso: marzo-2008
Mensajes: 21
Antigüedad: 16 años, 1 mes
Puntos: 1
Re: Crear Formulario dinámico

PAQUEBO


Con esta opción definitivamente no se recarga en ningún momento tu página......

Mucha Suerte espero te sirva.

:)
  #5 (permalink)  
Antiguo 17/04/2008, 13:57
 
Fecha de Ingreso: octubre-2003
Ubicación: Bogotá
Mensajes: 48
Antigüedad: 20 años, 6 meses
Puntos: 0
Re: Crear Formulario dinámico

No me funciona, por favor explíquenme como hago par que funcione
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:27.