5.1 Trabajo con formularios en Javascript
El objeto form depende en la jerarquía de objetos del objeto document. En un objeto form podemos encontrar algunos métodos y propiedades, pero lo más destacado que podremos encontrar son cada uno de los elementos del formulario.
Para acceder a un formulario desde el objeto document podemos hacerlo de dos formas.
1. A partir de su nombre, asignado con el atributo NAME de HTML.
2. Mediante la matriz de formularios del objeto document, con el índice del formulario al que queremos acceder.
Para este formulario
<FORM name="f1">
<INPUT type=text name=campo1>
<INPUT type=text name=campo2>
</FORM>
Podremos acceder con su nombre de esta manera.
document.f1
O con su índice, si suponemos que es el primero de la página.
document.forms[0]
De similar manera accedemos a los elementos de un formulario, que dependen del objeto form.
1. A partir del nombre del objeto asignado con el atributo NAME de HTML.
2. Mediante la matriz de elementos del objeto form, con el índice del elemento al que queremos acceder.
Podríamos acceder al campo 1 del anterior formulario de dos maneras. Con su nombre lo haríamos así.
document.f1.campo1
o a partir del array de elementos.
document.f1.elements[0] (utilizamos el índice 0 porque es el primer elemento escrito en el html y en Javascript los arrays empiezan por 0.)
Si deseamos acceder al segundo campo del formulario escribiríamos una de estas dos cosas:
document.f1.campo2
document.f1.elements[1]
Recordemos que también podemos acceder a un fomulario por el array de forms, indicando el índice del formulario al que acceder. De este modo, el acceso al campo2 sería el siguiente:
document.forms[0].campo2
document.forms[0].elements[1]
5.2 Ej. trabajo con formularios. Calculadora sencilla
5.2.1 Ejemplo calculadora sencilla
En este ejemplo vamos a construir una calculadora, aunque bastante sencilla, que permita realizar las operaciones básicas.
Para hacer la calculadora vamos a realizar un formulario en el que vamos a colocar tres campos de texto, los dos primeros para los operandos y un tercero para el resultado. Además habrán unos botones para hacer las operaciones básicas.
El formulario de la calculadora se puede ver aquí.
<form name="calc">
<input type="Text" name="operando1" value="0" size="12">
<br>
<input type="Text" name="operando2" value="0" size="12">
<br>
<input type="Button" name="" value=" + " onclick="calcula('+')">
<input type="Button" name="" value=" - " onclick="calcula('-')">
<input type="Button" name="" value=" X " onclick="calcula('*')">
<input type="Button" name="" value=" / " onclick="calcula('/')">
<br>
<input type="Text" name="resultado" value="0" size="12">
</form>
Mediante una función vamos a acceder a los campos del formulario para recoger los operandos en dos variables. Los campos de texto tienen una propiedad llamada value que es donde podemos obtener lo que tienen escrito en ese momento.
Mas tarde nos ayudaremos de la función eval() para realizar la operación. Pondremos por último el resultado en el campo de texto creado en tercer lugar, utilizando también la propiedad value del campo de texto.
A la función que realiza el cálculo (que podemos ver a continuación) la llamamos apretando los botones de cada una de las operaciones. Dichos botones se pueden ver en el formulario y contienen un atributo onclick que sirve para especificar las sentencias Javascript que deseamos que se ejecuten cuando el usuario pulse sobre él. En este caso, la sentencia a ejecutar es una llamada a la función calcula() pasando como parámetro el símbolo u operador de la operación que deseamos realizar.
5.2.2 script con la función calcula()
<script>
function calcula(operacion){
var operando1 = document.calc.operando1.value
var operando2 = document.calc.operando2.value
var result = eval(operando1 + operacion + operando2)
document.calc.resultado.value = result
}
</script>
La función eval(), recordamos, que recibía un string y lo ejecutaba como una sentencia Javascript. En este caso va a recibir un número que concatenado a una operación y otro número será siempre una expresión aritmética que eval() solucionará perfectamente.
5.3 Propiedades y métodos del objeto form
Ejemplo de utilización de propiedades y una sencilla validación de formulario y envío con el método submit().
5.3.1 Propiedades del objeto form
action
Es la acción que queremos realizar cuando se submite un formulario. Se coloca generalmente una dirección de correo o la URL a la que le mandaremos los datos. Corresponde con el atributo ACTION del formulario.
elements array
La matriz de elementos contiene cada uno de los campos del formulario.
encoding
El tipo de codificación del formulario
length
El número de campos del formulario.
method
El método por el que mandamos la información. Corresponde con el atributo METHOD del formulario.
name
El nombre del formulario, que corresponde con el atributo NAME del formulario.
target
La ventana o frame en la que está dirigido el formulario. Cuando se submita se actualizará la ventana o frame indicado. Corresponde con el atributo target del formulario.
5.3.2 Ejemplos de trabajo con las propiedades
Con estas propiedades podemos cambiar dinámicamente con Javascript los valores de los atributos del formulario para hacer
con él lo que se desee dependiendo de las exigencias del momento.
Por ejemplo podríamos cambiar la URL que recibiría la información del formulario con la instrucción.
document.miFormulario.action = "miPágina.asp"
O cambiar el target para submitir un formulario en una posible ventana secundaria llamada mi_ventana.
document.miFormulario.target = "mi_ventana"
5.3.3 Métodos del objeto form
Estos son los métodos que podemos invocar con un formulario.
submit()
Para hacer que el formulario se submita, aunque no se haya pulsado el botón de submit.
reset()
Para reinicializar todos los campos del formulario, como si se hubiese pulsado el botón de reset. (Javascript 1.1)
5.3.4 Ejemplo de trabajo con los métodos
Validar un formulario para submitirlo en caso de que esté relleno. Para ello vamos a utilizar el método submit() del formulario.
El mecanismo es el siguiente: en vez de colocar un botón de submit colocamos un botón normal (<INPUT type="button">) y hacemos que al pulsar ese botón se llame a una función que es la encargada de validar el formulario y, en caso de que esté correcto, submitirlo.
<form name="miFormulario" action="mailto:promocion@guiarte.com" enctype="text/plain">
<input type="Text" name="campo1" value="" size="12">
<input type="button" value="Enviar" onclick="validaSubmite()">
</form>
Nos fijamos en que no hay botón de submit, sino un botón normal con una llamada a una función que podemos ver a continuación.
function validaSubmite(){
if (document.miFormulario.campo1.value == "")
alert("Debe rellenar el formulario")
else
document.miFormulario.submit()
}
En la función se comprueba si lo que hay escrito en el formulario es un string vacío. Si es así se muestra un mensaje de alerta que informa que se debe rellenar el formulario. En caso de haya algo en el campo de texto submite el formulario utilizando el método submit del objeto form.
5.4 Control de campos de texto con Javascript
Presetntamos campos donde podemos guardar cadenas de texto: los campos de texto, password, hidden y el campo TextArea,
5.4.1 Campo Text
Es el campo que resulta de escribir la etiqueta <INPUT type="text">.
5.4.2 Propiedades del campo text
Es el valor por defecto que tiene un campo. Lo que contiene el atributo VALUE de la etiqueta <INPUT>.
form
Hace referencia al formulario.
name
Contiene el nombre de este campo de formulario
type
Contiene el tipo de campo de formulario que es.
value
El texto que hay escrito en el campo.
Vamos a ver un ejemplo donde tenemos un formulario y un botón de reset. Si pulsamos el botón de reset el campo de texto se vacía porque su value de HTML era un string vacío. Pero si pulsamos el botón siguiente llamamos a una función que cambia el valor por defecto de ese campo de texto, de modo que al pulsar el botón de reset mostrará el nuevo valor por defecto.
<html>
<head>
<title>Cambiar el valor por defecto</title>
<script>
function cambiaDefecto(){
document.miFormulario.campo1.defaultValue = "Hola!!"
}
</script>
</head>
<body>
<form name="miFormulario" action="mailto:promocion@guiarte.com" enctype="text/plain">
<input type="Text" name="campo1" value="" size="12">
<input type="Reset">
<br>
<br>
<input type="button" value="Cambia valor por defecto" onclick="cambiaDefecto()">
</form>
</body>
</html>
5.4.3 Métodos del objeto Text
blur()
Retira el foco de la aplicación del campo de texto.
focus()
Pone el foco de la aplicación en el campo de texto.
select()
Selecciona el texto del campo.
Como ejemplo vamos a mostrar una función que selecciona el texto de un campo de texto de un formulario como el de la página del ejemplo anterior. Para hacerlo hemos utilizado dos métodos, el primero para pasar el foco de la aplicación al campo de texto y el segundo para seleccionar el texto.
function seleccionaFoco(){
document.miFormulario.campo1.focus()
document.miFormulario.campo1.select()
}
5.4.4 Campos Password
Estos funcionan igual que los hidden, con la peculiaridad que el contenido del campo no puede verse escrito en el campo, por lo que salen asteríscos en lugar del texto.
5.4.5 Campos Hidden
Los campos hidden son como campos de texto que están ocultos para el usuario, es decir, que no se ven en la página. Son muy útiles en el desarrollo de webs para pasar variables en los formularios a las que no debe tener acceso el usuario.
Se colocan en con HTML con la etiqueta <INPUT type=hidden> y se rellenan de datos con su atributo value. Mas tarde podremos cambiar el dato que figura en el campo accediendo a la propiedad value del campo de texto igual que lo hemos hecho antes.
document.miFormulario.CampoHidden.value = "nuevo texto"
El campo hidden sólo tiene algunas de las propiedades de los campos de texto. En concreto tiene la propiedad value y las propiedades que son comunes de todos los campos de formulario: name, from y type.
5.5 Control de Checkbox en Javascript
Control del elemento de formulario tipo checkbox o caja de verificación.
Los checkbox son las unas cajas que permiten marcarlas o no para verificar alguna cosa en un formulario.
Los checkbox se consiguen con la etiqueta <INPUT type=checkbox>. Con el atributo NAME de la etiqueta <INPUT> le podemos dar un nombre para luego acceder a ella con javascript. Con el atributo CHECKED indicamos que el campo debe aparecer chequeado por defecto.
Con Javascript, a partir de la jerarquía de objetos del navegador, tenemos acceso al checkbox, que depende del objeto form del formulario donde está incluido.
5.5.1 Propiedades de un checkbox
checked
Informa sobre el estado del checkbox. Puede ser true o false.
defaultChecked
Si está chequeada por defecto o no.
value
El valor actual del checkbox.
También tiene las propiedades form, name, type como cualquier otro elemento de formulario.
5.5.2 Métodos del checkbox
click()
Es como si hiciésemos un click sobre el checkbox, es decir, cambia el estado del checkbox.
blur()
Retira el foco de la aplicación del checkbox.
focus()
Coloca el foco de la aplicación en el checkbox.
Para ilustrar el funcionamiento de las checkbox vamos a ver una página que tiene un checkbox y tres botones. Los dos primeros para mostrar las propiedades checked y value y el tercero para invocar a su método click() con objetivo de simular un click sobre el checkbox.
<html>
<head>
<title>Ejemplo Checkbox</title>
<script>
function alertaChecked(){
alert(document.miFormulario.miCheck.checked)
}
function alertaValue(){
alert(document.miFormulario.miCheck.value)
}
function metodoClick(){
document.miFormulario.miCheck.click()
}
</script>
</head>
<body>
<form name="miFormulario" action="mailto:promocion@guiarte.com" enctype="text/plain">
<input type="checkbox" name="miCheck">
<br>
<br>
<input type="button" value="informa de su propiedad checked" onclick="alertaChecked()">
<input type="button" value="informa de su propiedad value" onclick="alertaValue()">
<br>
<br>
<input type="button" value="Simula un click" onclick="metodoClick()">
</form>
</body>
</html>
