Formulario con campos que varían

[SEPALAUR]

Saludos:
Me gustaria saber como puedo crear un formulario (de preferencia en Dreamweaver, que es lo que manejo) en que tenga un menú de salto, y al elegir una de sus opciones, cambian los campos que siguen del formulario, por ejemplo si elijo en el menú de salto: comentario, que abajo aparezca un campo para reyenar con texto llamado comentarios, si elijo cotizar, que aparezcan abajo campos en que diga por ej: nº de productos, producto, etc.

Agradeciendo de antemano:
Sepalaur

[tunait]

Qué tal Sepalaur,

por favor, no abras más mensajes nuevos preguntando lo mismo. Si no te responden en este ten paciencia o vuelve a solicitar en este mismo pero no abras otro nuevo (has abierto 3 iguales).

Comentarte también que en tu panel de control tienes un espacio para insertar una firma por defecto. Pon allá la firma que quieras pero no la insertes dentro de los mensajes.

Un saludo

[Ruben_adap]

Eso tendras que programarlo en javascript, con dreamweaver directamente no se puede hacer.

[un_tio]

Tres formas:

-Por ASP.
-Por Capas (CSS).
-Por JavaScript (DOM).

[derkenuke]

Voto por hacerlo por Capas:

Imaginate que tienes 3 modalidades: creas tres capas. En cada capa pones cada modalidad. En una pones el formulario de cotizaciones.. en otra comentario.. etc

Esas capas se mantendran invisibles. Cuando el usuario escoge una modalidad primero se invisibilizan todas, y luego solo se muestra aquella referente a la modalidad.

[SEPALAUR]

Ok, pero me podrias detallar más como se hace eso? porque no se hacerlo.

[derkenuke]

¿cual es tu duda? Sabes por donde cogerlo?

[SEPALAUR]

la verdad, el problema es que no se me ocurre como hacer que al oprimir un elemento del menú de salto se muestre una capa que está oculta, como puedo hacer eso?

[derkenuke]

Supongo que el "menu de salto" sera un elemento <select>.

Puedes asociarle un evento onchange, que saltara cuando cambies la opcion. Ese evento onchange llamaria a una funcion javascript, que tiene como parametro el valor de la opcion seleccionada. Dicho valor es el id de un <div> con el formulario de la modalidad en cuestion.

Código PHP:

  <select onchange="muestraDiv(this.options[this.options.selectedIndex].value)">  
   

Acuerdate que la funcion muestraDiv debe primero ocultar todas las modalidades y luego mostrar la que tiene que mostrar. Si no podriamos ver dos modalidades al mismo tiempo.

Si tienes dudas, pregunta.

[SEPALAUR]

Hola,
Lo intenté así, pero no me funciona, aqui dejo un link a un archivo de prueba que hice para que le vean el codigo y vean que puede estar saliendo mal.
Gracias.

[derkenuke]

mmm, ya me suponia yo que tendria que fabricarte el ejemplo...

No veo la funcion muestraDiv definida, y "muestraDiv(this.options[this.options.selectedIndex].Layer2)" no tiene sentido, pues Layer2 no es una propiedad de this.options[this.options.selectedIndex]. Tampoco tendria sentido "this.options[this.options.selectedIndex].value" porque las option no tienen atributo value... enfin...Ademas el codigo no es que sea de lo mas simplificado... intentare hacer una cosa sencilla:

Código PHP:

  <script> 
//aqui los ids de tus capas de modalidades. Pon el [0] como predeterminado 
var losIds=["capa1","capa2","capa3"]; 
function muestraDiv(id) { 
    //ocultamos todas las modalidades 
    for(a=0;a<losIds.length;a++)  
        document.getElementById( losIds[a] ).style.display="none"; 
    //mostramos la modalidad en cuestion 
    document.getElementById( id ).style.display="block"; 
} 
</script> 
 
Contenido de la pagina...... 
 
<select onchange="muestraDiv(this.options[this.options.selectedIndex].value)"> 
    <option value="capa1" selected>Comprar</option>        <!-- predeterminado --> 
    <option value="capa2">Vender</option> 
    <option value="capa3">Catalogo</option> 
</select> 
 
<div id="capa1"> 
    Modalidad 1 
</div> 
<div id="capa2"> 
    Modalidad 2 
</div> 
<div id="capa3"> 
    Modalidad 3 
</div> 
 
Contenido de la pagina...... 
 
 
<script> 
muestraDiv(losIds[0]);        //mostramos el predeterminado. 
</script>  
  

Esta seria una manera de implementarlo, por ejemplo.

[SEPALAUR]

Hola
Muchas gracias era justo lo que necesitaba, pero ahora solo tengo una duda más, si estoy creando un formulario como puedo hacer que elementos de formularios en edistintas capas formen parte de un mismo formulario, para que se envíe todo al oprimir enviar?
Gracias

[derkenuke]

Yo lo haria asi (creo que es lo que quieres):

(ejemplo completo):

Código PHP:

  <script>  
//aqui los ids de tus capas de modalidades. Pon el [0] como predeterminado  
var losIds=["capa1","capa2","capa3"];  
function muestraDiv(id) {  
    //ocultamos todas las modalidades  
    for(a=0;a<losIds.length;a++)  
        document.getElementById( losIds[a] ).style.display="none";  
    //mostramos la modalidad en cuestion  
    document.getElementById( id ).style.display="block";  
}  
</script>  
 
Contenido de la pagina......  
 
<select onchange="muestraDiv(this.options[this.options.selectedIndex].value)">  
    <option value="capa1" selected>Comprar</option>        <!-- predeterminado -->  
    <option value="capa2">Vender</option>  
    <option value="capa3">Catalogo</option>  
</select>  
 
<form> 
    <div id="capa1">  
        <input type="hidden" name="modalidad" value="comprar"> 
        Nombre del producto a comprar: <input type="text" name="producto"> 
    </div>  
    <div id="capa2">  
        <input type="hidden" name="modalidad" value="vender"> 
        Nombre del producto a vender: <input type="text" name="producto"> 
    </div>  
    <div id="capa3"> 
        <input type="hidden" name="modalidad" value="observar">  
        Nombre del producto a observar: <input type="text" name="producto"> 
    </div>  
</form> 
 
Contenido de la pagina......  
 
 
<script>  
muestraDiv(losIds[0]);        //mostramos el predeterminado.  
</script>  
  

En cada modalidad pones el campo con el mismo nombre, y asi recoges de forma sencilla su valor una vez enviado (aunque no estoy muy seguro de que funcione, por aquello de poner varios campos iguales en un formulario, quizas solo se envie el primero. Pruebalo y nos lo confirmas). Para comprobar la accion que debes realizar recoges el campo oculto con nombre "modalidad".

Con suerte funciona, si no ya buscaremos otra manera..

[SEPALAUR]

Muchas gracias, lo probaré en internet y después les cuento si funciona.

[un_tio]

derkenuke, una duda: ¿la función getElementById por qué se usa? Quiero decir que no es necesaria de manera general (podrías poner id_del_elemento.style.display="none" directamente y también funcionaría). Supongo varias cosas, pero me gustaría saber los motivos exactos por los que la usas y cuándo debe usarse y cuándo no.

[SEPALAUR]

Saludos:
Escribo para contarles a todos que el formulario con campos que varian funciona a la perfección, pueden verlo aquí, si quieren envienme sus comentarios a ver que les parece o si necesita algún arreglo ¡¡muchas gracias derkenuke por toda la ayuda!!

[derkenuke]

Iniciado por un_tio

derkenuke, una duda: ¿la función getElementById por qué se usa? Quiero decir que no es necesaria de manera general (podrías poner id_del_elemento.style.display="none" directamente y también funcionaría). Supongo varias cosas, pero me gustaría saber los motivos exactos por los que la usas y cuándo debe usarse y cuándo no.

La funcion getElementById es la unica que cumple los estandares de la w3c para la referencia a objetos. Por lo menos eso es lo que tengo entendido. Si referencias los objetos de otras maneras no te aseguras que funcionen bien en todos los navegadores. Podrias hacer de la misma manera:

Código PHP:

  document.all["id"]  
   

Y funcionaria, pero solo en IE.

Por ello es bueno que todos sigamos los estandares w3c, para que todo sea mas homogeneo, mas portable (y a mi por lo menos, me parece mas legible).

Iniciado por SEPALAUR

Escribo para contarles a todos que el formulario con campos que varian funciona a la perfección, pueden verlo aquí, si quieren envienme sus comentarios a ver que les parece o si necesita algún arreglo ¡¡muchas gracias derkenuke por toda la ayuda!

Me alegro de que te funcione.

[un_tio]

Ok, gracias. Otra duda: acabo de ver que usas "block" para hacer que se muestren los objetos. ¿Por qué block y no "inline"? ¿Qué diferencias hay? (lo he probado y he visto diferencias, que no sé bien a qué se deben, en el firefox, pero no en el explorer).

[derkenuke]

Cito:

Iniciado por http://www.torresburriel.com/w-css/?p=13

Podemos ver la naturaleza de algunos elementos (X)HTML:
Elementos de bloque (block)
"Los elementos de bloque generan una nueva línea (renglón) en el flujo del texto". (Fuente)
Elementos inline
"Los elementos inline no generan una nueva línea en el flujo del texto. Los elementos inline son vistos como elementos “internos” subordinados para los hacia arriba elementos de bloque". (Fuente)

Así las cosas, son elementos de bloque: address, blockquote, center, dl, dir, div, fieldset, form, h1-6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul.

Y son elementos inline: a, abbr, acronym, applet, b, basefont, bdo, big , br, button, cite, code, dfn, em, font, i, img, input, iframe, kbd, label, map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var.

Aunque yo siempre utilizo block para casi todo.. al inline no estoy acostumbrado. Pero ya ves, tienen diferentes finalidades.