|
|||||
|
|
|
|
|
|
|
|
||||
|
|
||||
|
|||||
Home - Articulos JavaScript - Caminando entre formularios - 1 - 2 - 3 - 4 - 5 - 6 - 7- 8
CAMINANDO ENTRE FORMULARIOS (VIII)
por Luciano Moreno, del departamento de diseño web de BJS
Software.
EJEMPLOS AVANZADOS.-
Vamos ahora a aplicar todo lo visto en estos capítulos a un par de ejemplos prácticos, que iré explicando paso a paso. La complejidad de los mismos derivará sólamente de nuestro conocimiento de la aplicación de JavaScript a los formularios, ya que sin duda se pueden implementar construcciones mucho más complejas, pero que también necesitarían de un conocimiento básico o avanzado de otros objetos de este lenguaje de programación, como el tratamiento de fechas, el de elementos matemáticos, el de creación de objetos propios, etc, que no son por ahora la intención de este pequeño manual, pero que sí os prometo que veremos más adelante.
Ejemplo A: creación de un combo múltiple.-
En alguna que otra página web hemos visto dos combos, uno tras otro, de tal forma que según la selección que hagamos en el primero aparecerán unas opciones u otras en el segundo. Para dejar las cosas más claras, me estoy refiriendio a lo siguiente:
?Es un efecto bonito, verdad?. Pues bien, es muy facil de crear con lo que sabemos a estas alturas. Lo primero que debemos hacer es crear dos combos, cada uno dentro de un formulario (aunque pueden estar en el mismo; sólo lo hago así para más claridad) que vamos a meter dentro de una tabla para que estén en la misma línea de la página. El primero de ellos va a ser de estructura fija, el principal, y el otro vamos a inicializarlo símplemente con su pareja de etiquetas select y una opción que contiene una serie de guiones, escribiendo para ello dentro del BODY el código HTML:
<table>
<tr>
<td
width="150">
<form name="form1">
<select
name="menu1">
<option value="opcion0">-elije una opción-
<option value="opcion1">deporte
<option
value="opcion2">música
<option
value="opcion3">cine
</select>
</form>
</td>
<td>
<form
name="form2">
<select name="menu2">
<option
value="opcion0">------------------------
</select>
</form>
</td>
</tr>
</table>
bien, ya tenemos nuestros select para trabajar con ellos. Ahora nos vamos a meter en el código JavaScript. Deseamos que cuando el usuario pinche en una de las opciones del combo principal se escriban unas opciones diferentes en el combo secundario, y esto último lo vamos a conseguir mediante el constructor new Option. Así, para el primer caso, opción deporte, deberemos crear dos nuevas opciones y darles valor, mediante:
<script language="JavaScript" type="text/javascript">
function menu1(){
sub0=new
Option("-elije un equipo-","sub0","defauldSelected");
sub1=new
Option("Real Madrid","rmadrid");
sub2=new
Option("Barcelona","barsa");
document.forms.form2.menu2.options[0]=sub0;
document.forms.form2.menu2.options[1]=sub1;
document.forms.form2.menu2.options[2]=sub2;
}
</script>
en donde creamos las 3 opciones del primer caso y las introducimos en el combo, colocando la primera (índice 0 - cabecera del combo) como seleccionada por defecto. De esta forma, cuando llamamos a la función menu1() crearemos el nuevo combo dinámicamente. Y creamos luego otras dos funciones análogas para los casos de música y cine.
Por último, sólo nos falta establecer la llamada a estas funciones, llamada que vamos a hacer mediante una nueva función inicial, que va a detectar qué opción principal ha seleccionado el usuario:
function combo(){
var
indice=document.forms.form1.menu1.selectedIndex;
if(indice==1)
menu1();
if(indice==2) menu2();
if(indice==3)
menu3();
}
y llamamos a esta función mediante el manejador de eventos onChange, aplicado al primer combo:
<select name="menu1" onChange="combo()">
y ya está. El código total resultante es el siguiente:
<html>
<head>
<script
language="JavaScript" type="text/javascript">
function combo(){
var
indice=document.forms.form1.menu1.selectedIndex;
if(indice==1)
menu1();
if(indice==2) menu2();
if(indice==3)
menu3();
}
function menu1(){
sub0=new
Option("-elije un equipo-","sub0","defauldSelected");
sub1=new
Option("Real Madrid","rmadrid");
sub2=new
Option("Barcelona","barsa");
document.forms.form2.menu2.options[0]=sub0;
document.forms.form2.menu2.options[1]=sub1;
document.forms.form2.menu2.options[2]=sub2;
}
function
menu2(){
sub0=new Option("elije un
compositor","sub0","defauldSelected");
sub1=new
Option("Mendelson","mendelson");
sub2=new
Option("Von-Suppé","vonsuppe");
sub3=new
Option("Bizet","bizet");
document.forms.form2.menu2.options[0]=sub0;
document.forms.form2.menu2.options[1]=sub1;
document.forms.form2.menu2.options[2]=sub2;
document.forms.form2.menu2.options[3]=sub3;
}
function
menu3(){
sub0=new Option("---elije un
actor---","sub0","defauldSelected");
sub1=new
Option("Pajares","pajares");
sub2=new
Option("Esteso","esteso");
sub3=new
Option("Resines","resines");
sub4=new
Option("Banderas","banderas");
document.forms.form2.menu2.options[0]=sub0;
document.forms.form2.menu2.options[1]=sub1;
document.forms.form2.menu2.options[2]=sub2;
document.forms.form2.menu2.options[3]=sub3;
document.forms.form2.menu2.options[4]=sub4;
}
</script>
</head>
<body>
<table align="center">
<tr>
<td
width="150">
<form
name="form1">
<select name="menu1"
onChange="combo()">
<option value="opcion0">-elije una opción-
<option value="opcion1">deporte
<option value="opcion2">música
<option
value="opcion3">cine
</select>
</form>
</td>
<td>
<form
name="form2">
<select
name="menu2">
<option
value="opcion0">------------------------
</select>
</form>
</td>
</tr>
</table>
</body>
</html>
Ejemplo B: creación de un combo de selección avanzada.-
En este ejemplo vamos a imaginar que tenemos que implementar un combo simple en el que el usuario pueda elejir cuatro opciones diferentes. Para ello vamos a implementar un combo en el que al hacerse una selección el valor de la misma es pasado a una caja de texto diferente, con lo que el usuario tendrá siempre presente qué opciones lleva elegidas. Pero ?y si el usuario selecciona dos o más veces la misma opción en el combo?. Debemos corregir esta posibilidad estableciendo un sistema tal que si se selecciona una opción que ya lo estaba, bien lanzando un mensaje de error al usuario y no se le permita hacerlo, bien haciendo que entonces la opción repetida se borre. Vamos a implementar este último camino.
Para la explicación voy a seguir un esquema no lineal, por lo que si quereis ver el código completo ordenado pincha luego con el botón de recho sobre la ventana flotante del ejemplo y selecciona "ver código fuente".
Lo primero que vamos a hacer va a ser implementar un formulario en nuestra página, que va a estar formado por un select con siete opciones, cuatro cajas de texto y los botones de envío y borrado. Además, como vamos a pasar los textos del combo a las cajas de texto, necesitamos también algo que nos vaya recogiendo los value de las opciones que elija el usuario, y esto lo logramos introduciendo en el formulario cuatro campos hidden que van a recoger estos valores. Con esto el formulario nos queda:
<form name="ejemplo" action="nada"
method="post">
<SELECT NAME="menu" SIZE=1
onChange="combo();">
<OPTION
selected>--seleccione 4
equipos--</OPTION>
<OPTION
value="1">Real
Madrid</OPTION>
<OPTION
value="2">Barcelona</OPTION>
<OPTION
value="3">Atlético de
Madrid</OPTION>
<OPTION
value="4">Bilbao</OPTION>
<OPTION
value="5">Mallorca</OPTION>
<OPTION
value="6">Deportivo</OPTION>
<OPTION
value="7">Valencia</OPTION>
</SELECT><br>
<input
type="text" name="equipo1" size="18" value=""
readonly>
<input type="text" name="equipo2" size="18"
value="" readonly>
<input type="text" name="equipo3"
size="18" value="" readonly>
<input type="text"
name="equipo4" size="18" value=""
readonly><br>
<input type="submit"
value="aceptar">
<input type="button" value="borrar"
onClick="document.forms[0].reset();">
<input
type="hidden" name="Equipo1" value="">
<input
type="hidden" name="Equipo2" value="">
<input
type="hidden" name="Equipo3" value="">
<input
type="hidden" name="Equipo4" value="">
</form>
en el que hemos establecido las cajas de texto con el atributo readonly para que el usuario no pueda modificar sus valore suna vez establecidos por el combo, y hemos implementado un botón de borrado tipo button porque nos interesará luego añadirle funcionalidad.
Una vez implementado el formulario vamos a crear nuestra función de JavaScript, que lo primero que debe hacer es pasar los textos de la opciones seleccionadas por el usuario a las cajas de texto, y los value de las mismas a los campos hidden. Para ello, la función debe ser del tipo ya visto en estos capítulos, con la única salvedad de que ahora debemos hacer una comprobación cada vez que el usuario elije una opción: si esta ya estaba en la lista de elegidas, se borrará de los dos campos (caja e hidden), y si no lo estaba, se añadirá a los siguientes vacíos:
<script language="JavaScript" type="text/javascript">
var n=0;
function combo() {
n++;
if (comboMenu()) {
if
(n==1){
document.forms[0].equipo1.value=menu_text;
document.forms[0].Equipo1.value=menu_selection;
document.forms[0].menu.selectedIndex==0;
}
else if(n==2){
if
(n==2 && document.forms[0].equipo1.value==menu_text)
{
document.forms[0].equipo1.value='';
document.forms[0].Equipo1.value='';
n=(n-2);
}
else
{
document.forms[0].equipo2.value=menu_text;
document.forms[0].Equipo2.value=menu_selection;
}
}
else if(n==3) {
if (n==3
&& document.forms[0].equipo1.value==menu_text)
{
document.forms[0].equipo1.value=document.forms[0].equipo2.value;
document.forms[0].Equipo1.value=document.forms[0].Equipo2.value;
document.forms[0].equipo2.value='';
document.forms[0].Equipo2.value='';
n=(n-2);
}
else
if (n==3 && document.forms[0].equipo2.value==menu_text)
{
document.forms[0].equipo2.value='';
document.forms[0].Equipo2.value='';
n=(n-2);
}
else
{
document.forms[0].equipo3.value=menu_text;
document.forms[0].Equipo3.value=menu_selection;
}
}
else if(n==4) {
if (n==4
&& document.forms[0].equipo1.value==menu_text)
{
document.forms[0].equipo1.value=document.forms[0].equipo2.value;
document.forms[0].Equipo1.value=document.forms[0].Equipo2.value;
document.forms[0].equipo2.value=document.forms[0].equipo3.value;
document.forms[0].Equipo2.value=document.forms[0].Equipo3.value;
document.forms[0].equipo3.value='';
document.forms[0].Equipo3.value='';
n=(n-2);
}
else
if (n==4 && document.forms[0].equipo2.value==menu_text)
{
document.forms[0].equipo2.value=document.forms[0].equipo3.value;
document.forms[0].Equipo2.value=document.forms[0].Equipo3.value;
document.forms[0].equipo.value='';
document.forms[0].Equipo3.value='';
n=(n-2);
}
else if (n==4 && document.forms[0].equipo3.value==menu_text)
{
document.forms[0].equipo3.value='';
document.forms[0].Equipo3.value='';
n=(n-2);
}
else
{
document.forms[0].equipo4.value=menu_text;
document.forms[0].Equipo4.value=menu_selection;
}
}
else if (n==5)
{
if (n==5 &&
document.forms[0].equipo1.value==menu_text)
{
document.forms[0].equipo1.value=document.forms[0].equipo2.value;
document.forms[0].Equipo1.value=document.forms[0].Equipo2.value;
document.forms[0].equipo2.value=document.forms[0].equipo3.value;
document.forms[0].Equipo2.value=document.forms[0].Equipo3.value;
document.forms[0].equipo3.value=document.forms[0].equipo4.value;
document.forms[0].Equipo3.value=document.forms[0].Equipo4.value;
document.forms[0].equipo4.value='';
document.forms[0].Equipo4.value='';
n=(n-2);
}
else
if (n==5 && document.forms[0].equipo2.value==menu_text)
{
document.forms[0].equipo2.value=document.forms[0].equipo3.value;
document.forms[0].Equipo2.value=document.forms[0].Equipo3.value;
document.forms[0].equipo3.value=document.forms[0].equipo4.value;
document.forms[0].Equipo3.value=document.forms[0].Equipo4.value;
document.forms[0].equipo.value='';
document.forms[0].Equipo4.value='';
n=(n-2);
}
else
if (n==5 && document.forms[0].equipo3.value==menu_text)
{
document.forms[0].equipo3.value=document.forms[0].equipo4.value;
document.forms[0].Equipo3.value=document.forms[0].Equipo4.value;
document.forms[0].equipo.value='';
document.forms[0].Equipo4.value='';
n=(n-2);
}
else if (n==5 && document.forms[0].equipo4.value==menu_text)
{
document.forms[0].equipo4.value='';
document.forms[0].Equipo4.value='';
n=(n-2);
}
else alert('sólo puede seleccionar 4 equipos como
máximo');
n=(3)
}
}
document.forms[0].menu.selectedIndex=0;
}
function comboMenu(form) {
var
myindex=document.forms[0].menu.selectedIndex;
if (myindex==0)
{
document.forms[0].menu.focus();
}
else
{
menu_text=document.forms[0].menu.options[myindex].text;
menu_selection=document.forms[0].menu.options[myindex].value;
return
true;
}
}
</script>
en esta función vamos
comprobando desde la segunda selección del usuario si la opción elegida estaba
ya en la lista, en cuyo caso la eleiminamos de la misma, y para que no queden
lugares vacíos, a partir del que hemos eliminado vamos corriendo todos los demás
una posición a la izquierda, tanto en las cajas de texto visibles como en los
campos hidden ocultos. Para ir controlando qué posición es la actual creamos una
variable contador "n", que se declara con valor 0 y se va aumentando cada ves
que el usuario hace una nueva elección, y al final de cada comprobación se
disminuye en 2 unidades, para mantenerlo al día (piensa porqué...). Por último,
si el usuario ha elejido ya 4 opciones e intenta hacer otra, le mandamos un
alert indicándole que ya no puede hacerlo.
Una vez implementada la función, nos falta llamarla, y esto vamos a hecerlo con el evento onChange del combo:
<select name=..... onChange="combo()">
pero...?y si el usuario vuelve a elegir la opción anterior, que ya está en las cajas de texto?. En este caso no se produciría un cambio, y no se escribiría nada. Pero para hacer la función estable por todos lados, lo que hecemos es introducir en la función una línea que lo que hace es que cada vez que se pincha el combo lo volvemos a poner en su primera opción, la que dice "selecciona 4 equipos", y así siempre tendremos controlado cuando se pincha un equipo. Estoa línea de código es:
document.forms[0].menu.selectedIndex=0;
que devuelve el foco a la primera opción cada vez que se pincha cambia la misma.
Una última consideración: si el usuario pincha el botón de borrado en algún momento tenemos que igualar la variable contador a cero, para que el proceso empiece de nuevo. Esto lo logramos asignándole este valor en el botón de borrado, que nos queda entonces:
<input type="button" value="borrar" onClick="document.forms[0].reset();n=0;">
el resultado de todo esto lo puedes ver en la siguiente ventana.
 |
Home - Articulos JavaScript - Caminando entre formularios - 1 - 2 - 3 - 4 - 5 - 6 - 7- 8