| ||||
|
|
|
|
|
|
| |||
|
| |||
| ||||
Home - HTMLWebScript - Formularios - Falso combo - 1 - 2 - 3 - 4 - 5
Falso combo (III)
por Luciano Moreno, del departamento de diseño web de BJSParaRed.
Compatibilizando con el formulario.-
Las listas de selección simples son elementos de formulario, y como tales, sirven para recoger un dato seleccionado por el usuario entre un grupo de opciones posibles. Ese dato debe ser enviado, junto con los demás del formulario, al programa de servidor encargado de procesarlos.
Necesitamos pues en ampliar las funcionalidades de nuestro falso combo para que sea capaz de identificar y enviar la opción selecionada por el usuario. Para ello, vamos a utilizar un campo oculto del formulario (de tipo hidden) que almacene el valor asociado a la opción elegida, de tal forma que cuando se pulse una opción se cambie el valor de dicho campo oculto. Este valor será enviado al servidor web junto con los demás del fromulario de forma estándar.
Introducimos entonces cada una de las opciones del falso combo en un enlace, que va a ser en encargado de llamar a una función JavaScript, pasándole como argumento el valor asociado a la opción. Luego, esta función asignará el valor recibido al campo oculto, y cambiará el texto que figura en la caja del combo al de la opción seleccionada, para lo que accedemos al contenido de la capa interna a la misma y cambiamos su contenido, teniendo en cuenta que con cada navegador hay que realizar el proceso de forma diferente.
El código necesario será (lo nuevo, en azul):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style
type="text/css">
#seleccion1{background-color:#4c4c4c;layer-background-color:#4c4c4c;position:relative;width:100px;height:16px;clip:rect(0,100,16,0);z-index:1;}
#fondocaja1{background-color:#FFFFFF;layer-background-color:#FFFFFF;width:98px;height:14px;clip:rect(0,98,14,0);position:absolute;left:1px;top:1px;z-index:5;}
#flecha1{background-color:#4c4c4c;layer-background-color:#4c4c4c;width:16px;height:14px;clip:rect(0,16,14,0);position:absolute;left:82px;top:1px;z-index:5;margin-left:1px;padding-left:1px;}
#falda1{background-color:#4c4c4c;layer-background-color:#4c4c4c;width:100px;height:70px;clip:rect(0,100,70,0);position:absolute;top:16px;left:0px;z-index:10;visibility:hidden;}
#fondofalda1{background-color:#FFFFFF;layer-background-color:#FFFFFF;width:98px;height:69px;clip:rect(0,98,69,0);position:absolute;top:0px;left:1px;z-index:10;padding-top:4px;}
</style>
<script language="JavaScript"
type="text/javascript">
if(document.layers)
{
document.write("<link rel='stylesheet' type='text/css'
href='css/estilos_nc.css'>");
}
else
{
document.write("<link
rel='stylesheet' type='text/css'
href='css/estilos.css'>");
}
var
estado=false;
function
cambia(id)
{
if
(estado==false)
{
if (document.layers)
{
document.layers['seleccion1'].height="86";
document.layers['seleccion1'].clip.bottom="86";
document.seleccion1.document.layers[id].visibility =
"show";
}
else if (document.all)
document.all[id].style.visibility =
"visible";
else
if(document.getElementById)
document.getElementById(id).style.visibility =
"visible";
}
else
{
if
(document.layers)
{
document.layers['seleccion1'].height="16";
document.layers['seleccion1'].clip.bottom="16";
document.seleccion1.document.layers[id].visibility =
"hide";
}
else if (document.all)
document.all[id].style.visibility =
"hidden";
else
if(document.getElementById)
document.getElementById(id).style.visibility =
"hidden";
}
estado=(!estado)
}
function
cambiavalor(caja, cadena)
{
if(document.all)
{
eval("document.all('fondocaja"+caja+"').innerHTML='<span
class=lista>"+cadena+"</span>'");
eval("cambia('falda"+caja+"')");
document.forms.miform.combo1.value=cadena;
}
else
if(document.layers)
{
with
(document.seleccion1.document.layers['fondocaja1'])
{
document.open();
document.write("<span
class='lista'>"+cadena+"</span>");
document.close();
eval("cambia('falda"+caja+"')");
}
document.forms.miform.combo1.value=cadena;
}
else
if(document.getElementById)
{
eval("document.getElementById('fondocaja"+caja+"').innerHTML='<span
class=lista>"+cadena+"</span>'");
eval("cambia('falda"+caja+"')");
document.forms.miform.combo1.value=cadena;
}
}
</script>
</head>
<body bgcolor="#ffff99">
<form
name="miform" action="laquesea" method="post">
<input type="hidden"
name="combo1" value="seleccione">
<div id="seleccion1">
<div id="fondocaja1"><span
class="lista">seleccione</span></div>
<div
id="flecha1"><a href="#" onclick="cambia('falda1')"><img
src="images/flecha.gif" width="15" height="14" border="0"
alt="flecha"></a></div>
<div id="falda1">
<div
id="fondofalda1">
<table cellpadding="0"
cellspacing="0" border="0">
<tr>
<td><a href="#"
onclick="cambiavalor('1','seleccione');return false"
class="link">seleccione
</a></td>
</tr>
<tr>
<td><a href="#"
onclick="cambiavalor('1','uno');return false" class="link">uno </a></td>
</tr>
<tr>
<td><a href="#"
onclick="cambiavalor('1','dos');return false" class="link">dos </a></td>
</tr>
<tr>
<td><a href="#"
onclick="cambiavalor('1','tres');return false" class="link">tres </a></td>
</tr>
</table>
</div>
</div>
</div>
<br><br><br><br>
<a href="#"
onclick="alert(document.forms.miform.combo1.value);return
false;">valor campo</a>
</form>
</body>
</html>
Como véis, hemos puesto un enlace final auxiliar (en marrón), con objeto de comprobar el valor almmacenado en el campo oculto trás seleccionar una opción.
Su resultado lo tenéis en esta ventana.
 |
 |
Home - HTMLWebScript - Formularios - Falso combo - 1 - 2 - 3 - 4 - 5