formulario HTML dinamico

[Nacho_astur]

Hola a todos,

Estaba desarrollando un formulario para una web, en el cual el usuario debe introducir informacion sobre un punto de interes(POI).

El tema esta en que ademas del nombre, la direccion, telefono de contacto y tal, queria que tuviera tambien la opcion de elegir el tipo de POI, es decir un restaurante, un hotel, una hostal...

Hasta ahi todo bien, creo una serie de campos y un menu desplegable con las diferentes opciones de POI.

Lo que queria hacer tambien es un apartado dentro del formulario que se genere de forma dinámica, en función del tipo de POI elegido en la opcion anterior es decir, si el usuario eligio un hotel, pues que pueda seleccionar si se trara de un B&B, si tiene wifi, si tiene piscina...

Por el contrario si eligio un restaurante, la mayoria de las facilidades no son complatibles con las del hotel, como es el caso de la piscina o lo de Bed&breakfast, pero sin embargo si que seria interesante que el usuario pudiera indicar por ejemplo el tipo de comida (italiana, china), si tiene servicio de llevar a casa, si tiene servicio de takeaway y cosas asi.

Vamos lo que quiero es que se generase de forma dinamica otro subapartado en el formulario que ofreciese diferentes opciones segun el tipo de POI escogido.


Sabrias como podria hacer esto?? Debo combinarlo con PHP [y por tanto cambiar este mensaje al foro de PHP]

Muchas gracias por vuestra ayuda y saludos a todos

[iovan]

Hola amigo, mira verás eso lo puedes hacer tanto como PHP como con JavaScript y tambien con Ajax.

Yo te recomendaría, por lo más facil que sería con javascript.

mira te voy a dar una idea de como lo puedes lograr, en el foro de javascript puedes preguntar al respecto.

1.- Puedes crear distintas capas DIVS con donde los identifiques con un Id especifico.

Por ejemplo

Código HTML:

<div id="restaurante" style="display:none;">
   Aqui metes los campos de formularios que deseas mostrar para restaurante
</div>
 
<div id="hotel" style="display:none;">
   Aqui metes los campos de formularios que deseas mostrar para hoteres
</div>
 

Y ahora en el select del formulario donde el usuario escoje una opcion (restaurante, hotel. etc..) colocarle una function en el onclick
ejemplo:

Código HTML:

<select>
 <option onclick="showOptions('restaurante');">Restaurante</option>
 <option onclick="showOptions('hotel');">Hotel</option>
</select>
 

Y el javascript sería algo así:

Código Javascript:

<script language="javascript" type="text/javascript">
  function showOptions(t){
        document.getElementById(t).style.display = 'block';  
  }
</script>
 

Saludos

[Nacho_astur]

Buenas

Muchas gracias por el aporte, la verdad es que no conocia esa funcionalidad del HTML, y me parece que la estoy implementando mal. Segui tu consejo y la hice asi:

Código HTML:

<form action="login.php" method="post">
	

	 
      <select>

       <option onclick="showOptions('restaurante');">Restaurante</option>

       <option onclick="showOptions('hotel');">Hotel</option>

      </select>

	 
      <div id="restaurante" style="display:none;">
  
         
	<select name="servicios">
	
	<option value="TakeAway">TakeAway</option>
	
	<option value="Domicilio">ServicioDomicilio</option>
	
	<option value="WiFi">WiFi</option>
	
	<option value="GolTV">GolTV</option>
	
	</select>

      </div>

       

      <div id="hotel" style="display:none;">

         
	<select name="servicios">
	
	<option value="B&B">B&B</option>
	
	<option value="piscina">piscina</option>
	
	<option value="WiFi">WiFi</option>
	
	<option value="Minibar">Minibar</option>
	
	</select>

      </div> 

Pero no funciona, asi k algo debo estar haciendo mal.Solo salen las opciones restautante y hotel, pero genera nada dinamicamente :S

¿Donde estoy fallando?

Gracias nuevamente

[iovan]

Hola amigo, verás si funciona lo acabo de probar.

Probablemente te has olvidado de indicar el script JS en el documento HTML.

Yo he echo uno y lo he probado, añadi 1 nueva funcion, la de ocultar la capa que no estes solicitando ya que al presionar sobre cualquier opcion la capa se muestra y al presionar sobre la otra opcion esta misma capa sigue mostrandose y tambien la que acabas de solicitar.

Código HTML:

<!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>Untitled Document</title>
<script language="javascript" type="text/javascript">
  function showOptions(s,h){
        document.getElementById(s).style.display = 'block';
        document.getElementById(h).style.display = 'none';
  }
</script>
</head>
 
<body>
 
 
<form action="login.php" method="post">
    
 
     
      <select>
 
       <option onclick="showOptions('restaurante','hotel');">Restaurante</option>
 
       <option onclick="showOptions('hotel','restaurante');">Hotel</option>
 
      </select>
 
     
      <div id="restaurante" style="display:none;">
  
         
    <select name="servicios">
    
    <option value="TakeAway">TakeAway</option>
    
    <option value="Domicilio">ServicioDomicilio</option>
    
    <option value="WiFi">WiFi</option>
    
    <option value="GolTV">GolTV</option>
    
    </select>
 
      </div>
 
       
 
      <div id="hotel" style="display:none;">
 
         
    <select name="servicios">
    
    <option value="B&B">B&B </option>
    
    <option value="piscina">piscina</option>
    
    <option value="WiFi">WiFi</option>
    
    <option value="Minibar">Minibar</option>
    
    </select>
 
      </div>
 
</form>
</body>
</html>
 

Saludos

[Nacho_astur]

Funciona de lujo. Muchas gracias

[Nacho_astur]

Buenas, veras intente ir un paso mas alla aprovechando el codigo que me habias dejado escrito, e incorpore el menu desplegable dentro de un formaulario mas grande que ya tenia desarrollado. El problema es que no entendi muy bien alguna de las funciones que escribiste, sobre todo lo relativo a javascrip. Supongo que lo que hace es asignar dos tipo de variables, unas que permaneceran ocultas(h) y otras que se mostraran(s) en funcion de la opcion seleccionada. Pero al introducir 4 tipos de variables se acaban solapando los menus y me aparecen unos a continuacion de los otros y cosas asi. Que es lo que estoy haciendo mal en el sigueinte codigo??

Código HTML:

<fieldset><legend>Tipo de Punto de Interés:</legend>
	
	
   	<script language="javascript" type="text/javascript">
 
        function showOptions(h,s){
   
              document.getElementById(s).style.display = 'block';
   
              document.getElementById(h).style.display = 'none';
 
        }
  
      </script>
 
      </head>
 
      <body>

      <form action="routing.php" method="post">

            <select>
  
             <option onclick="showOptions('bar','hotel','pub','restaurante');">Restaurante</option>
 
             <option onclick="showOptions('bar','restaurante','pub','hotel');">Hotel</option>

	     <option onclick="showOptions('restaurante','hotel','pub','bar');">Bar</option>

	     <option onclick="showOptions('bar','restaurante','hotel','pub');">Pub</option>
  
            </select>
  
            <div id="hotel" style="display:none;">
         
	<INPUT type="hidden" NAME="tipo" value="hotel">
	<INPUT TYPE="CHECKBOX" NAME="B&B" value="B&B">Bed&Breakfast<BR>
 	<INPUT TYPE="CHECKBOX" NAME="Parking" value="Parking">Parking privado<BR>
	<INPUT TYPE="CHECKBOX" NAME="Wifi" value="Wifi">Wifi<BR>
	<INPUT TYPE="CHECKBOX" NAME="Piscina" value="Piscina">Piscina<BR>
	<INPUT TYPE="CHECKBOX" NAME="Animacion" value="Animacion">Servicio de Animacion<BR>

            </div>

            <div id="restaurante" style="display:none;">

	<INPUT TYPE="hidden" NAME="tipo" value="restaurante">
	<INPUT TYPE="CHECKBOX" NAME="ServicioDomicilio" value="ServicioDomicilio">Servicio a domicilio<BR>
 	<INPUT TYPE="CHECKBOX" NAME="PPV" value="PPV">PPV<BR>
	<INPUT TYPE="CHECKBOX" NAME="Parkingprivado" value="Parkingprivado">Parking privado<BR>
        <INPUT TYPE="CHECKBOX" NAME="Menuinfantil" value="Menuinfantil">Menu infantil<BR>
	<INPUT TYPE="CHECKBOX" NAME="Menuvegetariano" value="Menuvegetariano">Menu vegetariano<BR>
	<INPUT TYPE="CHECKBOX" NAME="Bodas" value="Bodas">Salon especial para bodas<BR>

           </div>

	<div id="bar" style="display:none;">

	<INPUT TYPE="hidden" NAME="tipo" value="bar">
	<INPUT TYPE="CHECKBOX" NAME="ServicioDomicilio" value="ServicioDomicilio">Servicio a domicilio<BR>
 	<INPUT TYPE="CHECKBOX" NAME="PPV" value="PPV">PPV<BR>
	<INPUT TYPE="CHECKBOX" NAME="Parkingprivado" value="Parkingprivado">Parking privado<BR>
        <INPUT TYPE="CHECKBOX" NAME="Menudia" value="Menudia">Menu del dia<BR>
	<INPUT TYPE="CHECKBOX" NAME="Sidreria" value="Sidreria">Sidreria<BR>
	<INPUT TYPE="CHECKBOX" NAME="TakeAway" value="TakeAway">Menus para llevar<BR>

           </div>


	<div id="pub" style="display:none;">

	<INPUT TYPE="hidden" NAME="tipo" value="pub">
	<INPUT TYPE="CHECKBOX" NAME="billar" value="billar">Billar<BR>
 	<INPUT TYPE="CHECKBOX" NAME="Pistabaile" value="Pistabaile">Pista de baile<BR>
	<INPUT TYPE="CHECKBOX" NAME="cocteles" value="cocteles">Carta de cocteles<BR>
        <INPUT TYPE="CHECKBOX" NAME="chupitos" value="chupitos">Carta de chupitos<BR>
	<INPUT TYPE="CHECKBOX" NAME="karaoke" value="karaoke">karaoke<BR>

           </div>

	
	</fieldset> 

Muchas gracias y un saludo nuevamente

[webosiris]

Muchas gracias por el aporte, la verdad es que no conocia esa funcionalidad del HTML

eso no es html sino javascript, muevo a ese foro.

[Nacho_astur]

Pero si de javascrip hay solo tres lineas!!! el resto es todo HTML, te pediria que lo devolvieras al otro foro, porque es posible que el miembro de la comunidad que me estaba ayudando, NEW, no pueda encontrarlo y no pueda seguir ayudandome.

Saludos

[webosiris]

hombre, es todo javascript, lo que va entre los onclick también es js. Justamente es de html lo que tienes 3 líneas.

[Nacho_astur]

Ah ok. Y sabrias explicarme que es lo que estoy haciendo mal?? No entiendo que fue lo que modifique del código, poruqe ahora cuando intento hacer el formulario de forma dinamica, y que segun seleccione el usuario uno de los tipos de POI salgan tan solo sus opciones, pues en vez de eso me aparecen unas a continuacion de las otras.

Yo de Javascrip no controlo nada, pero viendo un poco lo que NEW escribio en sus comentarios deduzco que creo una funcion que les da a las varibales la propiedad de aparecer(s) o desaparecer(h), y luego aplica esa funcion a las variables que aparecen en el select para que tan solo una aparezaca.

Pero yo intente hacerlo mas complejo y que haya 4 variables en el select, por lo que en el showOptions paso 4 identificadores de variable (la verdad sk no se como llamarlo), con la intencion de que 3 reciban la propiedad (h) y solo una la propiedad (s). Pero no funciona

Sabrias decirme que estoy haciendo mal??

Saludos y muchas gracias

[Nacho_astur]

Alguien sabe como podria cambiar el titulo del tema por "Formulario en Javascript dinamico"??

[iovan]

Hola amigo, bueno verás el manejo del JS dentro de las etiquetas HTML estan incorrectas para la funcion que hemos creado, sin embargo si modificamos un poco el script entonces la forma en la que ejecutas la funcion sería correcta.

Pasemos a ver como lo modificaremos.

Primero tenemos la siguiente funcion:

Código Javascript:

<script language="javascript" type="text/javascript">
  function showOptions(s,h){
        document.getElementById(s).style.display = 'block';
        document.getElementById(h).style.display = 'none';
  }
</script>
 

En la linea 2 podemos agregar tantas letras queramos en el parentecis, (cada una que corresponda al nombre de cada etiqueta que querramos mostrar u ocultar)

ejemplo.

a: La etiqueta que mostraras
b: las etiquetas ocultas
c: las etiquetas ocultas
d: las etiquetas ocultas

Por lo tanto podemos modificar esta linea de la sig manera:

Código Javascript:

function showOptions(a,b,c,d){
 

Y por ultimo hay que programar la funcion, pasemos a decir que etiquetas se muestra mientras cuales se deben ocultar, esto lo haremos de la sig manera.

Código Javascript:

document.getElementById(a).style.display = 'block';
document.getElementById(b).style.display = 'none';
document.getElementById(c).style.display = 'none';
document.getElementById(d).style.display = 'none';
 

Por lo tanto el código completo quedaría de la sig manera

Código HTML:

<fieldset><legend>Tipo de Punto de Interés:</legend>
    
    
    <script language="javascript" type="text/javascript">
 
        function showOptions(a,b,c,d){
   
              document.getElementById(a).style.display = 'block';
   
              document.getElementById(b).style.display = 'none';
              document.getElementById(c).style.display = 'none';
              document.getElementById(d).style.display = 'none';
 
        }
  
      </script>
 
      </head>
 
      <body>
 
      <form action="routing.php" method="post">
 
            <select>
  
             <option onclick="showOptions('restaurante','hotel','pub','bar');">Restaurante</option>
 
             <option onclick="showOptions('hotel','pub','restaurante','bar',);">Hotel</option>
 
         <option onclick="showOptions('bar','hotel','pub','restaurante');">Bar</option>
 
         <option onclick="showOptions('pub','restaurante','hotel','bar');">Pub</option>
  
            </select>
  
            <div id="hotel" style="display:none;">
         
    <INPUT type="hidden" NAME="tipo" value="hotel">
    <INPUT TYPE="CHECKBOX" NAME="B&B" value="B&B">Bed&Breakfast<BR>
    <INPUT TYPE="CHECKBOX" NAME="Parking" value="Parking">Parking privado<BR>
    <INPUT TYPE="CHECKBOX" NAME="Wifi" value="Wifi">Wifi<BR>
    <INPUT TYPE="CHECKBOX" NAME="Piscina" value="Piscina">Piscina<BR>
    <INPUT TYPE="CHECKBOX" NAME="Animacion" value="Animacion">Servicio de Animacion<BR>
 
            </div>
 
            <div id="restaurante" style="display:none;">
 
    <INPUT TYPE="hidden" NAME="tipo" value="restaurante">
    <INPUT TYPE="CHECKBOX" NAME="ServicioDomicilio" value="ServicioDomicilio">Servicio a domicilio<BR>
    <INPUT TYPE="CHECKBOX" NAME="PPV" value="PPV">PPV<BR>
    <INPUT TYPE="CHECKBOX" NAME="Parkingprivado" value="Parkingprivado">Parking privado<BR>
        <INPUT TYPE="CHECKBOX" NAME="Menuinfantil" value="Menuinfantil">Menu infantil<BR>
    <INPUT TYPE="CHECKBOX" NAME="Menuvegetariano" value="Menuvegetariano">Menu vegetariano<BR>
    <INPUT TYPE="CHECKBOX" NAME="Bodas" value="Bodas">Salon especial para bodas<BR>
 
           </div>
 
    <div id="bar" style="display:none;">
 
    <INPUT TYPE="hidden" NAME="tipo" value="bar">
    <INPUT TYPE="CHECKBOX" NAME="ServicioDomicilio" value="ServicioDomicilio">Servicio a domicilio<BR>
    <INPUT TYPE="CHECKBOX" NAME="PPV" value="PPV">PPV<BR>
    <INPUT TYPE="CHECKBOX" NAME="Parkingprivado" value="Parkingprivado">Parking privado<BR>
        <INPUT TYPE="CHECKBOX" NAME="Menudia" value="Menudia">Menu del dia<BR>
    <INPUT TYPE="CHECKBOX" NAME="Sidreria" value="Sidreria">Sidreria<BR>
    <INPUT TYPE="CHECKBOX" NAME="TakeAway" value="TakeAway">Menus para llevar<BR>
 
           </div>
 
 
    <div id="pub" style="display:none;">
 
    <INPUT TYPE="hidden" NAME="tipo" value="pub">
    <INPUT TYPE="CHECKBOX" NAME="billar" value="billar">Billar<BR>
    <INPUT TYPE="CHECKBOX" NAME="Pistabaile" value="Pistabaile">Pista de baile<BR>
    <INPUT TYPE="CHECKBOX" NAME="cocteles" value="cocteles">Carta de cocteles<BR>
        <INPUT TYPE="CHECKBOX" NAME="chupitos" value="chupitos">Carta de chupitos<BR>
    <INPUT TYPE="CHECKBOX" NAME="karaoke" value="karaoke">karaoke<BR>
 
           </div>
 
    
 
    </fieldset>
 

Espero que se entienda.

Saludos amigo.

[Nacho_astur]

Se entiende perfectamente.
Muchas gracias