Menú o lista desplgable condicional.

06/07/2006 - 16:05 por ADumith | Informe spam
Saludos a todos amigos;

Alguien podría orientarme para construir una página que debe contener una
lista o menú desplegable y dependiendo de la selección del usuario debo
mostrar unos campos y si cambia de selección debo mostrar otros campos.

Muchas gracias a todos.

Preguntas similare

Leer las respuestas

#6 ADumith
08/07/2006 - 18:50 | Informe spam
Listo amigo ya resolví el problema; ahora ando en busqueda de otras cosas
como por ejemplo un JavaScript que valide que lo que se ingrese en un campo
sea solo números y no textos.

Estoy conciente que este no es el foro indicado para tal fin, pero conoces
de algún foro de JavaScript que sea bueno?

"Miguel Gonzalez" wrote:

Hola Adumith.

Esa era la idea...

Suerte!

Saludos!
Miguel


ADumith escribió:
> Saludos amigo;
>
> Trabajando con tu ayuda me quedó esto:
>
> <script type="text/javascript">
> function muestra(campo)
> {
> switch(campo)
> {
> case 0:
> document.getElementById("form1").style.display="none";
> document.getElementById("form2").style.display="none";
> document.getElementById("form3").style.display="none";
> break;
> case 1:
> document.getElementById("form1").style.display="inline";
> document.getElementById("form2").style.display="none";
> document.getElementById("form3").style.display="none";
> break;
> case 2:
> document.getElementById("form1").style.display="none";
> document.getElementById("form2").style.display="inline";
> document.getElementById("form3").style.display="none";
> break;
> case 3:
> document.getElementById("form1").style.display="none";
> document.getElementById("form2").style.display="none";
> document.getElementById("form3").style.display="inline";
> break;
> }
> }
> </script>
>
>
> <form>
> <select onchange="muestra(this.selectedIndex);">
> <option value="0">Seleccione un producto</option>
> <option value="1">Muestra formulario 1</option>
> <option value="2">Muestra formulario 2</option>
> <option value="3">Muestra formulario 3</option>
> </select>
> </form>
>
>
>
> <form id="form1" name="form1" method="post" action="" style="display:none;">
> Primer formulario
> </form>
>
> <form id="form2" name="form1" method="post" action="" style="display:none;">
> Segundo formulario
> </form>
> <form id="form3" name="form1" method="post" action="" style="display:none;">
> Tercer formulario
> </form>
>
> Que te parece...????
>
> "Miguel Gonzalez" escribió:
>
>> Hola Adumith.
>>
>> Por supuesto que puedes hacer lo mismo con formularios. En vez de
>> referirte a un campo, te refieres al formulario:
>>
>> <form id="form0" style="display: none;">
>> <select onchange="...
>>
>> <form id="form1" style="display: none;"> ... </form>
>> <form id="form2" style="display: none;"> ... </form>
>> <form id="form3" style="display: none;"> ... </form>
>> etc.
>>
>> Para saber qué formulario se envía, podrías incorporar un campo oculto
>> dentro de cada formulario que lo identifique:
>>
>> <input type="hidden" name="formRef" value="form1">
>>
>> Saludos!
>>
>> Miguel
>>
>> ADumith escribió:
>>> Antes que todo, muchisimas gracias Miguel por tu respuesta, pero me gustaría
>>> plantearte lo siguiente:
>>>
>>> Los campos los tengo agrupados por formularios, entonces tu crees que pueda
>>> hacer que se muestre un formulario u otro dependiendo de la solicitud del
>>> usuario, y despues cuando ejecuto el submit como sé que formulario se está
>>> enviando?
>>>
>>> Gracias mil de nuevo.
>>>
>>> "Miguel Gonzalez" escribió:
>>>
>>>> Hola Adumith.
>>>>
>>>> Pues, más o menos, habría que hacerlo con Javascript, desde el evento "onchange" de la lista y
>>>> "jugando" con la propiedad "display" de los campos.
>>>>
>>>> Un ejemplillo sería:
>>>>
>>>> <form>
>>>> <select onchange="muestra(this.selectedIndex);">
>>>> <option value="0">Oculta todos</option>
>>>> <option value="1">Muestra sólo campo 1</option>
>>>> <option value="2">Muestra sólo campo 2</option>
>>>> </select>
>>>> <input type="text" id="campo1" value="campo 1" style="display:none;">
>>>> <input type="text" id="campo2" value="campo 2" style="display:none;">
>>>> </form>
>>>>
>>>> <script type="text/javascript">
>>>> function muestra(campo){
>>>> switch(campo){
>>>> case 0:
>>>> document.getElementById("campo1").style.display="none";
>>>> document.getElementById("campo2").style.display="none";
>>>> break;
>>>> case 1:
>>>> document.getElementById("campo1").style.display="inline";
>>>> document.getElementById("campo2").style.display="none";
>>>> break;
>>>> case 2:
>>>> document.getElementById("campo1").style.display="none";
>>>> document.getElementById("campo2").style.display="inline";
>>>> break;
>>>> }
>>>> }
>>>> </script>
>>>>
>>>> Saludos!
>>>> Miguel
>>>>
>>>>
>>>> ADumith escribió:
>>>>> Saludos a todos amigos;
>>>>>
>>>>> Alguien podría orientarme para construir una página que debe contener una
>>>>> lista o menú desplegable y dependiendo de la selección del usuario debo
>>>>> mostrar unos campos y si cambia de selección debo mostrar otros campos.
>>>>>
>>>>> Muchas gracias a todos.

Respuesta Responder a este mensaje
#7 Miguel Gonzalez
08/07/2006 - 21:46 | Informe spam
Hola Adumith.

Creo que deberías plantearte la necesidad de dedicar algún tiempo a aprender javascript. Si tu
camino es continuar desarrollando páginas web considero que es una herramienta imprescindible (junto
a HTML, CSS, DOM y, a otro nivel, dependiendo de las preferencias personales, algún lenguaje de
servidor tipo ASP o PHP si te decantas por la programación, o bien herramientas de diseño gráfico y
multimedia, tipo Flash, si te decantas por el lado de diseño). Javascript no es un lenguaje
complicado, si se tienen claros algunos fundamentos de programación, los cuales se pueden comenzar a
aprender si se presta atención a los capítulos iniciales de cualquier buen tutorial (capítulos que,
contra la creencia habitual, no constituyen meramente una "introducción que se puede saltar").

En relación a tu consulta, la solución vendría del lado de utilizar lo que se llama "expresiones
regulares", que constituyen una especie de pautas de búsqueda dentro de cadenas de datos.

Un ejemplillo de uso de expresiones regulares para verificar números sería:

function verificaNumero(num){
var re=new RegExp("[0-9]");
if(!re.test(num)||isNaN(num))alert("¡Número incorrecto!");
else alert("¡Número correcto!");
}

La función anterior crea una pauta para que busque sólo caracteres numéricos y comprueba el
resultado doblemente (que el dato cumpla la pauta y que además sea evaluado por javascript como un
número).

Obviamente, se puede refinar para buscar números hexadecimales, para permitir (o no) un número
concreto de decimales, para que el número esté dentro de un rango, etc.

Foros de javascript hay muchos. El que podría recomendarte es:

http://www.webdeveloper.com/forum/f...;forumid=3

...aunque está en inglés, al igual que la referencia rápida del lenguaje:

http://www.devguru.com/Technologies...index.html


Saludos!
Miguel


ADumith escribió:
Listo amigo ya resolví el problema; ahora ando en busqueda de otras cosas
como por ejemplo un JavaScript que valide que lo que se ingrese en un campo
sea solo números y no textos.

Estoy conciente que este no es el foro indicado para tal fin, pero conoces
de algún foro de JavaScript que sea bueno?

"Miguel Gonzalez" wrote:

Hola Adumith.

Esa era la idea...

Suerte!

Saludos!
Miguel


ADumith escribió:
Saludos amigo;

Trabajando con tu ayuda me quedó esto:

<script type="text/javascript">
function muestra(campo)
{
switch(campo)
{
case 0:
document.getElementById("form1").style.display="none";
document.getElementById("form2").style.display="none";
document.getElementById("form3").style.display="none";
break;
case 1:
document.getElementById("form1").style.display="inline";
document.getElementById("form2").style.display="none";
document.getElementById("form3").style.display="none";
break;
case 2:
document.getElementById("form1").style.display="none";
document.getElementById("form2").style.display="inline";
document.getElementById("form3").style.display="none";
break;
case 3:
document.getElementById("form1").style.display="none";
document.getElementById("form2").style.display="none";
document.getElementById("form3").style.display="inline";
break;
}
}
</script>


<form>
<select onchange="muestra(this.selectedIndex);">
<option value="0">Seleccione un producto</option>
<option value="1">Muestra formulario 1</option>
<option value="2">Muestra formulario 2</option>
<option value="3">Muestra formulario 3</option>
</select>
</form>



<form id="form1" name="form1" method="post" action="" style="display:none;">
Primer formulario
</form>

<form id="form2" name="form1" method="post" action="" style="display:none;">
Segundo formulario
</form>
<form id="form3" name="form1" method="post" action="" style="display:none;">
Tercer formulario
</form>

Que te parece...????

"Miguel Gonzalez" escribió:

Hola Adumith.

Por supuesto que puedes hacer lo mismo con formularios. En vez de
referirte a un campo, te refieres al formulario:

<form id="form0" style="display: none;">
<select onchange="...

<form id="form1" style="display: none;"> ... </form>
<form id="form2" style="display: none;"> ... </form>
<form id="form3" style="display: none;"> ... </form>
etc.

Para saber qué formulario se envía, podrías incorporar un campo oculto
dentro de cada formulario que lo identifique:

<input type="hidden" name="formRef" value="form1">

Saludos!

Miguel

ADumith escribió:
Antes que todo, muchisimas gracias Miguel por tu respuesta, pero me gustaría
plantearte lo siguiente:

Los campos los tengo agrupados por formularios, entonces tu crees que pueda
hacer que se muestre un formulario u otro dependiendo de la solicitud del
usuario, y despues cuando ejecuto el submit como sé que formulario se está
enviando?

Gracias mil de nuevo.

"Miguel Gonzalez" escribió:

Hola Adumith.

Pues, más o menos, habría que hacerlo con Javascript, desde el evento "onchange" de la lista y
"jugando" con la propiedad "display" de los campos.

Un ejemplillo sería:

<form>
<select onchange="muestra(this.selectedIndex);">
<option value="0">Oculta todos</option>
<option value="1">Muestra sólo campo 1</option>
<option value="2">Muestra sólo campo 2</option>
</select>
<input type="text" id="campo1" value="campo 1" style="display:none;">
<input type="text" id="campo2" value="campo 2" style="display:none;">
</form>

<script type="text/javascript">
function muestra(campo){
switch(campo){
case 0:
document.getElementById("campo1").style.display="none";
document.getElementById("campo2").style.display="none";
break;
case 1:
document.getElementById("campo1").style.display="inline";
document.getElementById("campo2").style.display="none";
break;
case 2:
document.getElementById("campo1").style.display="none";
document.getElementById("campo2").style.display="inline";
break;
}
}
</script>

Saludos!
Miguel


ADumith escribió:
Saludos a todos amigos;

Alguien podría orientarme para construir una página que debe contener una
lista o menú desplegable y dependiendo de la selección del usuario debo
mostrar unos campos y si cambia de selección debo mostrar otros campos.

Muchas gracias a todos.
email Siga el debate Respuesta Responder a este mensaje
Ads by Google
Help Hacer una pregunta AnteriorRespuesta Tengo una respuesta
Search Busqueda sugerida