 |
|
|
|
|
|
Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS | |
||
|
||||
|
|
|||
 |
|
 |
||
|
||||
Otro ejemplo de formulario dinámico con campos opcionales
Otra forma de crear un formulario con campos que se muestran y se esconden dependiendo de las acciones del usuario, utilizando DHTML con Javascript cross browser.
08/9/05 - El ejemplo que vemos acontinuación es una variación del expuesto en el artículo Un formulario con campos que se esconden con DHTML, pero ésta vez,
dependiendo de la selección que hagamos en un campo select del formulario, mostrará más o menos campos al visitante.
Para ello creamos una caja de selección dentro del formulario y le decimos que, cuando se cambie el valor del campo, se ejecute la función en
javascript "expandir_formulario()":
<select size="1" name="personas" onchange="expandir_formulario()" >
<option value="0">?</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
La función javascript comprobará la selección que hemos elegido y dependiendo de ésto activará o desactivará las diferentes capas del formulario.
function expandir_formulario(){
if (document.f1.personas.value == "0"){
xDisplay('capaexpansion', 'none')
xDisplay('capaexpansion2', 'none')
xDisplay('capaexpansion3', 'none')
xDisplay('capaexpansion4', 'none')
xDisplay('capaexpansion5', 'none')
}
if (document.f1.personas.value == "1"){
xDisplay('capaexpansion', 'block')
xDisplay('capaexpansion2', 'none')
xDisplay('capaexpansion3', 'none')
xDisplay('capaexpansion4', 'none')
xDisplay('capaexpansion5', 'none')
}
if (document.f1.personas.value == "2"){
xDisplay('capaexpansion', 'block')
xDisplay('capaexpansion2', 'block')
xDisplay('capaexpansion3', 'none')
xDisplay('capaexpansion4', 'none')
xDisplay('capaexpansion5', 'none')
}
if (document.f1.personas.value == "3"){
xDisplay('capaexpansion', 'block')
xDisplay('capaexpansion2', 'block')
xDisplay('capaexpansion3', 'block')
xDisplay('capaexpansion4', 'none')
xDisplay('capaexpansion5', 'none')
}
if (document.f1.personas.value == "4"){
xDisplay('capaexpansion', 'block')
xDisplay('capaexpansion2', 'block')
xDisplay('capaexpansion3', 'block')
xDisplay('capaexpansion4', 'block')
xDisplay('capaexpansion5', 'none')
}
if (document.f1.personas.value == "5"){
xDisplay('capaexpansion', 'block')
xDisplay('capaexpansion2', 'block')
xDisplay('capaexpansion3', 'block')
xDisplay('capaexpansion4', 'block')
xDisplay('capaexpansion5', 'block')
}
}
| Nota: Posiblemente hubiera sido más elegante haber metido todos los valores de los identificadores de las capas en un array y haber realizado un recorrido por el array mostrando las capas u ocultándolas según el índice marcado en el select. |
Se puede ver en el anterior código que se ha hecho uso de una funcion de las librerías X Library, llamada xDisplay(). Esta función se tiene que definir en el código del programa y para ello incluiremos un script javascript externo que contiene el código de la función. La procedencia de este archivo también se explicó en el artículo Un formulario con campos que se esconden con DHTML.
<script type='text/javascript' src='formexp.js'></script>
También necesitaremos un código CSS para definir los estilos iniciales de las capas. Posteriormente, la activación de cada capa vendrá dada por el atributo display de la CSS.
<style type="text/css">
#capainicio{
position:relative;
}
#capaexpansion{
position:relative;
display:none;
}
#capaexpansion2{
position:relative;
display:none;
}
#capaexpansion3{
position:relative;
display:none;
}
#capaexpansion4{
position:relative;
display:none;
}
#capaexpansion5{
position:relative;
display:none;
}
#capafinal{
position:relative;
}
</style>
Esperamos que este ejemplo haya resultado sencillo. Recordamos que las explicaciones detalladas se ofrecieron ya en un artículo anterior que se llama Un formulario con campos que se esconden con DHTML.
Podemos ver ejemplo en marcha.
Existe un zip con los materiales usados en este artículo.