Javascript: lenguaje interactivo para dinamizar la web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 80
Visitas el mes pasado: 136
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Si este sitio te parece interesante puedes contribuir con una pequeña aportación.
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.
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
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:
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