Formularios Javascript

1. El objeto form, propiedades y métodos
1.1 El objeto form
1.2 Propiedades principales del objeto form
1.2.1 Sintaxis básica
1.3 Métodos del objeto form
1.4 Ejemplo de aplicación
Método POST
Método GET
2. Sub-propiedades del objeto form y eventos
2.1 Sub-propiedades del objeto form
2.2 Ejemplos de aplicación
Length
Index
2.3 Los eventos que admite el objeto form
Alerta al enviar y/o restablecer un formulario
3. Valores de la propiedad action
Modificación del valor de la propiedad action
Duplicando el valor de la propiedad action (enviar un mismo formulario a dos páginas
distintas).
4. El valor de la propiedad method y target
4.1 Sobre la propiedad Method: Ejemplos de aplicación
Modificar el valor de la propiedad action
4.2 Sobre la propiedad Target: Ejemplos de aplicación
Modificar el valor de la propiedad target
5. Objetos de un formulario
5.1 Tipos de objetos, definición y sintaxis básica (campos de un formulario).
6. Los objetos text y password
6.1 Propiedades de los objetos text y password
6.2 Principales métodos de los objetos text y password

6.3 Principales eventos de los objetos text y password
6.4 Sintaxis básica
7. Los objetos text y password II
7.1 Ejemplos de aplicación I: Trabajando con el valor de un campo
Eliminar el valor de un campo al hacer click
Reproducir el valor de un campo en otro
Rellenar el valor de un campo vacío con una frase o palabra
Validar campos (forma 1)
Introducir en un solo campo los valores de distintos campos.
8. Los objetos text y password III
8.1 Ejemplos de aplicación II: Bloqueando y desbloqueando campos
Como bloquear o desbloquear un campo
8.2 Ejemplos de aplicación III: Trabajando con la propiedad size
Aumento y reducción del valor size
9. Los objetos text y password IV
9.1 Ejemplos de aplicación III: Trabajando con la propiedad length
Establecer un límite mínimo de caracteres
Establecer un límite máximo de caracteres
Establecer un límite absoluto de caracteres
Establecer un límite mínimo y uno máximo de caracteres
Contabilizar la cantidad de caracteres escritos y los restantes
Informar la cantidad de caracteres excedidos y los faltantes
10. Los objetos text y password V
10.1 Ejemplos de aplicación IV: toUpperCase y toLowerCase
Convertir el texto a mayúsculas
Convertir el texto a minúsculas
11. El objeto hidden
11.1 Usos de este objeto
12. Los objetos radio y checkbox
12.1 Propiedades de los objetos
12.2 Principales eventos
12.4 Ejemplos de aplicación I: Trabajando con la propiedad disabled

Habilitar o deshabilitar un grupo de checkbox según la opción elegida de los radio
buttons.
Habilitar o deshabilitar un grupo de checkbox según el valor de la propiedad checked de
otro checkbox.
13. Los objetos radio y checkbox II
13.1 Sintaxis básica para conocer el valor de todas las propiedades
13.1.1 Valor de value
13.1.2 Valor de name
13.1.3 Valor de disabled
13.1.4 Valor de checked
13.1.5 Valor de length
13.2 Ejemplos de aplicación II: trabajando con el valor de las propiedades
Como conocer los valores de todas las propiedades
13.3 Ejemplos de aplicación III: trabajando con propiedad checked
Aceptar los términos de un contrato antes de suscribir el formulario (realiza una acción
solo si el checkbox no ha sido marcado)
14. El objeto textarea
14.1 Propiedades básicas
14.3 Principales métodos del objeto textarea
14.4 Principales eventos del objeto textarea
Eliminar el valor de un campo al hacer click
Reproducir el valor de un campo en otro
Rellenar el valor de un campo vacío con una frase o palabra
Introducir en un solo campo los valores de distintos campos.
Como bloquear o desbloquear un campo
Establecer un límite mínimo de caracteres
Establecer un límite máximo de caracteres
Establecer un límite absoluto de caracteres
Establecer un límite mínimo y uno máximo de caracteres
Contabilizar la cantidad de caracteres escritos y los restantes
Informar la cantidad de caracteres excedidos y los faltantes
Convertir el texto a mayúsculas
Convertir el texto a minúsculas
15. Los objetos select y option
15.1 SELECT: Propiedades principales
15.2 SELECT: Sintaxis básica
15.3 SELECT: Métodos del objeto

15.4 SELECT: Eventos del objeto
15.5 OPTION: Propiedades principales
15.6 OPTION: Métodos y eventos
15.7 Sintaxis básica general: llamando a las propiedades
15.8 El constructor new Option: uso y sintaxis
16. Los objetos select y option II
La propiedad disabled: habilitar un select si ya se ha elegido una opción de otro delect
El constructor new Option: listas encadenadas. Cambian las opciones de una lista,
dependiendo de la selección realizada en otra.
Validar un select.
Modificar la propiedad text de un option.
17. El objeto file
17.1 Principales propiedades
17.2 Eventos que admite
Anexo I
Rutinas JavaScript para aplicar a formularios
• Colocar el foco en un determinado campo al cargar la página
• Convierte la primer letra de cada palabra en mayúscula
• Convierte la primer letra del texto en mayúsculas
• Escribe un valor indicado en otra ventana, en el formulario abierto
• Comprueba que el valor ingresado en dos campos no sea el mismo
• Comprueba que el valor ingresado en dos campos sea igual
• Permite seleccionar solo una determinada cantidad de checkbox del mismo nombre
• Selecciona todos los checkbox con un solo click o los deselecciona
• Selecciona todos los checkbox con un solo click o los deselecciona o invierte la selección
• Cuenta la cantidad de checkbox o radio que hay seleccionados
•
Anexo II
Más rutinas JavaScript
• Aumenta o disminuye un valor
• Cuenta la cantidad de palabras introducidas en un textarea
• Muestra o esconde el botón "submit"
• Habilita o deshabilita el botón "submit"
• Mensaje de confirmación al borrar un formulario
• Mensaje de confirmación al enviar un formulario
Conocer el objeto form, sus elementos y propiedades, su procesamiento de
datos, su envío y recepción.

El primer paso consistirá en conocer el objeto form, sus elementos y propiedades y luego
iremos viendo algunas de las distintas formas del procesamiento de datos, su envío y
recepción, etc.
1.1 El objeto form
El objeto form es un sub-objeto del objeto document y este a su vez, lo es del objeto window.
Así como para crear una página en HTML se utilizan las etiquetas <HTML> Y </HTML>, lo
mismo sucede con un formulario: el formulario debe estar contenido entre las etiquetas
<form> y </form>
En principio la sintaxis básica para referirnos a un formulario sería:
window.document.forms.nombre_del_formulario
En la que tranquilamente pueden prescindirse de window y forms ya que el navegador toma
al formulario como un objeto en sí mismo. De la misma forma, tambien puede prescindirse de
document. Pero esta omisión solo se hará si queremos referirnos a un formulario en
particular (por ejemplo a un formulario llamado "datos"). Pero al momento de referirnos a
"todos los formularios de una página", solo se podrá prescindir del objeto window.
1.2 Propiedades principales del objeto form
El objeto form posee las siguientes propiedades:
propiedad descripción
name es el nombre único del formulario.
action
es el lugar al cual se envía el formulario para ser procesado. El action
define la URL a la cual se envía dicho formulario.
method
método de envío de los datos insertados en un formulario. El method
puede ser:
GET = envía los datos en una cadena "visible". Conveniente para
enviar pocos datos.
POST = envía los datos en forma "invisible". Conveniente para enviar
una gran cantidad de datos.
target
define la ventana o marco (frame) en la que se mostrarán o
procesarán los resultados del formulario.
El valor es el mismo que el utilizado en HTML (blank, self, top,
nombre_marco, etc..)
<form name="nombre_formulario" action="procesar.asp" method="POST"
target="_blank">
.......campos....
</form>
1.3 Métodos del objeto form
El objeto form posee dos métodos:
método descripción
submit envía el formulario.
reset restablece el formulario a los valores por defecto.

<form name="nombre_formulario" action="procesar.asp" method="POST"
target="_blank">
.......campos....
<input type="submit" value="enviar formulario">
<input type="reset" value="borrar">
</form>
1.4 Ejemplo de aplicación
Con estos ejemplos veremos la utilización de la propiedad method y de los métodos submit
y reset.
Method POST
El código....
<form name="datos" action="ejemplos/procesar.asp" method="POST"
target="_blank">
Escribe tu nombre: <input type="text" name="nombre"><br>
<input type="submit" value="enviar formulario"><br>
<input type="reset" value="borrar">
</form>
El resultado...
Escribe tu nombre:
enviar formulario borrar
Otras cuestiones relativas al objeto form: propiedades index y length, y
eventos.
2.1 Sub-propiedades del objeto form
El objeto form posee dos sub-propiedades, a parte de las propiedades nombradas en el capítulo anterior.
Estas sub-propiedades son:
sub-
propiedad
descripción
index
es un array que contiene todos los formularios de una página, donde el primer
formulario es identificado con el número 0 y así sucesivamente.
length
contiene el número (cantidad) de formularios que hay en una
página.
document.forms[index]
donde index es el número correspondiente al formulario: document.forms[0] indica el primer formulario y
document.forms.length
nos indica la cantidad de formularios que hay en una página.
LENGTH
El código...
Presiona el botón para saber cuantos formularios hay en esta página:
<input type="button" value="Click aquí" onClick="alert('Hay ' +
document.forms.length + ' formularios en esta página')">
Los resultados...

Presiona el botón para saber cuantos formularios hay en esta página:
INDEX
El código...
Presiona el botón para saber el nombre del primer formulario:
<input type="button" value="Click aquí" onClick="alert('El nombre del primer
formulario es: ' + document.forms[0].name)">
Los resultados...
Presiona el botón para saber el nombre del primer formulario:
2.3 Los eventos que admite el objeto form
Si bien la mayoría de los eventos JavaScript son aceptados por el objeto form, muchos de ellos pueden
crear más problemas que soluciones y si se utilizan, es en casos muy específicos pero no usuales.
En la siguiente lista veremos los más utilizados:
evento descripción
onSubmit
es el principal evento del objeto form y se produce al enviar el formulario: ya sea
mediante el botón submit o mediante una función JavaScript que llame al método
submit()
onReset Funciona igual que el evento anterior pero se sucede al restablecer el formulario.
<form name="..." method="..." action="..." target="..." onSubmit="función"
onReset="función">
Aquí veremos un ejemplo en el que se enviará un mensaje de alerta al usuario cuando envía el formulario
o cuando lo restablece.
El código...
<form name="formulario" method="post" action="ejemplos/procesar.asp"
target="_blank" onSubmit="alert('Se enviará el formulario')" onReset="alert('Se
borrarán todos los datos insertados')">
<input type="submit" value="Enviar">
<input type="reset" value="Borrar">
</form>
Los resultados....
Escribe tu nombre:
Enviar Borrar
Mediante JavaScript, podremos modificar y seleccionar el valor de la
propiedad action.
Mediante JavaScript, podremos modificar/seleccionar el valor de la propiedad action según las
preferencias del usuario.
El ejemplo más típico sería el de un formulario de suscripción a un boletín de novedades,
donde el usuario deberá elegir, si desea darse de alta o de baja.
Modificación del valor de la propiedad action
El Script...

Tu nombre:
Edad:
De la misma forma que se puede modificar el valor de la propiedad action, pueden
modificarse method y target. Modificar el valor de la propiedad method sería un poco
inadecuado ya que el método por el cual se envían los datos, puede estar perfectamente
definido en el formulario. El valor de target puede llegar a ser más útil, si le damos al usuario
la posibilidad de decidir si quiere abrir los resultados enviados en nueva ventana, en la misma
página o en un marco de la misma.
La función que modifica el valor de method es muy similar a la que modifica
el valor de action y target.
4.1 Sobre la propiedad Method
Como se dijo anteriormente, modificar el valor de la propiedad method carece de un
verdadero sentido. Pero, de todas formas, esto siempre dependerá de lo que se necesite
hacer.
La función que modifica el valor de method es muy similar a la que modifica el valor de action
y target.
Veamos como se realiza este función:
<script languaje="javascript">
function CambiaMethod()
{ form1.method ="POST"; }
</script>
Realmente es similar a la vista en el punto anterior.
Ahora, pondremos un ejemplo en práctica, donde le damos al usuario la posibilidad de elegir
el método del envío de datos y según el tipo de envío que elija, será a la página que lo
enviemos:
El Script...
function CambiaMethod()
{
if (form1.POST.checked == true)
{
form1.method ="POST";
form1.action = "ejemplos/procesar.asp"
}
if (form1.GET.checked == true)
{
form1.method = "GET";
form1.action = "ejemplos/procesar1.asp"
}
form1.submit()
}
</script>
El formulario...
<form name="form1" method="post" action="ejemplos/procesar.asp"
target="_blank">
<input type="checkbox" name="POST" value="ON">Método POST |
<input type="checkbox" name="GET" value="ON">Método GET<br>
<input type="button" value="Enviar" onClick="CambiaMethod(this.form)">

</form>
Los resultados...
Escribe tu nombre:
Método POST | Método GET
4.2 Sobre la propiedad Target
De igual forma que en el anterior ejemplo, veremos un caso en el que el usuario seleccionará
el target en el cual desea visualizar los resultados enviados por el formulario.
El Script...
function CambiaTarget()
{
if (form2.blank.checked == true)
{
form2.target ="_blank";
}
if (form2.self.checked == true)
{
form2.target = "_self";
}
form2.submit()
}
</script>
El formulario...
<form name="form2" method="post" action="ejemplos/procesar.asp"
target="_blank">
<input type="checkbox" name="blank" value="ON">Resultados en nueva ventana |
<input type="checkbox" name="self" value="ON">en la misma ventana<br>
<input type="button" value="Enviar" onClick="CambiaTarget(this.form)">
</form>
Los resultados...
Escribe tu nombre:
Resultados en nueva ventana | en la misma ventana
Propiedades de los objetos text y password son name, value, disabled,
ReadOnly, size, length y maxlength.
6.1 Propiedades de los objetos text y password
name
nombre del campo. Es el identificador único del campo. Este
nombre no puede estar duplicado dentro del formulario.
value
valor del campo. puede establecerse un valor por defecto u
obtener el introducido mediante JavaScript.
disabled si su valor es "true", bloquea el campo de texto y no permite

introducir ningún dato en él. Dicho de una forma poco técnica, este
campo de texto "No es enviado en el formulario" y "actúa como si
no existiese". Si su valor es "false" contrarresta el efecto anterior.
ReadOnly
convierte al campo en un área de "solo lectura". A diferencia de
disabled esta propiedad, no bloquea el campo, sino que
simplemente no permite modificar su contenido.
size
El ancho "visible" de la caja de texto. NO limita la cantidad
de caracteres.
length cuenta la cantidad de caracteres introducidos en el campo.
maxlength
es la cantidad máxima de caracteres permitidos dentro del
campo.
<input type="[objeto]" name="nombre" value="valor" disabled/ReadOnly size="20"
maxlength="20">
[objeto] --> debe ser reemplazado por text o password.
disabled/ReadOnly --> debe elegirse una sola propiedad disabled o ReadOnly
Para llamar a alguna de estas propiedades, se utiliza la siguiente sintaxis:
formulario.campo.propiedad
donde:
formulario es el nombre del formulario
campo el nombre del campo
y propiedad debe ser reemplazado por el nombre de la propiedad correspondiente.
6.2 Principales métodos de los objetos text y password
focus Pone el foco en el campo.
select
Selecciona todo el texto contenido en el campo (lo
colorea de un azul estándar)
toUpperCase
Convierte el texto introducido en el campo a mayúsculas.
Está asociado a la propiedad value.
toLowerCase
Convierte el texto introducido en el campo a minúsculas.
Está asociado a la propiedad value.
formulario.campo.método()
donde:
formulario es el nombre del formulario
campo el nombre del campo
y método debe ser reemplazado por el nombre del método correspondiente.
6.3 Principales eventos de los objetos text y password

evento descripción
onFocus Permite realizar una acción al poner el foco en el campo.
onBlur
Permite realizar una acción cuando el foco ya no se
encuentra en el campo.
onSelet
Permite realizar una acción cuando se selecciona el texto
del campo.
onKeyUp /
onKeyDown
/ onKeyPress
Permite realizar una acción cuando el usuario pulsa una
tecla (en los ejemplos veremos la diferencia)
onClick
Permite realizar una acción cuando se hace click sobre el
campo.
onChange
Permite realizar una acción cuando el texto del campo
cambia por otro.
onMouseOver
/
onMouseOut
Permite realizar una acción cuando el mouse pasa por
encima del campo o lo abandona (estos eventos tienen
un uso muy restringido ya que dependen del fin que se
le quiera aplicar. Por lo general, son bastante molestos
puesto que el usuario puede pasar el mouse por error,
sobre un campo).
<input type="text" name="..." value="..." ..... evento="función">
evento debe ser reemplazado por el evento deseado (ejemplo: onFocus) y función puede
ser la función JavaScript, o una acción cualquiera.
ejemplo:
<... onFocus="alert('Mensaje de Alerta')" ...>
Tomamos los datos introducidos en distinto campos de texto y transferimos
todos los valores a un solo campo.
EJEMPLO #1:
Tenemos una caja de texto con un valor por defecto. Cuando el usuario hace click sobre el
campo, el valor "desaparece".
El código...
<form name="ejemplo1" method="POST">
<input type="text" name="usuario" value="Nombre de usuario"
onClick="ejemplo1.usuario.value=''" size="16">
<br>Password: <input type="password" name="clave" size="6" value="123456"
onClick="ejemplo1.clave.value=''">
</form>
Los resultados...
Nombre de usuar
Password:
EJEMPLO #2:

El valor introducido en una caja de texto es "reproducido" en otro campo.
El Script...
function pasaValor(form)
{ ejemplo2.campo2.value = ejemplo2.campo1.value; }
</script>
El formulrio...
Tu nombre: <input type="text" name="campo1" onKeyUp="pasaValor(this.form)"><br>
Nombre introducido: <input type="text" name="campo2" ReadOnly>
</form>
Los resultados...
Tu nombre:
Nombre introducido:
EJEMPLO #3:
Veremos aquí un ejemplo más complejo, en el cual se rellenarán los campos de texto vacíos
con la frase "No aportado"
El Script...
function rellenar()
{
var texto = "No aportado"
if (ejemplo3.nombre.value == "") { ejemplo3.nombre.value = texto; }
if (ejemplo3.telefono.value == "") { ejemplo3.telefono.value = texto; }
if (ejemplo3.ciudad.value == "") { ejemplo3.ciudad.value = texto; }
alert("Los campos en blanco se completaron automáticamente");
ejemplo3.submit()
}
</script>
El formulario...
<form name="ejemplo3" method="POST" target="_blank">
<b>Rellena tu perfil de usuario</b> (opcional)<br>
Nombre real: <input type="text" name="nombre"><br>
Teléfono: <input type="text" name="telefono"><br>
Ciudad: <input type="text" name="ciudad"><br>
<input type="button" value="Terminar" onClick="rellenar()">
</form>
Los resultados...
Rellena tu perfil de usuario (opcional)
Nombre real:
Teléfono:
Ciudad:
Si modificamos un poco el ejemplo anterior, podemos hacer que en vez de completar
automáticamente los campos, le avise al usuario que debe completarlos para poder enviar el
formulario. Esto podremos hacerlo avisando al usuario campo por campo o enviándole un
aviso en general:
EJEMPLO #4: VALIDAR CAMPOS (forma 1)

El Script...
function validar(form)
{
var error = "Por favor, antes de enviar el formulario,ncomplete los siguientes
campos:nn";
var a = ""
if (form.nombre.value == "") { a += " Nombre realn"; }
if (form.telefono.value == "") { a += " Teléfonon"; }
if (form.ciudad.value == "") { a += " Ciudadn"; }
if (a != "") { alert(error + a); return true; }
form.submit()
}
</script>
El formulario...
<b>Rellena tu perfil de usuario</b> (obligatorio)<br>
<input type="button" value="Terminar" onClick="validar(this.form)">
</form>
Rellena tu perfil de usuario (obligatorio)
Nombre real:
Teléfono:
Ciudad:
El Script...
function alerta(campo)
{ alert("Por favor, completa el campo "+campo) }
function validar2(form)
{
if (form.nombre.value == "")
{ alerta('"Nombre real"'); form.nombre.focus(); return true; }
if (form.telefono.value == "")
{ alerta('"Teléfono"'); form.telefono.focus(); return true; }
if (form.ciudad.value == "")
{ alerta('"Ciudad"'); form.ciudad.focus(); return true; }
form.submit()
}
</script>
El formulario...
<input type="button" value="Terminar" onClick="validar2(this.form)">
</form>
Los resultados...

Nombre real:
Teléfono:
Ciudad:
Otra función muy interesante con JavaScript, es aquella por la cual tomamos los datos
introducidos en distinto campos de texto y transferimos todos los valores a un solo campo. Es
ideal, por ejemplo, cuando recopilamos información sobre el domicilio de una persona o por
que no, para tantas otras cosas.
Veamos el ejemplo:
EJEMPLO #6
El Script...
function completar(form)
{
form.domicilio.value == ""
if (form.calle.value != "") { form.domicilio.value += form.calle.value + " "; }
if (form.nro.value != "") { form.domicilio.value += "N°" + form.nro.value + ",
"; }
if (form.piso.value != "") { form.domicilio.value +="Piso " + form.piso.value +
" "; }
if (form.dto.value != "") { form.domicilio.value += "Dpto. "" + form.dto.value
+ "" - "; }
if (form.cp.value != "") { form.domicilio.value += "(" + form.cp.value + ")
"; }
if (form.ciudad.value != "") { form.domicilio.value += form.ciudad.value + ",
"; }
if (form.pais.value != "") { form.domicilio.value += form.pais.value; }
}
</script>
El formulario...
<form name="ejemplo6" method="POST" action="ejemplos/ej6.asp" target="_blank">
Por favor, complete su domicilio:<br>
<br>
Calle: <input type="text" name="calle" size="40">
Nro.: <input type="text" name="nro" size="3"><br>
Piso: <input type="text" name="piso" size="2">
Departamento: <input type="text" name="dto" size="2"><br>
Código Postal: <input type="text" name="cp" size="8">
Ciudad: <input type="text" name="ciudad" size="20">
País: <input type="text" name="pais" size="20"><br><br>
Verifique su domicilio: <input type="text" name="domicilio" size="80" ReadOnly
onFocus="completar(this.form)">
<br>
Si los datos no son correctos, <a onClick="ejemplo6.domicilio.value=''"
style="cursor: hand">
presione aquí</a> y realice los cambios en los campos correspondientes.<br>
<input type="submit" value="Confirmar">
</form>
Los resultados...
Por favor, complete su domicilio:

Calle: Nro.:
Piso: Departamento:
Código Postal: Ciudad: País:
Verifique su domicilio: lo datos se verán una vez que el campo tomo el foco (puede ser mediante la tecla
TAB o haciendo click en el campo).
Si los datos no son correctos, presione aquí y realice los cambios en los campos
correspondientes.
Confirmar
Tomamos los datos introducidos en distinto campos de texto y transferimos
todos los valores a un solo campo.
EJEMPLO #1:
Tenemos una caja de texto con un valor por defecto. Cuando el usuario hace click sobre el
campo, el valor "desaparece".
El código...
<input type="text" name="usuario" value="Nombre de usuario"
onClick="ejemplo1.usuario.value=''" size="16">
<br>Password: <input type="password" name="clave" size="6" value="123456"
onClick="ejemplo1.clave.value=''">
</form>
Los resultados...
Nombre de usuar
Password:
EJEMPLO #2:
El valor introducido en una caja de texto es "reproducido" en otro campo.
El Script...
function pasaValor(form)
{ ejemplo2.campo2.value = ejemplo2.campo1.value; }
</script>
El formulrio...
Tu nombre: <input type="text" name="campo1" onKeyUp="pasaValor(this.form)"><br>
Nombre introducido: <input type="text" name="campo2" ReadOnly>
</form>
Los resultados...
Tu nombre:
Nombre introducido:
EJEMPLO #3:
Veremos aquí un ejemplo más complejo, en el cual se rellenarán los campos de texto vacíos
con la frase "No aportado"

El Script...
function rellenar()
{
var texto = "No aportado"
if (ejemplo3.nombre.value == "") { ejemplo3.nombre.value = texto; }
if (ejemplo3.telefono.value == "") { ejemplo3.telefono.value = texto; }
if (ejemplo3.ciudad.value == "") { ejemplo3.ciudad.value = texto; }
alert("Los campos en blanco se completaron automáticamente");
ejemplo3.submit()
}
</script>
El formulario...
<b>Rellena tu perfil de usuario</b> (opcional)<br>
<input type="button" value="Terminar" onClick="rellenar()">
</form>
Los resultados...
Rellena tu perfil de usuario (opcional)
Nombre real:
Teléfono:
Ciudad:
Si modificamos un poco el ejemplo anterior, podemos hacer que en vez de completar
automáticamente los campos, le avise al usuario que debe completarlos para poder enviar el
formulario. Esto podremos hacerlo avisando al usuario campo por campo o enviándole un
aviso en general:
El Script...
{
var error = "Por favor, antes de enviar el formulario,ncomplete los siguientes
campos:nn";
var a = ""
if (form.nombre.value == "") { a += " Nombre realn"; }
if (form.telefono.value == "") { a += " Teléfonon"; }
if (form.ciudad.value == "") { a += " Ciudadn"; }
if (a != "") { alert(error + a); return true; }
form.submit()
}
</script>
El formulario...

<input type="button" value="Terminar" onClick="validar(this.form)">
</form>
Nombre real:
Teléfono:
Ciudad:
El Script...
function alerta(campo)
{ alert("Por favor, completa el campo "+campo) }
function validar2(form)
{
if (form.nombre.value == "")
{ alerta('"Nombre real"'); form.nombre.focus(); return true; }
if (form.telefono.value == "")
{ alerta('"Teléfono"'); form.telefono.focus(); return true; }
if (form.ciudad.value == "")
{ alerta('"Ciudad"'); form.ciudad.focus(); return true; }
form.submit()
}
</script>
El formulario...
<input type="button" value="Terminar" onClick="validar2(this.form)">
</form>
Los resultados...
Nombre real:
Teléfono:
Ciudad:
Otra función muy interesante con JavaScript, es aquella por la cual tomamos los datos
introducidos en distinto campos de texto y transferimos todos los valores a un solo campo. Es
ideal, por ejemplo, cuando recopilamos información sobre el domicilio de una persona o por
que no, para tantas otras cosas.
Veamos el ejemplo:
EJEMPLO #6
El Script...

Lo que aquí veremos es un ejemplo muy sencillo, en el cual, el campo "clave" (password)
estará bloqueado si el campo "usuario" (text) se encuentra vacío y se desbloqueará en caso
contrario.
El script...
function bloqDesbloq()
{
a = login.usuario.value
if (a != "") { a = true; }
else { a = false; }
if (a == true) { login.clave.disabled = false; }
else { login.clave.disabled = true; }
}
</script>
El formulario...
<form name="login" method="POST" action="pagina_de_login.asp" target="_blank">
Usuario: <input type="text" name="usuario" size="10"
onKeyUp="bloqDesbloq()"><br>
Clave: <input type="password" name="clave" size="10" disabled>
</form>
Los resultados...
Usuario:
Clave:
8.2 Ejemplos de aplicación III: Trabajando con la propiedad size
No son muy frecuentes los cambios o el provecho que se le puede sacar al valor de la
propiedad size, pero en algunos casos, y sobre todo asociado a la propiedad length puede
resultar muy útil.
AUMENTO Y REDUCCIÓN DEL VALOR SIZE
Si aumenta el valor de length aumenta el tamaño de size
El script...
function aumentarSize()
{
a = ejemplo9.campo1.value.length;
if (a > 6) { ejemplo9.campo1.size =(a+1); }
if (a < 6) { ejemplo9.campo1.size = "6"; }
}
</script>
El formulario...
<form name="ejemplo9">
Campo 1: <input type="text" name="campo1" size="6" onKeyUp="aumentarSize()">
</form>
Los resultados...
Campo 1:
Utilización de la propiedad length, aplicada a varios ejemplos
9.1 Ejemplos de aplicación III: Trabajando con la propiedad length

Esta es una de las propiedades más útiles de estos objetos. Con esta propiedad, podremos
limitar una cantidad de caracteres mínimo, máximo o absoluto. Veremos entonces, 4
ejemplos:
1. LÍMITE MÍNIMO DE CARACTERES
El script...
function validarCampo1(form)
{
if (form.palabra1.value.length < 6)
{
alert('Debes introducir una palabra con un mínimo de 6 caracteres');
form.palabra1.focus(); return true;
}
}
</script>
El formulario...
<form name="form1" method="post">
Mínimo 6 caracteres: <input type="text" name="palabra1">
<input type="button" onClick="validarCampo1(this.form)" value="Enviar">
</form>
El resultado...
Mínimo 6 caracteres:
2. LÍMITE MÁXIMO DE CARACTERES
El script...
{
if (form.palabra1.value.length > 6)
{
alert('Debes introducir una palabra con un máximo de 6 caracteres');
}
}
</script>
El formulario...
Máximo 6 caracteres: <input type="text" name="palabra1">
</form>
Los resultados...
Máximo 6 caracteres:
3. LÍMITE ABSOLUTO DE CARACTERES
El script...
{

if (form.palabra1.value.length != 6)
{
alert('Debes introducir una palabra de 6 caracteres');
}
}
</script>
El formulario...
Introduce solo 6 caracteres: <input type="text" name="palabra1">
</form>
Los resultados...
Introduce solo 6 caracteres:
4. LÍMITE MÍNIMO Y MÁXIMO DE CARACTERES
El script...
{
var a = form.palabra1.value.length
if ((a < 6) || ( a > 12))
{
alert('Debes introducir una palabra con un mínimo de 6 caracteres y un
máximo de 12');
}
}
</script>
El formulario...
Mínimo 6 caracteres, máximo 12: <input type="text" name="palabra1">
</form>
Los resultados...
Mínimo 6 caracteres, máximo 12:
De igual modo, podemos hacer lo siguiente:
 Que a medida que el usuario escriba en el campo de texto se le informe la cantidad
de caracteres que ha escrito y/o los restantes.
 Que al presionar el botón, no solo se lo alerte del error de caracteres introducidos,
sino que además se lo informe de la cantidad de caracteres que ha escrito, el exceso
o resto de caracteres producidos.
Veamos los siguientes ejemplos basados en una amplitud máxima de 50 caracteres en el
primer caso y una longitud absoluta de 12 caracteres en el segundo:
CANTIDAD DE CARACTERES ESCRITOS Y CARACTERES RESTANTES
El Script...
function contar(form)
{
n = form.campo.value.length;
t = 50;

{
form.escritos.value = n;
form.restantes.value = (t-n);
}
}
</script>
El formulario...
<form name="form5" method="POST">
Máximo 50 caracteres: <input type="text" name="campo" size="50" maxlength="50"
onKeyUp="contar(this.form)"><br>
Escritos: <input type="text" ReadOnly name="escritos" size="2" value="0">
Restantes: <input type="text" ReadOnly name="restantes" size="2" value="50">
</form>
Los resultados...
Máximo 50 caracteres:
Escritos:
0
Restantes:
50
CANTIDAD DE CARACTERES EXCEDIDOS Y CARACTERES FALTANTES
El Script...
{
c = 12; // cant. máxima de caracteres
L = form.campo.value.length;
// e es el excedido
// f es el faltante
if (L > c) { e = (L-c); error = 1; }
if (L < c) { f = (c-L); error = -1; }
if ((L != c) && (error == -1))
{
alert("El campo contiene " + f + " caracteres menos a los solicitados");
form.campo.focus(); return true;
}
if ((L != c) && (error == 1))
{
alert("El campo contiene " + e + " caracteres más a los solicitados");
form.campo.focus(); return true;
}
}
</script>
El formulario...
Escribir solo 12 caracteres: <input type="text" name="campo" size="12"><br>
<input type="button" value="Enviar" onClick="validarCampo5(this.form)">
</form>
Los resultados...
Escribir solo 12 caracteres:
Ejemplos de uso de las funciones toUpperCase y toLowerCase.
9.1 Ejemplos de aplicación IV: toUpperCase y toLowerCase

Este es uno de los métodos más sencillos de emplear y veremos solo dos ejemplos pero no
nos detendremos demasiado.
CONVERTIR TODO EL TEXTO A MAYÚSCULAS
El código...
Texto: <input type="text" name="txt1" size="20"
onKeyUp="form1.txt1.value=form1.txt1.value.toUpperCase()">
</form>
Los resultados...
Texto:
si escribes el texto utilizando minúsculas notarás el cambio
CONVERTIR TODO EL TEXTO A MINÍSCULAS
El código...
Texto: <input type="text" name="txt1" size="20"
onKeyUp="form2.txt1.value=form2.txt1.value.toLowerCase()">
</form>
Los resultados...
Texto:
si escribes el texto utilizando mayúsculas notarás el cambio
Usos de este objeto componente de formularios.
11.1 Usos de este objeto
El primer punto a tener en cuenta con el objeto hidden es que este es "invisible al usuario". El
usuario no puede verlo y por lo tanto no puede interactuar con él.
El objeto hidden solo sirve para recolectar información del usuario y preferencias en forma de
texto. Por ejemplo, podremos mantener durante todos los formularios de distintas páginas, el
nombre del usuario:
<input type="hidden" name="usuario" value="Carlitos_2003">
Pero el valor (value) estará siempre impuesto por defecto.
Propiedades, eventos y ejemplos de estos objetos contenidos en
formularios.
12.1 Propiedades de los objetos
name
Es el nombre que identifica a un checkbox a un grupo de radio buttons. Para
que éstos últimos conserven la capacidad de selección única, deben tener
todos el mismo nombre.
value Es un valor asociado a cada checkbox o radio.
En el caso de los checkbox es útil asignar a un grupo de éstos con el mismo
name distintos valores. Pero si se quieres acceder a las propiedades de cada
checkbox separadamente mediante JavaScript, es mejor utilizar un name
diferente para cada checkbox, ya que de lo contrario (si todos tienen el mismo

name) la propiedad value resulta poco útil.
En el caso de los radio buttons es una propiedad necesaria siempre al tener
todos el mismo name, aunque para su acceso mediante JavaScript, esta
propiedad no es muy útil.
disabled
bloquea el checkbox o radio. Por lo tanto "No es enviado en el formulario" y
"actúa como si no existiese".
checked
marca o comprueba si está marcado un checkbox o un radio. Es una
propiedad booleana (que solo admite verdadero o falso) en la cual su valor
será "true" (verdadero) si el objeto está marcado y "false" (falso) en caso que
no lo esté.
length
es la cantidad de radio buttons que existe en un grupo determinado con el
mismo name.
index
array que contiene todos los radio buttons que hay en un grupo con el mismo
nombre. Para un grupo de 5 radio buttons con mismo nombre y diferente
valor cada uno, para referirnos al cuarto de ellos se debe usar la sintaxis:
formulario.nombre_radio[3]
evento descripción
onFocus Permite realizar una acción al poner el foco en el objeto.
onBlur Permite realizar una acción cuando el foco ya no se encuentra en el objeto.
onClick Permite realizar una acción cuando se hace click sobre el objeto.
onChange Evento que se produce al marcar/desmarcar un checkbox o un radio button.
Para un grupo de radio buttons (mismo nombre distinto valor)
<input type="radio" name="color" value="rojo">
<input type="radio" name="color" value="verde">
Para un grupo de checkbox (mismo nombre distinto valor)
<input type="checkbox" name="colores" value="rojo">
<input type="checkbox" name="colores" value="verde">
12.3 Ejemplos de aplicación I: Trabajando con la propiedad disabled
Ejemplo #1
En este caso se habilitarán o deshabilitarán los checkbox dependiendo de la opción que seleccione el
usuario de un grupo de dos radio buttons.
El Script...
function habilita(form)
{
form.intereses[0].disabled = false;
}
function deshabilita(form)
{
form.intereses[0].disabled = true;

}
</script>
El Formulario...
¿Desea suscribirse a nuestro boletín de novedades? <br>
<input type="radio" name="boletin" value="si" checked
onClick="habilita(this.form)"> SI, quiero suscribirme.
<input type="radio" name="boletin" value="no" onClick="deshabilita(this.form)">
No, gracias.
<br><br>
Seleccione los temas de su interés:<br>
<input type="checkbox" name="intereses" value="Arte y Cultura"> Arte y
Cultura<br>
<input type="checkbox" name="intereses" value="Ciencia">Ciencia<br>
<input type="checkbox" name="intereses" value="Música">Música<br>
</form>
Los resultados...
¿Desea suscribirse a nuestro boletín de novedades?
SI, quiero suscribirme. No, gracias.
Seleccione los temas de su interés:
Arte y Cultura
Ciencia
Música
Ejemplo #2
En este caso se habilitarán o deshabilitarán los checkbox dependiendo del valor de la propiedad checked
de otro checkbox.
El Script...
function habilitaDeshabilita(form)
{
if (form.boletin.checked == true)
{
}
if (form.boletin.checked == false)
{
}
}
</script>
El Formulario...
¿Desea suscribirse a nuestro boletín de novedades? <input type="checkbox"
name="boletin" value="ON" checked onClick="habilitaDeshabilita(this.form)"> SI,
quiero suscribirme.
<br><br>
Seleccione los temas de su interés:<br>
<input type="checkbox" name="intereses" value="Arte y Cultura"> Arte y
Cultura<br>
<input type="checkbox" name="intereses" value="Ciencia">Ciencia<br>

<input type="checkbox" name="intereses" value="Música">Música<br>
</form>
Los resultados...
¿Desea suscribirse a nuestro boletín de novedades? SI, quiero suscribirme.
Seleccione los temas de su interés:
Arte y Cultura
Ciencia
Música
Se presenta la sintaxis para conocer el valor de las propiedades de estos
objetos.
13.1 Sintaxis básica para conocer el valor de todas las propiedades
Para trabajar con el valor de las propiedades de un checkbox o de un radio button se trabaja de manera
distinta que con text y password. Aquí veremos primero, la sintaxis básica para conocer estos valores, y
luego los aplicaremos a algunos ejemplos.
13.1.1 Valor de value
form.nombre_del_grupo[index].value
Ejemplo:
form.grupo1[0].value
13.1.2 Valor de name
form.nombre_del_grupo.name
Ejemplo:
form.grupo1.name
13.1.3 Valor de disabled
form.nombre_del_grupo[index].disabled
Ejemplo:
form.grupo1[0].disabled
13.1.4 Valor de checked
form.nombre_del_grupo[index].checked
Ejemplo:
form.grupo1[0].checked
13.1.5 Valor de length
form.nombre_del_grupo.length
Ejemplo:
form.grupo1.length
13.2 Ejemplos de aplicación II: trabajando con el valor de las propiedades

Como habrán podido observar en los ejemplos anteriores, seguramente notaron que para poder trabajar
con un checkbox o un radio en forma particular, si pertenecen al mismo grupo, debe usarse el index. Por
eso, decía anteriormente que conocer el valor de value es poco útil, a excepción que se necesite escribir
ese valor en un campo de texto. Pero los ejemplos "combinados" entre distintos objetos los dejaremos
para más adelante. Nos limitaremos ahora, a estos dos objetos.
Información del valor de todas las propiedades
El Script...
function informar(form)
{
nombreCasilla = form.colores[0].name
valorCasilla = form.colores[0].value
valorDisabled = ""
valorChecked = ""
valorLength = form.colores.length
// definición de valorDisabled
if (form.colores[0].disabled == true)
{ valorDisabled = "está deshabilitada"; }
else
{ valorDisabled = "está habilitada"; }
// definición de valorChecked
if (form.colores[0].checked == true)
{ valorChecked = "está seleccionada"; }
else
{ valorChecked = "no está seleccionada"; }
nombreCasillaStr = "El nombre de la primer casilla es: " + nombreCasilla
valorCasillaStr = "El valor de la primer casilla es: " + valorCasilla
valorDisabledStr = "La primer casilla " + valorDisabled
valorCheckedStr = "Esta casilla " + valorChecked
valorLengthStr = "La cantidad total de casillas es: " + valorLength
// escribimos el mensaje de alerta
strAlerta = nombreCasillaStr + "n" + valorCasillaStr + "n" + valorDisabledStr
+ "n" + valorCheckedStr + "nn" + valorLengthStr
// lanzamos la acción
alert(strAlerta);
}
</script>
El formulario...
Colores:
Verde <input type="checkbox" name="colores" value="Verde"><br>
Azul <input type="checkbox" name="colores" value="Azul" disabled><br>
Rojo <input type="checkbox" name="colores" value="Rojo" disabled><br>
<input type="button" value="Mostrar información" onClick="informar(this.form)">
</form>
Los resultados...
Colores:
Verde
Azul
Rojo
13.3 Ejemplos de aplicación III: trabajando con propiedad checked

Lanzar una acción si un checkbox no se ha marcado
Aceptar los términos de un contrato antes de suscribir el formulario
El Script...
function verificarCasilla(form)
{
if (form.acepto.checked == false)
{
alert("Debes aceptar los términos del contrato antes de continuar");
form.acepto.focus(); return true;
}
form.submit()
}
</script>
El formulario...
<form name="contrato">
<b>Formulario de suscripción al servicio de acceso a Internet 0610</b><br>
... campos del formulario ...<br>
...<br>
<input type="checkbox" name="acepto"> Acepto los términos del contrato de
suscripción
<br>
<input type="button" value="Enviar" onClick="verificarCasilla(this.form)">
</form>
Los resultados...
Formulario de suscripción al servicio de acceso a Internet 0610
... campos del formulario ...
...
Acepto los términos del contrato de suscripción
En el capítulo se hace referencia a la sintaxis y propiedades de este objeto,
muy parecido al objeto text
14.1 Propiedades básicas
El objeto textarea en principio recibe el mismo tratamiento que que el objeto text con algunas pocas
diferencias. Tanto las propiedades, como los métodos y eventos son los mismos, solo se agregan los
siguientes:
cols cantidad de columnas "ancho" de la caja de texto.
rows cantidad de filas "alto" de la caja de texto
El resto de las propiedades name, value, disabled, readonly, length y maxlength reciben la misma
definición que para el objeto text. La única excepción está en size que es reemplazado por cols y rows
(ancho y alto respectivamente).
La propiedad value obtiene una pequeña diferencia con la definición dada en text por sobre todo en su
sintáxis. Veamos su sintaxis básica:
<textarea cols="30" rows="5" name="nombre">texto que actúa como
value</textarea>

Para llamar a alguna de estas propiedades, se lo hace de idéntica forma que con text:
formulario.nombre_textarea.propiedad
14.3 Principales métodos del objeto textarea
Idénticos a los del objeto text.
14.4 Principales eventos del objeto textarea
Idénticos a los del objeto text.
Los ejemplos de aplicación dados en los capítulos 7.1, 8.1, 9.1 y 10.1 correspondientes a los objetos text y
password son perfectamente aplicables a este objeto. Bastará con solo reemplazar el nombre de los
campos de texto (text) por los nombres del textarea.
Sintaxis, propiedades y eventos principales asociados a estos elementos de
formulario.
15.1 SELECT: Propiedades principales
propieda
d
descripción
name nombre del select
size establece la cantidad de opciones que a primera vista se verán en el select
option es la principal propiedad ya que permite acceder a cada opción del select.
disabled
si su valor es "true", bloquea el select y no permite realizar ningún tipo de selección. Si su
valor es "false" contrarresta el efecto anterior.
multiple permite al usuario seleccionar más de una opción (mediante la tecla Ctrl)
type informa si el select es del tipo multiple o simple.
15.2 SELECT: Sintaxis básica
<select name="nombre" size="3" multiple>
<option value="valor 1">Texto de opción 1</option>
<option value="valor 2" selected>Texto de opción 2</option>
</select>
Muestra (selección múltiple):
manteniendo apretada la tecla Ctrl (control) puede seleccionarse más de una opción
Muestra (selección simple):
valor de size "3"
valor de size "1"
solo puede seleccionarse una opción en cualquiera de los dos casos
15.3 SELECT: Métodos del objeto

focus coloca el foco en el select
15.4 SELECT: Eventos del objeto
evento descripción
onFocus se produce al colocar el foco en el select
onBlur se produce al abandonar el select (al quitar el foco)
onChange se produce al realizar un cambio de selección
15.5 OPTION: Propiedades principales
value
valor asociado a cada opción del select. Es invisible al usuario pero es el valor que se
envía junto al formulario.
text
es el texto que ve el usuario que se encuentra contenido entre las etiquetas <option> y
</option>
selected indica si una opción está seleccionada.
selectedInde
x
Da acceso a la opción (option) que ha seleccionado el usuario.
index
al igual que en form, o checkbox, este array contiene todas las opciones pertenecientes a
un select y tambien comienza por 0.
length Cuenta la cantidad de opciones (option) que conforman un select
15.6 OPTION: Métodos y eventos
El objeto option no posee métodos ni eventos propios.
15.7 Sintaxis básica general: llamando a las propiedades
En la siguiente lista veremos la forma correcta de llamar a cada propiedad en ambos objetos.
PROPIEDAD OBJETO SINTAXIS
name SELECT nombre_formulario.nombre_select.name
size SELECT nombre_formulario.nombre_select.size
option SELECT
nombre_formulario.nombre_select.options[index]
se refiere a una opción específica
formulario.select.options[formulario.select.selectedIndex].propiedad
se refiere a la opción seleccionada por el usuario
disabled SELECT nombre_formulario.nombre_select.disabled = true/false
multiple SELECT nombre_formulario.nombre_select.multiple = true/false
type SELECT nombre_formulario.nombre_select.type
value OPTION
nombre_formulario.nombre_select.options[index].value
se refiere a una opción específica
formulario.select.options[formulario.select.selectedIndex].value
se refiere a la opción seleccionada por el usuario
text OPTION nombre_formulario.nombre_select.options[index].text

selected OPTION nombre_formulario.nombre_select.options[index].selected = true/false
selectedInde
x
OPTION formulario.select.options[formulario.select.selectedIndex].propiedad
index OPTION nombre_formulario.nombre_select.options[index]
length OPTION nombre_formulario.nombre_select.options.length
15.8 El constructor new Option
Este constructor nos permite introducir nuevas opciones dentro de un select. Su sintaxis básica es la
siguiente:
variable = new Option("text","value","defaultSelected","selected")
Para introducir esta nueva opción en un select se debe usar la siguiente sintaxis:
nombre_formulario.nombre_select.options[index] = variable
Para borrar una opción existente de un select la sintaxis es la siguiente:
nombre_formulario.nombre_select.options[index] = null
Aquí encontraremos ejemplos de aplicación en los que se usarán
propiedades de este objeto.
Trabajando con la propiedad disabled
Veremos el caso en que un usuario debe elegir un producto de una lista y la cantidad que desea comprar,
de otra lista. Pero esto último, solo podrá hacerlo, si ya ha seleccionado un producto.
El Script...
function habilitar(form)
{
if (form.productos[0].selected == true)
{
form.cantidad.disabled = true;
}
else
{
form.cantidad.disabled = false;
}
}
</script>
El formulario...
<form name="ejemplo1" method="POST" target="_blank" action="pagina.htm">
<select name="productos" onChange="habilitar(this.form)">
<option value="">[Seleccione un producto]</option>
<option value="COD 001">COD 001: Producto 1</option>
</select>
<select name="cantidad" disabled>
<option value="">[cantidad]</option>
<option value="5">5 unidades</option>
</select>
<input type="submit" value="Enviar"></form>
Los resultados...

Enviar
Trabajando con el constructor new Option
Mediante este ejemplo, se generarán distintas opciones en la segunda lista dependiendo de la opción
elegida en la primera.
El Script...
function agregarOpciones(form)
{
var selec = form.tipos.options;
var combo = form.estilo.options;
combo.length = null;
if (selec[0].selected == true)
{
var seleccionar = new Option("<-- esperando selección","","","");
combo[0] = seleccionar;
}
{
var popular1 = new Option("Rock de los 90","Rock1","","");
var popular2 = new Option("Rock de los 80","Rock2","","");
combo[0] = popular1;
combo[1] = popular2;
}
{
var academica1 = new Option("Musica del Barroco","Barroco","","");
var academica2 = new Option("Musica del Siglo XX","Siglo XX","","");
var academica3 = new Option("Música del Romantisismo","Romantico","","");
combo[0] = academica1;
}
}
</script>
El formulario...
<select name="tipos" onChange="agregarOpciones(this.form)">
<option value="">[seleccione una opción]</option>
<option value="musicapopular">Música Popular (Rock)</option>
<option value="musicaacademica">Música Académica</option>
</select>
<select name="estilo">
<option value=""><-- esperando selección</option>
</select>
<input type="submit" value="Enviar"></form>
Los resultados...
Enviar
Validar un select
Como en los dos ejemplos anteriores, vimos que existen opciones que tienen un valor nulo (value=""). Se
supone que ese tipo de opciones, no debe ser enviada en un formulario, ya que no tienen ese valor. Este
ejemplo, verificará que la opción elegida, sea una opción válida.
El script...

{
if (form.combo1.options[form.combo1.selectedIndex].value == "")
{
alert("Por favor, seleccione una opción válida");
form.combo1.focus(); return true;
}
form.submit();
}
</script>
El formulario...
<select name="combo1">
<option value=" ">[seleccione una opción]</option>
<option value="opcion1">Opción 1</option>
</select>
<input type="button" value="Enviar" onClick="validar(this.form)">
</form>
Los resultados...
Modificar la propiedad text de un option
Por algún motivo, puede resultar interesante modificar el texto de un option. Aquí veremos un ejemplo de
como hacerlo.
El Script...
function modificarTexto(form)
{
var selec = form.opciones.options;
if (select[0].selected == true)
{ selec[0].text = "Esta no es una opción válida"; form.opciones.focus(); }
else {
select[form.opciones.selectedIndex].text = "Presione el botón enviar"; }
}
</script>
El formulario...
<select name="opciones" onChange="modificarTexto(this.form)">
<option value=" ">[seleccione una opción]</option>
</select>
</form>
Los resultados...
Enviar
Lista de propiedades y eventos asociados.
17.1 Principales propiedades

name nombre que identifica el objeto
size ancho de la caja de texto
disabled deshabilita el campo de texto y el botón del objeto file
evento descripción
onFocus
Permite realizar una acción al poner el foco en el campo. Es un evento
bastante molesto, porque en realidad, actúa en forma similar al evento
onClick, bloqueando el campo.
onBlur
Permite realizar una acción cuando el foco ya no se encuentra en el campo.
Tal vez, es un poco más útil que el anterior, ya que solo podría lanzarse
una acción, en caso que el campo se encuentre vacío.
Veremos varios ejemplos de scripts JavaScript aplicables a formularios que
aumentarán la funcionalidad de éste.
1. Colocar el foco en un determinado campo al cargar la página
<BODY onLoad="this.document.ejemplo1.campo1.focus()">
<form name="ejemplo1" method="GET" action="pagina.htm" target="_blank">
Escribe tu nombre: <input type="text" name="campo1" size="15">
</form>
Escribe tu nombre:
Enviar
2. Convierte la primer letra de cada palabra en mayúscula
function Convertir(objeto)
{
var index;
var tmpStr;
var tmpChar;
var preString;
var postString;
var strlen;
tmpStr = objeto.value.toLowerCase();
strLen = tmpStr.length;
if (strLen > 0)
{
for (index = 0; index < strLen; index++)
{
if (index == 0)
{
tmpChar = tmpStr.substring(0,1).toUpperCase();
postString = tmpStr.substring(1,strLen);
tmpStr = tmpChar + postString;
}
else
{

tmpChar = tmpStr.substring(index, index+1);
if (tmpChar == " " && index < (strLen-1))
{
tmpChar = tmpStr.substring(index+1, index+2).toUpperCase();
preString = tmpStr.substring(0, index+1);
postString = tmpStr.substring(index+2,strLen);
tmpStr = preString + tmpChar + postString;
}
}
}
}
objeto.value = tmpStr;
}
</script>
Escribe tu nombre: <input type="text" name="campo1" size="15"
onKeyUp="Convertir(this.ejemplo2.campo1)">
</form>
Escribe tu nombre:
Enviar
3. Convierte la primer letra del texto en mayúsculas (al enviar el formulario)
function Convertir2(form)
{
texto=form.campo1.value+" ";
texto=texto.toLowerCase();
texto1="";
punc=",.?!:;)'";
punc+='"';
while ((texto.length>0)&&(texto.indexOf(" ")>-1))
{
pos=texto.indexOf(" ");
wrd=texto.substring(0,pos);
wrdpre="";
if (punc.indexOf(wrd.substring(0,1))>-1)
{
wrdpre=wrd.substring(0,1);
wrd=wrd.substring(1,wrd.length);
}
cmp=" "+wrd+" ";
for (var i=0;i<9;i++)
{
p=wrd.indexOf(punc.substring(i,i+1));
if (p==wrd.length-1)
{
cmp=" "+wrd.substring(0,wrd.length-1)+" ";
i=9;
}
}
if (cmp.indexOf(cmp)<0)
{
ltr=wrd.substring(0,1);
ltr=ltr.toUpperCase();
wrd=ltr+wrd.substring(1,wrd.length);
}
texto1+=wrdpre+wrd+" ";
texto=texto.substring((pos+1),texto.length);
}
ltr=texto1.substring(0,1);
ltr=ltr.toUpperCase();
texto1=ltr+texto1.substring(1,texto1.length-1);
form.campo1.value=texto1;

}
</script>
Escribe tu nombre: <input type="text" name="campo1" size="15">
<input type="button" value="Enviar" onClick="Convertir2(this.form)">
</form>
Escribe tu nombre:
4. Escribe un valor indicado en otra ventana, en el formulario abierto
Formulario de la página actual
Por favor, introduce el código correspondiente al color
Código color: <input type="text" name="campo1" size="7">
<a onClick="window.open('ejemplos/paleta.htm',null,'widht=150,height=100')"
style="cursor: hand">Ver Paleta</a>
</form>
Paleta de colores (paleta.htm)
<form name="colores">
<input type="radio" name="color" value="#800000"
onClick="opener.document.ejemplo8.campo1.value=colores.color[0].value"><font
color="#800000">marrón</font>
<br>
<input type="radio" name="color" value="#FF00FF"
onClick="opener.document.ejemplo8.campo1.value=colores.color[1].value"><font
color="#FF00FF">fucsia</font>
<br>
<a href="javascript:window.close()"><b>x cerrar ventana</b></a>
</form>
Por favor, introduce el código correspondiente al color
Código color: Ver Paleta
Enviar
5. Comprueba que el valor ingresado en dos campos no sea el mismo
<script languaje="javascritp">
function validarCampos1(form)
{
if(form.campo1.value == form.campo2.value)
{
alert("La contraseña no puede ser igual al nombre de usuario");
form.campo2.value = ""; form.campo2.focus(); return true;
}
form.submit()
}
</script>
<form name="ejemplo9" method="POST" action="pagina.htm" target="_blank">
Usuario: <input type="text" name="campo1"><br>
Contraseña: <input type="password" name="campo2"><br>
<input type="button" value="Registrarse" onClick="validarCampos1(this.form)">
</form>

Usuario:
Contraseña:
6. Comprueba que el valor ingresado en dos campos sea igual
<script languaje="javascritp">
function validarCampos2(form)
{
if(form.campo2.value == form.campo1.value)
{ form.submit(); }
else
{
alert("La repetición de la contraseña no coincide.");
form.campo2.value = ""; form.campo2.focus(); return true;
}
}
</script>
Contraseña: <input type="password" name="campo1"><br>
Repetir contraseña: <input type="password" name="campo2"><br>
<input type="button" value="Registrarse" onClick="validarCampos2(this.form)">
</form>
Contraseña:
Repetir contraseña:
7. Permite seleccionar solo una determinada cantidad de checkbox del mismo nombre
function limitarSelección(casilla,form)
{
a = casilla.form.casilla1[0].checked;
b = casilla.form.casilla1[1].checked;
c = casilla.form.casilla1[2].checked;
d = casilla.form.casilla1[3].checked;
e = casilla.form.casilla1[4].checked;
contador = (a ? 1 : 0) + (b ? 1 : 0) + (c ? 1 : 0) + (d ? 1 : 0) + (e ? 1 : 0);
if (contador > 3)
{
alert("Solo puedes seleccionar 3 opciones");
casilla.checked = false;
}
}
</script>
Por favor, seleccione 3 opciones como máximo:<br>
<input type="checkbox" name="casilla1" value="Opcion 1"
onClick="limitarSelección(this,this.form)">Opción 1<br>

</form>
Por favor, seleccione 3 opciones como máximo:
Opción 1
Opción 2
Opción 3
Opción 4
Opción 5
Enviar
8. Selecciona todos los checkbox con un solo click o los deselecciona
function todos(form)
{
for (i = 0; i < form.casilla1.length; i++)
form.casilla1[i].checked = true;
form.desmarcatodos.checked = false;
}
function ninguno(form)
{
form.casilla1[i].checked = false;
form.marcatodos.checked = false;
}
</script>
<input type="checkbox" name="marcatodos" onClick="todos(this.form)">Marcar
todos |
<input type="checkbox" name="desmarcatodos"
onClick="ninguno(this.form)">Desmarcar todos
<hr>
<input type="checkbox" name="casilla1" value="Opcion 1">Opción 1<br>
<hr>
</form>
Marcar todos | Desmarcar todos
Opción 1
Opción 2
Opción 3
Opción 4
Opción 5
Enviar

9. Selecciona todos los checkbox con un solo click o los deselecciona o invierte la selección
function todos2(form)
{
form.casilla1[i].checked = true;
form.invierte.checked = false;
}
function ninguno2(form)
{
form.casilla1[i].checked = false;
form.invierte.checked = false;
}
function invertir(form)
{
form.casilla1[i].checked = !form.casilla1[i].checked;
}
</script>
<input type="checkbox" name="marcatodos" onClick="todos(this.form)">Marcar
todos |
<input type="checkbox" name="desmarcatodos"
onClick="ninguno(this.form)">Desmarcar todos |
<input type="checkbox" name="invierte" onClick="invertir(this.form)">Invertir
selección
<hr>
<hr>
</form>
Marcar todos | Desmarcar todos | Invertir selección
Opción 1
Opción 2
Opción 3
Opción 4
Opción 5
Enviar
10. Cuenta la cantidad de checkbox o radio que hay seleccionados
function ContarCasillas(form)
{
var total = 0;
var maximo = form.casilla1.length;

for(i = 0; i < maximo; i++)
if (form.casilla1[i].checked == true)
{ total +=1; }
alert("Se han seleccionado " + total + " opciones")
}
</script>
<input type="checkbox" name="casilla1" value="Rojo">Rojo<br>
<input type="checkbox" name="casilla1" value="Azul">Azul<br>
<input type="checkbox" name="casilla1" value="Amarillo">Amarillo<br>
<input type="checkbox" name="casilla1" value="Verde">Verde<br>
<input type="button" value="Contar casillas"
onClick="ContarCasillas(this.form)">
</form>
Rojo
Azul
Amarillo
Verde
6 casos más de uso de rutinas con formularios.
11. Aumenta o disminuye un valor
function validaCantidad(form)
{
if(form.cantidad.value < 1)
{
form.cantidad.value = 1;
alert("No puede comprar menos de 1 producto");
}
if(form.cantidad.value > 10)
{
form.cantidad.value = 10;
alert("La cantidad máxima de productos a comprar es de 100 productos");
}
}
</script>
Producto seleccionado: <b>COD. 7548-65 CD-R IPC</b> Cantidad:
<input type="text" name="cantidad" value="1" size="2" ReadOnly>
<input type="button" value="aumentar" onClick="ejemplo15.cantidad.value++;
validaCantidad(this.form)">
<input type="button" value="disminuir" onClick="ejemplo15.cantidad.value--;"
validaCantidad(this.form)>
</form>
Producto seleccionado: COD. 7548-65 CD-R IPC Cantidad:
1
12. Cuenta la cantidad de palabras introducidas en un textarea
function contarPalabras(form)
{
texto = form.mensaje.value

texto = texto.split(" ")
form.cantidad.value=texto.length
}
</script>
<b>Por favor, redacte aquí su mensaje</b> Palabras escritas:
<input type="text" name="cantidad" value="0" size="2"><br>
<textarea rows="4" cols="35" name="mensaje"
onKeyPress="contarPalabras(this.form); if (event.keycode1 == 13)
form.mensaje.value +=' ';"></textarea><br>
</form>
Por favor, redacte aquí su mensaje Palabras escritas:
0
Enviar
13. Muestra o esconde el botón "submit"
Esconde el botón submit si los campos están vacíos
function esconde(form)
{
if ((form.nombre.value != "") && (form.apellido.value != ""))
{ form.enviar.style.visibility = "visible"; }
else {
form.enviar.style.visibility = "hidden"; }
}
</script>
Nombre: <input type="text" name="nombre" size="20"
onKeyUp="esconde(this.form)"><br>
Apellido: <input type="text" name="apellido" size="20"
onKeyUp="esconde(this.form)"><br>
<input type="submit" name="enviar" value="Enviar" style="visibility: hidden">
</form>
Nombre:
Apellido:
Enviar
14. Habilita o deshabilita el botón "submit"
Deshabilita el botón submit si los campos están vacíos
function deshabilita(form)
{
if ((form.nombre.value != "") && (form.apellido.value != ""))
{ form.enviar.disabled = false; }
else {
form.enviar.disabled = true; }

}
</script>
Nombre: <input type="text" name="nombre" size="20"
onKeyUp="deshabilita(this.form)"><br>
Apellido: <input type="text" name="apellido" size="20"
onKeyUp="deshabilita(this.form)"><br>
<input type="submit" name="enviar" value="Enviar" disabled>
</form>
Nombre:
Apellido:
Enviar
15. Mensaje de confirmación al borrar un formulario
function ConfirmarBorrado(form)
{
borrar = window.confirm('Se borrarán todos los datos del formulario');
(borrar)?form.reset():'return false';
}
</script>
Nombre: <input type="text" name="nombre" size="20"><br>
Apellido: <input type="text" name="apellido" size="20"><br>
<input type="button" value="Borrar" onClick="ConfirmarBorrado(this.form)">
</form>
Nombre:
Apellido:
16. Mensaje de confirmación al enviar un formulario
function ConfirmarEnvio(form)
{
enviar = window.confirm('Se enviarán todos los datos del formulario');
(enviar)?form.submit():'return false';
}
</script>
Nombre: <input type="text" name="nombre" size="20"><br>
Apellido: <input type="text" name="apellido" size="20"><br>
<input type="button" value="Enviar" onClick="ConfirmarEnvio(this.form)">
</form>
Nombre:
Apellido:

Formularios Javascript

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (18)

Similar a Formularios Javascript

Similar a Formularios Javascript (20)

Último

Último (20)

Formularios Javascript