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.

Aprende Web por Anyelguti is licensed under a Creative Commons Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported License.

7. Formularios (II)

7.2 Obtener datos I

Datos de campos de texto

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:

Campos de texto

Botones radio

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.

Propiedad checked

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.

propiedad value

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".

Ejercicio con botones radio

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.

Botones checkbox

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:

Acceso a botones checkbox

En la página siguiente seguiremos viendo como acceder al resto de elementos de un formulario, para obtener su información

Obtener datos II

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