Ayuda mostrar campos en formulario en funcion de lista despegable

[pirrilon]

Hola a tod@s:

Estoy haciendo un script en php para insertar meritos de investigadores y al inicio del script tengo una lista despegable para seleccionar el tipo de mérito que se desea insertar.Ahora bien,en función de la elección que haga el usuario desearía que se visualizaran unos campos u otros del formulario,es decir,por ejemplo si se elige el mérito proyecto en la lista pues me gustaria que saliera por pantalla titulo,entidad financiadora,... y si por ejemplo se elige patente que saliera titulo,autores,..... y al final un botón submit para registrar dicho mérito.¿Cómo se podría hacer esto con javascript?

En resumen,me gustaría tener una especie de muchos formularios en función de registrar un mérito u otro en un solo script.Me han comentado que con javascript esto se puede realizar pero aún soy novato en esto.Espero que alguien pueda ayudarme.Muchas gracias compañeros.Un saludo

[claray]

Si bueno, puedes crear cada uno de los formularios dependientes en capas (<DIV>) ocultos en principio y hacerlos aparecer dependiendo de la opcion seleccionada en el select.

Ejemplo:

<script language="JavaScript">
function hideDivs(){
document.all.divMerito.style.visibility = "hidden";
document.all.divPatente.style.visibility = "hidden";
}
function doShow(){
alert(form1.meritos.item(form1.meritos.selectedInd ex).value);
switch (form1.meritos.item(form1.meritos.selectedIndex).v alue){
case "0": hideDivs();
break;
case "1": hideDivs();
document.all.divMerito.style.visibility = "visible";
break;
case "2": hideDivs();
document.all.divPatente.style.visibility = "visible";
break;
}//switch
}
</script>
<form name="form1">
<select name="meritos" onchange="doShow()">
<option value="0">Seleccione Opcion</option>
<option value="1">Merito Proyecto</option>
<option value="2">Patente</option>
</select>

<div id="divMerito" style="visibility:hidden;position=absolute;top=50; ">
datos del div meritos
</div>
<div id="divPatente" style="visibility:hidden;position=absolute;top=50; ">
datos del div patente
</div>
</form>


suerte...

[pirrilon]

Muchas gracias Claray,pero me gustaría que no me saliera una ventana con 0,1,2 cada vez q eligiera una opción ya que resulta un poco molestoso,perdóname pero es que no tengo apenas idea de javascript,el código que me has pasado se asemeja a lo que quiero conseguir pero con la expcepción esa que te dicho de las ventanitas.Si me pudieras decir cómo poder evitarlas cuando seleccionara una opción te estaría muy agradecido.GRACIAS

[pirrilon]

Acabo de solucionarlo Claray!!! He quitado la línea de código alert(form1.meritos.item(form1.meritos.selectedInd ex).value); y ya no me salen las ventanitas

Ahora lo que he visto es que si selecciono Merito proyecto me sale datos del div meritos y si selecciono Patente me sale datos del div patente pero más abajo y me gustaría que saliera todos en una página,es decir,seleccionando cualquier opción me gustaría que saliera los campos de un formulario pero que se muestren contiguos,uno debajo del otro y no que se queden huecos en blanco,no sé si me entiendes,espero que sí

[claray]

La verdad no entendi mucho.
El punto central está bien? es decir, la idea es que solo se muestre un formulario a la vez dependiendo de la opción, verdad?

lo de la posición en donde aparece el formulario está definida por el estilo en el DIV (position=absolute;top=50;) eso quiere decir que la posición en donde se muestra es "siempre" a los 50 pixeles del tope de arriba.

si puedes ser más específico...

Saludos.

[pirrilon]

Vamos a ver si me explico bien:

En tu código me sale lo siguiente:

Lista despegable ---> Seleccione opción

Tras elegir Merito proyecto me sale automáticamente debajo de la lista despegable datos del div meritos.

Ahora bien,si elijo Patente me sale datos del div patente NO automáticamente debajo de la lista despegable sino que se aprecia un salto de línea(hueco en blanco) debajo de la lista y después se escribe datos del div patente,y supongo que será el hueco en blanco dejado por Merito proyecto.

Yo lo que quiero que salga aquello que elija en la lista despegable automáticamente debajo de la lista despegable y el siguiente campo del formulario debajo de éste y así sucesivamente.

La idea es que si quiero construir formularios distintos con muchos campos quiero que no salgan huecos blancos entre campos,es decir,que a lo mejor el campo titulo esté debajo de la lista despegable y a lo mejor el campo autor esté en mitad de la pantalla y entre ambos haya saltos de línea(que en realidad son campos ocultos).

¿Me he explicado bien?Espero que sí.Espero tu respuesta Claray.Gracias por todo

[pirrilon]

Claray ¿por qué no me contestas?

[caos30]

He entrado aquí buscando otra cosa, pero en fin, después de leer tu problema creo que se te resolvería utilizando capas RELATIVAS en lugar de ABSOLUTAS.

Simplemente tienes que poner "relative" donde pone "absolute" del código que te pasó PIRRILON. De esta forma, la capa que sea (todo lo que va dentro de las etiquetas <DIV></DIV>) pasará a ser como un párrafo más. Es decir, que una vez que la cambies a RELATIVA, debes situar el código de la capa (<DIV>bla bla bla</DIV>) allá del formulario donde tú quieres que aparezca/desaparezca exactamente. Por la misma razón, quitale el atributo: top, porque ya no te sirve.

No sé si mi aportación te servirá ya... de todas formas, espero que a alguien le sirva.

Esto de las "capas" es lo que entra dentro de lo que se llama trabajar con DHTML (HTML dinámico), para lo cuál, por poco que busqueis por la red encontraréis de todo!!! jejejeje Ánimo... porque se pueden hacer auténticas chuladas.

[claray]

Primero: Lo lamento... estube metido en un desarrollo en Delphi por unos buenos dias y deje de lado todo el resto, por lo que no me habia metido en la red... sorry.

Respecto al problema, no entiendo!!! se supone que al decirle que la posicion es absoluta (position:absolute) y el borde superior este en 50 (top:50) ambos debieran aparecer en la misma posición...


Agregale bordes a las capas para efectos de prueba, de esa manera sabras en area que estan tomando,


OK, OK, OK, encontre el problema, el problema es mio, en vez de poner "position:absolute;top:50;" (como corresponde) escribi "position=absolute;top=50;" eso esta MAL.

de todas formas, para seguir con el argumento del párrafo anterior, puedes sustituir los DIVs por lo siguiente para ver los bordes:

<div id="divMerito" style="border: solid thin black; position:absolute;visibility: hidden; top: 50px;">
datos del div meritos
</div>
<div id="divPatente" style="border: solid thin black; position:absolute;visibility: hidden; top: 50px;">
datos del div patente
</div>

saludos