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: 224
Visitas el mes pasado: 539
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.
Lo normal cuando el usuario rellena el formulario es que nosotros queramos acceder a los datos que él ha rellenado. Mediante javascript accedemos a esos datos, y podemos comprobarlos o desencadenar una acción concreta.
Podemos acceder a los datos del texto que introduce el usuario en los
campos de texto <input type="text" ...>
,
<input type="password" ...>
y <textarea>...</textarea>
mediante la propiedad value
aplicada a estos elementos.
Tengamos por ejemplo el siguiente formulario:
<form name="rellenar" action="#" > <h2>Escribe tu texto:</h2> <p> Escribe el título : <input name="titulo" type="text"/> </p> <p>Escribe tu clave: <input name="clave" type="password" /></p> <p>Escribe el texto</p> <p><textarea name="texto"></textarea></p> <p><input name="ver" type="button" value="ver" /> </form>
La ultima etiqueta input
, de tipo button
es la que nos permitirá
manejar los demás elementos del formulario, ya que en el código javascript le
aplicamos el evento (onclick
) que permite acceder a la función
que controla el formulario.
El texto escrito por el usuario lo recogemos y presentamos en un "div" aparte, (llamado id="caja" en nuestro ejemplo), tolo ello lo vemos en el siguiente código javascript:
function escribe() { escribir = document.getElementById("caja") miTitulo = "<h1>" + document.rellenar.titulo.value + "</h1>" miClave = "<h3>" + document.rellenar.clave.value + "</h3>" miTexto = "<p>" + document.rellenar.texto.value + "</p>" escribir.innerHTML = miTitulo + miClave + miTexto } window.onload = function() { document.rellenar.ver.onclick = escribe }
Sólo nos queda poner en el body
el div donde se ve el texto, por lo
que insertaremos la siguiente línea, la cual la podemos poner antes o después del formulario:
<div id="caja"></div>
Nosotros hemos puesto esta línea delante del formulario y le hemos añadido el siguiente código CSS que convierte el div en una caja aparte:
#caja { width: 60%; float:right; border: 1px solid black; }
El resultado es la página de ejemplo que puedes ver en el siguiente enlace:
La información que normalmente queremos obtener de los botones radio o radiobuttons es saber qué botón es el que ha pulsado el usuario.
Tenemos por ejemplo el siguiente grupo de botones de radio:
<form name="elegir"> <input type="radio" value="red" name="color" /> Rojo <br/> <input type="radio" value="green" name="color" /> Verde <br/> <input type="radio" value="blue" name="color" /> Azul <br/> <input type="radio" value="black" name="color" /> Negro <br/> ... </form>
Lo primero que hacemos es acceder al mismo de la misma manera que a los otros elementos del formulario es decir, acceso al documento, luego al formulario, y después al elemento mediante el atributo name. En este ejemplo podemos acceder de cualquiera de estas dos formas:
botones = document.forms["elegir"].elements["color"];
botones = document.elegir.color
El resultado es un array que contiene todos los botones radio. Para acceder a cada uno de ellos debemos, como en cualquier array, llamarlos por su número entre corchetes.
Siguiendo el ejemplo anterior, el primer botón sería botones[0]
. A partir
de ahí podemos aplicar varias propiedades.
La propiedad checked
nos indica si el botón está seleccionado o no, esto es
lo que normalmente deseamos saber. Si el botón está seleccionado el valor devuelto es
true
, si no está seleccionado es false
. Siguiendo el ejemplo
anterior accederíamos a la propiedad checked
del primer elemento de la siguiente forma:
valor = botones[0].checked
La variable valor
será igual a true
si el botón está seleccionado, y a
false
cuando no está seleccionado.
Mirar los botones de uno en uno hasta encontrar cual es el seleccionado no suele ser un buen sistema para encontrarlo, por lo que normalmente se suele utilizar un bucle que recorra todos los elementos del array hasta dar con el que está seleccionado. Esto puede hacerse de la siguiente manera:
function info() { pulsado = document.elegir.color; for (i=0; i<pulsado.length; i++) { valor = pulsado[i].checked; if (valor == true) { elegido = pulsado[i]; } } return elegido; }
En el código anterior vemos cómo se crea un bucle que recorre todos los elementos del array. Dentro de ese bucle comprobamos cual es el elemento que esta seleccionado mediante la expresión condicional if. Una vez obtenido el elemento seleccionado, éste es devuelto mediante la expresión return para poder seguir trabajando con él.
La propiedad value, aplicada también a cualquiera de los elementos del array, nos devuelve
el valor que hayamos dado al atributo value
de ese elemento. Esto puede sernos
útil, si los valores que hemos dado podemos utilizarlos luego para el código javascript.
En el ejemplo anterior en el atributo value
hemos puesto los códigos de los
colores para utilizarlos en el lenguaje CSS; de esta manera la propiedad value
será igual al código de color necesario para utilizarlo en CSS. En el ejemplo anterior
la propiedad la obtendríamos así:
cambiaColor = elegido.value;
El valor de la variable cambiaColor
será el que hemos dado al atributo
value
; por ejemplo si hemos seleccionado el primer botón, el valor será
"red"
.
Partiendo del ejemplo anterior, podemos modificar la función para que al elegir un botón, y pulsar luego sobre un párrafo, el párrafo cambie al color seleccionado.
para ello modificaremos la función info()
de la siguiente manera:
function info() { pulsado = document.elegir.color; for (i=0; i<pulsado.length; i++) { valor = pulsado[i].checked; if (valor == true) { elegido = pulsado[i].value; } } cambio = document.getElementById("parrafo") cambio.style.color = elegido }
Para completar el código debemos escribir el párrafo que queremos que cambie
de color con el atributo id="parrafo"
:
<p id="parrafo" onclick="info()">Elige un color y pulsa luego sobre este texto para que cambie.</p>
El ejercicio quedará de la siguiente manera:
Elige un color y pulsa luego sobre este texto para que cambie.
Obtener la información de los botones tipo checkbox se hace de forma similar a como lo hemos hecho para los botones de radio. La diferencia es que aquí cada botón es independiente de los demás, y no se excluyen unos a otros como en los botones radio. Por lo tanto hay que acceder a cada boton por separado. El resultado no es un array sino el propio botón, el cual tiene las mismas propiedades que los botones de tipo radio (checked, value).
Para acceder al botón, lo haremos igual que al resto de elementos, es decir, mediante los atributos name. Tengamos por ejemplo el siguiente grupo de botones checkbox:
<form name="suscripcion" action="#"> <h2>Temas que me interesan</h2> <input type="checkbox" name="deportes" value="Deportes" /> <label for="deportes">Deportes</label><br/> <input type="checkbox" name="noticias" value="Noticias" /> <label for="noticias">Noticias</label><br/> <input type="checkbox" name="economia" value="Economia" /> <label for="economia">Economía</label><br/> <input type="checkbox" name="cultura" value ="Cultura" /> <label for="cultura">Cultura</label><br/> <input type="checkbox" name="medioambiente" value="Medio Ambiente" /> <label for="medioambiente">Medio Ambiente</label><br/><br/> <input type="button" name="ver" value="Ver Temas" onclick="info()" /> </form>
El elemento de tipo button
que hemos añadido al final es el que nos
permitirá ver la información recogida mediante los demás botones.
Para saber si un elemento checked ha sido o no seleccionado, utilizaremos la
propiedad checked
la cual devolverá true
si está seleccionado,
o false
si no lo está. Por tanto para saber si el primer botón de los
anteriores está seleccionado el código es el siguiente:
seleccion1 = document.suscripcion.deportes.checked
El valor de la variable seleccion1
será igual a true
si el botón está
seleccionado, o a false
si no lo está.
También podemos acceder al valor del atributo value
del botón mediante el
código:
valor = document.seleccion.deportes.value
el valor de la variable valor
será el que le hayamos dado al atributo
value
del propio elemento.
El siguiente código detecta en el primer elemento del ejemplo anterior, si éste está
seleccionado, y si es así proporciona el valor del atributo value
.
if (document.suscripcion.deportes.checked == true) { deportes = document.suscripcion.deportes.value; }
En este caso sólo si el elemento está seleccionado obtendremos el valor del
atributo value
.
El siguiente código javascript detecta si los botones anteriores están pulsados o no,
y devuelve en un cuadro de texto el valor del atributo value
de los que están pulsados:
El código está dentro de la función info()
que puede verse al pulsar sobre el
boton tipo button
.
function info() { texto = document.getElementById("caja") texto.innerHTML = "<h3>Usted recibirá información sobre los siguientes temas:</h3>" if (document.suscripcion.deportes.checked == true) { deportes = "<h4>" + document.suscripcion.deportes.value; + "</h4>"; } else { deportes = "" } if (document.suscripcion.noticias.checked == true) { noticias = "<h4>" + document.suscripcion.noticias.value; + "</h4>"; } else { noticias = "" } if (document.suscripcion.economia.checked == true) { economia = "<h4>" + document.suscripcion.economia.value; + "</h4>"; } else { economia = "" } if (document.suscripcion.cultura.checked == true) { cultura = "<h4>" + document.suscripcion.cultura.value; + "</h4>"; } else { cultura = "" } if (document.suscripcion.medioambiente.checked == true) { medioambiente = "<h4>" + document.suscripcion.medioambiente.value; + "</h4>"; } else { medioambiente = "" } texto.innerHTML += deportes + noticias + economia + cultura + medioambiente }
Para que esta página funcione sólo hace falta ya añadirle el div
donde se
recoge la información:
<div id="caja"> </div>
La página será parecida al del siguiente enlace:
En la página siguiente seguiremos viendo como acceder al resto de elementos de un formulario, para obtener su información
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