Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de Javascript

Javascript: lenguaje interactivo para dinamizar la web.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

7 Formularios (III)

7.3 Obtener datos II

Listas desplegables

El acceso a la información de las listas desplegables en javascript es un poco más complicado, ya que la lista constituye un único elemento del formulario.

Normalmente la información que se desea obtener es qué opcion u opciones están seleccionadas. y a partir de ahí acceder al texto de la misma o a su atributo value.

Tenemos por ejemplo el siguiente formulario con una lista desplegable:

<form name="tipoTexto" action="#" >
<h2>Elige el tipo de letra y luego pulsa el botón para cambiarla</h2>
<select name="fuente" id="fuente" >
   <option value="arial">Arial</option>
   <option value="times new roman">Times New Roman</option>
   <option value="comic sans ms">Comic Sans MS</option>
   <option value="courier new">Courier New</option>
   <option value="verdana">Verdana</option>
   <option value="garamond">Garamond</option>
</select><br/><br/>
<input type="button" name="pulsar" onclick="letra()" 
    value="Cambiar tipo de letra" />
</form>

Lo primero que debemos hacer es acceder al elemento select. para ello procederemos como en los elementos anteriores, mediante los valores de las etiquetas name.

lista = document.tipoTexto.fuente

Una vez hemos accedido al elemento select tenemos dos propiedades que nos ayudarán a buscar la opción elegida:

options: crea un array con todas las opciones del elemento select.

opciones = lista.options;

La variable opciones será un array que contiene todos los elementos de la lista.

selectedIndex: Esta propiedad indica el número que ocupa en el array el primer elemento seleccionado. La propiedad se aplica sobre el elemento select, por lo que en este formulario será:

num = lista.selectedIndex

Ahora debemos darle al array de opciones el valor obtenido en la propiedad selectedIndex para buscar la opcion que está seleccionada.

seleccionado = opciones[num]

Si no queremos dar tantos pasos creando las variables podemos poner el código directamente con el valor de esas variables, en este caso sería:

seleccionado = lista.options[lista.selectedIndex]

Una vez hemos accedido al elemento seleccionado, éste tiene dos propiedades que pueden sernos útiles para identificarlo, estas propiedades se aplican a los elementos del array options, por lo que debemos aplicarlas al elemento una vez seleccionado.

value: nos da el valor del atributo value de la opción indicada. En el formulario anterior será:

valor =seleccionado.value;

Que es lo mismo que (incluyendo aquí todos los pasos):

valor = lista.options[lista.selectedIndex].value

text: nos da el valor del texto que vemos en pantalla de la opción indicada. En el formulario anterior será:

valor = seleccionado.text;

Que es lo mismo que poner (incluyendo aquí todos los pasos):

valor = lista.options[lista.selectedIndex].text

Partiendo del formulario anterior podemos hacer un script que nos cambie el tipo de letra de la página al seleccionarlo en las opciones y pulsar luego el elemento tipo button. El nombre de la función ya viene indicado en el elemento tipo botón: letra(); el script será el siguiente:

function letra() {
         lista = document.tipoTexto.fuente
         elegido = lista.selectedIndex
         opcion = lista.options[elegido]
         fuente = opcion.value
         texto = opcion.text
         document.body.style.fontFamily = fuente
         escribe = document.getElementById("texto")
         escribe.innerHTML = texto
         }

Para completar la página, debajo del formulario, escribiremos el siguiente código HTML.

<p >Este es el tipo de letra elegido que ves ahora en la página</p>
<h3 id="texto">Aún no has elegido ninguno, se muestra el tipo de 
    letra por defecto</h3>

Para ver como queda la página de ejemplo anterior con el script indicado pulsa en el siguiente enlace.

Cambiar tipo de letra con lista desplegable.

Listas de selección multiple

La propiedad selectedIndex no nos sirve para acceder a los elementos seleccionados en una lista de selección múltiple, es decir cuando se nos permite elegir varias opciones, ya que esta propiedad nos indica únicamente la primera opción seleccionada, sin decirnos cuáles son las demás.

Para ello utilizaremos la propiedad selected, que se aplica al array de opciones option:

seleccion = lista.option[0].selected

En este ejemplo estamos combrobando si el primer elemento de la lista está seleccionado o no; en este código lista es el elemento select del formulario, y la variable seleccion puede recibir los valores true si está seleccionada, o false si no lo está.

Para comprobar las variables que están seleccionadas, lo normal es crear un bucle que recorra el array options y nos diga mediante una instrucción if que valores están seleccionados y cuales no.

La siguiente página de ejemplo nos muestra cómo se puede acceder a los valores seleccionados en una lista desplegable con selección múltiple. Este es su código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Acceso a listas de selección multiple</title> 
<script type="text/javascript">
function escribe() {
         lista = document.elige.grupos
         opciones = lista.options
         escribir = document.getElementById("respuesta")
         escribir.innerHTML = ""
         for (i=0;i<opciones.length;i++) {
              if (opciones[i].selected == true ) {
                 grupos = opciones[i].text
                 escribir.innerHTML += grupos + "<br/>"
                 }
              }
         }
</script>
</head>
<body>
<form name="elige" action="#" >
<h2>Elige varios grupos de rock de la siguiente lista:</h2>
<select name="grupos" multiple="multiple" >
   <option value="Rolling Stones">Rolling Stones</option>
   <option value=">Led Zeppelin">Led Zeppelin</option>
   <option value="Dire Straits">Dire Straits</option>
   <option value="Pink Floid">Pink Floid</option>
   <option value="Queen">Queen</option>
   <option value="The Police">The Police</option>
</select><br/><br/>
<input type="button" name="pulsar" onclick="escribe()" 
    value="pulsa después de elegir" />
</form>
<p >Has elegido los siguientes grupos:</p>
<h4 id="respuesta"><h4>
</body>
</html>

Para ver esta página de ejemplo pulsa en el siguiente enlace

Acceso a lista de selección múltiple

Botones con texto

Los botones de tipo reset o tipo submit (botones con texto), no tienen muchas opciones en javascript, ya que con ellos el usuario no nos proporciona información, sino que sirven para que el usuario maneje la información que ya tiene escrita.

Sin embargo podemos acceder al texto que hay escrito en el botón, para modificarlo, mediante la propiedad value, por ejemplo, al siguiente formulario:

<form action="#" name="formulario">
....
<input name="enviar" type="submit" value="enviar" />
</form>

Podemos acceder al texto del botón mediante la propiedad value de la siguiente manera:

texto = document.formulario.enviar.value

La variable texto tendrá por valor el de el atributo value de este elemento, en este caso será "enviar"

si queremos cambiar el texto del botón escribiremos:

document.formulario.enviar = "enviado"

El siguiente código hace que al pulsar el botón cambie el texto que hay en el mismo:

<input name="enviar" type="submit" value="enviar" onclick="this.value = 'enviado'" />

El botón quedará de la siguiente manera:

Recuerda que los botones tipo reset y tipo submit nos permiten respectivamente borrar o resetear el formulario, y enviarlo a la direccion marcada en el atributo action de la etiqueta form.

Por otra parte también podemos utilizar los eventos onreset y onsubmit para activar el código javascript cuando el formulario sea enviado o reseteado. Estos eventos deben ponerse en la etiqueta form, al principio del formulario, aunque su efecto se produzca cuando se pulsen estos botones.

A veces podemos sustituir los botones de reset o de submit por botones tipo button, en este caso mediante código javascript indicaremos cuál es el tipo de acción que debe desencadenarse al pulsarlo.

Para enviar o resetear un formulario desde un botón tipo button utilizaremos los metodos reset() y submit() aplicados al elemento que engloba el formulario. (forms[...]. Esto lo veremos con más detalle en las páginas posteriores.

En la página siguiente veremos algunos de los trabajos más habituales que suelen hacerse en los formularios con javascript, y que suelen ir encaminados a comprobar los datos, es decir a validar el formulario. Empezaremos por los campos de texto:

7.4. Validar textos

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com