Manual Completo Formularios Javascript

Formularios y Javascript - Manual completo Página 1 de 42
Formularios y Javascript
Manual por: DesarrolloWeb.com [http://www.desarrolloweb.com/] Versión on-line:
"Tu mejor ayuda para aprender a hacer webs" http://www.desarrolloweb.com/manuales/50
Índice
1. El objeto form, propiedades y métodos [http://www.desarrolloweb.com/articulos/1375.php?manual=50]

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 [http://www.desarrolloweb.com/articulos/1376.php?manual=50]

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 [http://www.desarrolloweb.com/articulos/1377.php?manual=50]

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 [http://www.desarrolloweb.com/articulos/1378.php?manual=50]

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 [http://www.desarrolloweb.com/articulos/1390.php?manual=50]

5.1 Tipos de objetos, definición y sintaxis básica (campos de un formulario).
6. Los objetos text y password [http://www.desarrolloweb.com/articulos/1391.php?manual=50]

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 [http://www.desarrolloweb.com/articulos/1392.php?manual=50]

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 [http://www.desarrolloweb.com/articulos/1393.php?manual=50]

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 [http://www.desarrolloweb.com/articulos/1415.php?manual=50]

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 [http://www.desarrolloweb.com/articulos/1416.php?manual=50]

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 [http://www.desarrolloweb.com/articulos/1417.php?manual=50]

11.1 Usos de este objeto
12. Los objetos radio y checkbox [http://www.desarrolloweb.com/articulos/1448.php?manual=50]

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 [http://www.desarrolloweb.com/articulos/1449.php?manual=50]

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 [http://www.desarrolloweb.com/articulos/1451.php?manual=50]

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 [http://www.desarrolloweb.com/articulos/1489.php?manual=50]

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 [http://www.desarrolloweb.com/articulos/1490.php?manual=50]

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 [http://www.desarrolloweb.com/articulos/1498.php?manual=50]

17.1 Principales propiedades
17.2 Eventos que admite
Anexo I
Rutinas JavaScript para aplicar a formularios [http://www.desarrolloweb.com/articulos/1507.php?manual=50
z Colocar el foco en un determinado campo al cargar la página
z Convierte la primer letra de cada palabra en mayúscula
z Convierte la primer letra del texto en mayúsculas
z Escribe un valor indicado en otra ventana, en el formulario abierto
z Comprueba que el valor ingresado en dos campos no sea el mismo
z Comprueba que el valor ingresado en dos campos sea igual
z Permite seleccionar solo una determinada cantidad de checkbox del mismo nombre
z Selecciona todos los checkbox con un solo click o los deselecciona
z Selecciona todos los checkbox con un solo click o los deselecciona o invierte la selección
z Cuenta la cantidad de checkbox o radio que hay seleccionados
Anexo II
Más rutinas JavaScript [http://www.desarrolloweb.com/articulos/1517.php?manual=50]
z Aumenta o disminuye un valor
z Cuenta la cantidad de palabras introducidas en un textarea
z Muestra o esconde el botón "submit"
z Habilita o deshabilita el botón "submit"
z Mensaje de confirmación al borrar un formulario
z Mensaje de confirmación al enviar un formulario
El objeto form, propiedades y métodos

El primer paso de este manual 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.
De todas formas, iremos viendo la aplicación de este tipo de sintaxis con los próximos ejemplos y a medida que
avancemos.
1.2 Propiedades principales del objeto form
El objeto form posee las siguientes propiedades:
propiedad descripción
name es el nombre único del formulario.
es el lugar al cual se envía el formulario para ser procesado. El action define la URL a la
action
cual se envía dicho formulario.
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.
method POST = envía los datos en forma "invisible". Conveniente para enviar una gran cantidad de
datos.
define la ventana o marco (frame) en la que se mostrarán o procesarán los resultados del
target 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>
</form>
El resultado...
Escribe tu nombre:
enviar formulario borrar
Method GET
El código....
<form name="datos1" action="ejemplos/procesar1.asp" method="GET" target="_blank">
<input type="submit" value="enviar formulario"><br>
</form>
El resultado...
Escribe tu nombre:
enviar formulario borrar
Sub-propiedades del objeto form 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
es un array que contiene todos los formularios de una página, donde el primer formulario
index
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: Click aquí
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: Click aquí
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
es el principal evento del objeto form y se produce al enviar el formulario: ya sea mediante
onSubmit
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
Valores de la propiedad action

Vimos en la introducción de este manual, para que sirve la propiedad action. Ahora, veremos lo que se puede hacer con
la misma mediante JavaScript.
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...
<script language="javascript">
function enviar(form)
{
if ((boletin.alta.checked == true) && (boletin.baja.checked == true))
{ alert("Por favor, marca una sola casilla"); return true; }
if ((boletin.alta.checked == false) && (boletin.baja.checked == false))

{ alert("Debes indicar si deseas darte de alta o de baja"); return true; }
if (boletin.alta.checked == true)
{ boletin.action = "ejemplos/alta.asp"; }
if (boletin.baja.checked == true)
{ boletin.action = "ejemplos/baja.asp"; }
form.submit()
}
</script>
El formulario...
<form name="boletin" method="GET" action="ejemplos/alta.asp" target="_blank">
<b>Suscripción gratuita al boletín de novedades</b><br>
Por favor, introduce tu e-mail:
<input type="text" name="email" size="20"><br>
<input type="checkbox" name="alta" value="ON"> Darme de <b>alta</b> |
<input type="checkbox" name="baja" value="ON"> Darme de baja<br>
<input type="button" onClick="enviar(this.form)" value="Enviar">
</form>
Los resultados...
Por favor, introduce tu e-mail:

g Darme de alta | g
c
d
e
f c Darme de baja
d
e
f
Enviar
Otro ejemplo muy utilizado, es enviar el mismo formulario a dos páginas diferentes. Veamos un ejemplo:
Duplicando el valor de la propiedad action
El Script...
function Envio1()
{
datos.action = "ejemplos/pagina1.asp";
datos.submit()
}
function Envio2()
{
datos.action = "ejemplos/pagina2.asp";
datos.submit()
}
</script>
El Formulario...
<form method="GET" name="datos" action="ejemplos/pagina1.asp" target="_blank">
Tu nombre: <input type="text" name="nombre"><br>
Edad: <input type="text" name="edad" size="2"><br>
<input type="button" value="Enviar" onClick="Envio1(this.form); Envio2(this.form)">
</form>
Los resultados...
Tu nombre:
Edad:
Enviar
De la misma forma que se puede modificar el valor de la propiedad action, pueden modificarse method
[http://www.desarrolloweb.com/articulos/4.htm] y target [http://www.desarrolloweb.com/articulos/4.htm]. Modificar el valor de la
propiedad method [http://www.desarrolloweb.com/articulos/4.htm] sería un poco ridículo ya que el método por el cual se envían
los datos, puede estar perfectamente definido en el formulario. El valor de target [http://www.desarrolloweb.com/articulos/4.htm]
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.
El valor de la propiedad method y target

4.1 Sobre la propiedad Method
Como dijese 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:
g Método POST | g
c
d
e
f c Método GET
d
e
f
Enviar
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:
g Resultados en nueva ventana | g
c
d
e
f c en la misma ventana
d
e
f
Enviar
Objetos de un formulario
5.1 Tipos de objetos, definición y sintaxis básica
Los objetos de un formulario (objetos del objeto form) son los "campos" de un formulario. En la siguiente tabla, podremos
apreciar los tipos de objetos con su correspondiente descripción:
objeto descripción ejemplo

es un campo de texto en el que los datos en él
text
introducidos son visibles para el usuario.
Sintaxis:
<input type="text" name=".." value=".."
size="..">
un campo de texto idéntico a text con la diferencia que
password los datos en él introducidos, no pueden ser visualizados
por el usuario, sino que son mostrados con asteriscos *
Sintaxis:
<input type="password" name=".." value=".."
size="..">
es un campo de texto oculto con un valor preestablecido
hidden
y que el usuario no podrá visualizar en ningún momento.
Sintaxis:
<input type="hidden" name=".." value="..">
es un campo de texto similar en su tratamiento a text
pero lo que en él varía es su apariencia, ya que puede
textarea
tener un alto y ancho determinado, barras de scroll para
navegar por su interior y admite saltos de línea.
Sintaxis:
<textarea rows=".."
cols="..">....texto...</textarea>
es un botón circular que permite elegir al usuario una
radio i n
j
k
l
m
n j
k
l
m
opción de entre varias pertenecientes a un mismo grupo.
Sintaxis:
<input type="radio" name=".." value="..">
es una casilla de verificación que permite al usuario
checkbox seleccionar más de una opción entre varias. Similar a c g
d
e
f
g c
d
e
f
radio pero con esta ventaja.
Sintaxis:
<input type="checkbox" name=".."
value="..">
es una lista desplegable de varias opciones. Puede opcion1

permitir la selección de una sola opción o de múltiples
option
opciones (si se mantiene presionada la tecla Crtl durante opcion1
dicha selección). opcion2
Sintaxis:
<select name=".." multiple>
<option value="..">texto1</option>
<option value="..">texto2</option>
</select>
campo compuesto que permite examinar el disco duro
file
para subir ficheros al servidor.
Examinar...
Sintaxis:
<input type="file" name="..." size="5">
es un tipo de botón que se encarga de enviar el
submit Enviar
formulario.
Sintaxis:
<input type="submit" value="..">
es un tipo de botón que se encarga de restablecer el
reset Borrar
formulario a sus valores por defecto.
Sintaxis:
<input type="reset" value="..">
es un tipo de botón al que se le pueden asignar múltiples
button Boton
funciones mediante eventos.
Sintaxis:
<input type="button" value="..">
es una imagen que actúa como botón (reset, button o
image
submit)
Sintaxis:
<input type="image" src=".." ...>
Los objetos text y password

6.1 Propiedades de los objetos text y password
nombre del campo. Es el identificador único del campo. Este nombre no puede estar
name
duplicado dentro del formulario.
valor del campo. puede establecerse un valor por defecto u obtener el introducido
value
mediante JavaScript.
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
disabled
formulario" y "actúa como si no existiese". Si su valor es "false" contrarresta el efecto
anterior.
convierte al campo en un área de "solo lectura". A diferencia de disabled esta
ReadOnly 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)
Convierte el texto introducido en el campo a mayúsculas. Está asociado a la propiedad
toUpperCase
value.
Convierte el texto introducido en el campo a minúsculas. Está asociado a la propiedad
toLowerCase
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 /
Permite realizar una acción cuando el usuario pulsa una tecla (en los ejemplos
onKeyDown /
veremos la diferencia)
onKeyPress
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.
Permite realizar una acción cuando el mouse pasa por encima del campo o lo
onMouseOver / abandona (estos eventos tienen un uso muy restringido ya que dependen del fin que
onMouseOut 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')" ...>
Los objetos text y password II

7.1 Ejemplos de aplicación I: Trabajando con el valor de un 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 usuario
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...
<form name="ejemplo2" method="POST">
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:
Terminar
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:\n\n";
var a = ""
if (form.nombre.value == "") { a += " Nombre real\n"; }

if (form.telefono.value == "") { a += " Teléfono\n"; }
if (form.ciudad.value == "") { a += " Ciudad\n"; }
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:
Terminar
EJEMPLO #5: VALIDAR CAMPOS (forma 2)
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...

<b>Rellena tu perfil de usuario</b> (obligatorio)<br>
<input type="button" value="Terminar" onClick="validar2(this.form)">
</form>
Los resultados...
Rellena tu perfil de usuario (obligatorio)

Nombre real:
Teléfono:
Ciudad:
Terminar
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
Los objetos text y password III

8.1 Ejemplos de aplicación II: Bloqueando y desbloqueando campos
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:
Los objetos text y password IV

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: Enviar
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: Enviar
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: Enviar
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: Enviar
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:

Enviar
Los objetos text y password V

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
El objeto hidden
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.
Los objetos radio y checkbox

12.1 Propiedades de los objetos
Es el nombre que identifica a un checkbox a un grupo de radio buttons. Para que éstos
name últimos conserven la capacidad de selección única, deben tener todos el mismo
nombre.
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
value 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.
bloquea el checkbox o radio. Por lo tanto "No es enviado en el formulario" y "actúa
disabled
como si no existiese".
marca o comprueba si está marcado un checkbox o un radio. Es una propiedad
checked 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é.
es la cantidad de radio buttons que existe en un grupo determinado con el mismo
length
name.
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:

index
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?

i SI, quiero suscribirme. n

j
k
l
m
n j No, gracias.
k
l
m
Seleccione los temas de su interés:

c Arte y Cultura
d
e
f
g
g Ciencia
c
d
e
f
c Música
d
e
f
g
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? g

b SI, quiero suscribirme.
c
d
e
f
Seleccione los temas de su interés:

c Arte y Cultura
d
e
f
g
c Ciencia
d
e
f
g
g Música
c
d
e
f
Los objetos radio y checkbox II

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 + "\n\n" + 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 g
c
d
e
f
Azul g
c
d
e
f
Rojo g
c
d
e
f
Mostrar información
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 ...
...
g Acepto los términos del contrato de suscripción
c
d
e
f
Enviar
El objeto textarea
14.1 Propiedades básicas
El objeto textarea en principio recibe el mismo tratamiento que que el objeto text [http://www.desarrolloweb.com/articulos/6.htm]
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 [http://www.desarrolloweb.com/articulos/6.htm]. 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 [http://www.desarrolloweb.com/articulos/6.htm].
14.4 Principales eventos del objeto textarea

Idénticos a los del objeto text [http://www.desarrolloweb.com/articulos/6.htm].

Los ejemplos de aplicación dados en los capítulos 7.1 [http://www.desarrolloweb.com/articulos/7.htm], 8.1
[http://www.desarrolloweb.com/articulos/8.htm], 9.1 [http://www.desarrolloweb.com/articulos/9.htm] y 10.1
[http://www.desarrolloweb.com/articulos/10.htm] 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.
Los objetos select y option

15.1 SELECT: Propiedades principales
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.
si su valor es "true", bloquea el select y no permite realizar ningún tipo de selección. Si su valor es "false"
disabled
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):
Texto de opción 1
Texto de opción 2
Texto de opción 3
manteniendo apretada la tecla Ctrl (control) puede seleccionarse más de una opción
Muestra (selección simple):
Texto de opción 1
Texto de opción 2
Texto de opción 3
valor de size "3"
Texto de opción 2
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
valor asociado a cada opción del select. Es invisible al usuario pero es el valor que se envía
value
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.
selectedIndex Da acceso a la opción (option) que ha seleccionado el usuario.
al igual que en form, o checkbox, este array contiene todas las opciones pertenecientes a un
index
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
nombre_formulario.nombre_select.options[index]
se refiere a una opción específica
option SELECT
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
nombre_formulario.nombre_select.options[index].value
se refiere a una opción específica
value OPTION
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
selectedIndex 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
El objeto select II
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...
[Seleccione un producto] [cantidad] 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...
[seleccione una opción] <-- esperando selección 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...
function validar(form)
{
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...
[seleccione una opción] Enviar
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...
[seleccione una opción] Enviar
El objeto file
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
Permite realizar una acción al poner el foco en el campo. Es un evento bastante
onFocus molesto, porque en realidad, actúa en forma similar al evento onClick, bloqueando el
campo.
Permite realizar una acción cuando el foco ya no se encuentra en el campo. Tal vez,
onBlur 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.
Validación de un formulario con Javascript

Vamos realizar un ejemplo de un formulario completo para validar. Las validaciones se hacen en el propio
navegador antes de enviarlo. Si hubo algún campo no relleno o con información errónea, el formulario
muestra el campo que está incorrecto y solicita al usuario que lo cambie. Si todos los datos del formulario
son correctos se envía el formulario.
Hemos querido hacer un formulario sencillo, para que el ejercicio no se haga demasiado complicado. No
obstante, se realizan validaciones en campos con distintos valores, para hacerlo más variado. Se
comprueba un campo donde debe figurar un texto, otro donde debe introducirse un número mayor que 18
y un último con un campo select donde deben haber seleccionado un valor.
Referencia: para comprender este ejercicio hace falta conocer el trabajo con formularios con Javascript
[http://www.desarrolloweb.com/manuales/50/]. Podemos aprender también Javascript desde cero
http://www.desarrolloweb.com/javascript/, si es que fuera necesario.
Se puede ver el ejemplo en funcionamiento [http://www.desarrolloweb.com/articulos/ejemplos/javascript/validar-

fomulario.html] para hacerse una idea más exacta del objetivo buscado.
El código del formulario
El formulario con el que vamos a trabajar es el siguiente:
<form name="fvalida">
<table>
<tr>
<td>Nombre: </td>
<td><input type="text" name="nombre" size="30" maxlength="100"></td>
</tr>
<tr>
<td>Edad: </td>
<td><input type="text" name="edad" size="3" maxlength="2"></td>
</tr>
<tr>
<td>Interés:</td>
<td>
<select name=interes>
<option value="Elegir">Elegir
<option value="Comercial">Contacto comercial
<option value="Clientes">Atención al cliente
<option value="Proveedores">Contacto de proveedores
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" value="Enviar"
onclick="valida_envia()"></td>
</tr>
</table>
</form>
Es un formulario cualquiera. Los únicos puntos donde debemos prestar atención son:
z El nombre del formulario, "fvalida", que utilizaremos para referirnos al él mediante Javascript.
z El botón de enviar, que en lugar de ser un submit corriente, es un botón que llama a una función, que se encarga
de validar el formulario y enviarlo si todo fue correcto.
Función Javascript para validar el formulario
Ahora veremos la función que hemos creado para validar el formulario. Se llama valida_envia().
Simplemente, para cada campo del formulario, comprueba que el valor introducido es correcto. Si no es
correcto, muestra un mensaje de alerta, pone el foco de la aplicación en el campo que ha dado el error y
abandona la función retornando el valor 0.
Si todos los campos eran correctos, la función continúa hasta el final, sin salirse, por no estar ningún
campo incorrecto. Entonces ejecuta la sentencia última, que es el envío del formulario.
Veamos la función entera, aunque luego la expliquemos por partes.
function valida_envia(){
//valido el nombre
if (document.fvalida.nombre.value.length==0){
alert("Tiene que escribir su nombre")
document.fvalida.nombre.focus()
return 0;
}
//valido la edad. tiene que ser entero mayor que 18

edad = document.fvalida.edad.value
edad = validarEntero(edad)
document.fvalida.edad.value=edad
if (edad==""){
alert("Tiene que introducir un número entero en su edad.")
document.fvalida.edad.focus()
return 0;
}else{
if (edad<18){
alert("Debe ser mayor de 18 años.")
document.fvalida.edad.focus()
return 0;
}
}
//valido el interés
if (document.fvalida.interes.selectedIndex==0){
alert("Debe seleccionar un motivo de su contacto.")
document.fvalida.interes.focus()
return 0;
}
//el formulario se envia

alert("Muchas gracias por enviar el formulario");
document.fvalida.submit();
}
En el primer bloque se valida el campo nombre. La validación que se hace es simplemente si se ha escrito
algo en el campo. Para ello comprueba si el número de caracteres escritos en el campo nombre es cero.
En ese caso, muestra el mensaje de alerta, sitúa el foco en el campo de texto y se sale de la función
devolviendo el valor 0.
Nota: el foco de la aplicación es el lugar donde está situado el cursor. El foco puede estar en cualquier
sitio. Por ejemplo en un campo de texto, en un select, en un enlace o en la propia página. Si presionamos
una tecla del teclado afecta al lugar donde está situado el foco. Si, por ejemplo, el foco está en un campo
de texto, al operar con el teclado estaremos escribiendo en ese campo de texto.
La validación de la edad mayor que 18 años tiene dos partes. Primero debemos comprobar que en el
campo de texto hay escrito un valor entero. Luego, si teníamos un entero, habría que comprobar que es
mayor que 18. Para hacer esta validación nos vamos a apoyar en una función que ya hemos visto en otro
artículo de DesarrolloWeb.com, que habla sobre cómo validar un entero en un campo de formulario
[http://www.desarrolloweb.com/articulos/707.php]. Esa función devuelve un string vació en caso de que no sea
un entero y el propio entero, si es que lo era.
Antes de realizar la validación de la edad propiamente dicha, se obtiene el valor introducido en el campo
de formulario edad y se guarda en una variable llamada edad. Luego se ejecuta la función pasando esta
edad. Su resultado lo utilizamos para volcarlo otra vez al campo de texto. Entonces, se comprueba si el
valor devuelto por la función es un string vacío. En ese caso, es que el valor escrito en el formulario no era
un entero, por lo que se muestra el mensaje de error, se sitúa el foco y se sale de la función.
En caso de que el campo edad contuviese un entero, se debe comprobar a continuación si es mayor que
18. En caso de que sea menor, se muestra el error y se sale. En caso contrario -entonces el valor sería
mayor o igual que 18-, se continúa con las comprobaciones.
Por último se valida el campo select, donde aparece el interés del supuesto visitante, que le motiva para
enviarnos el formulario. En ese campo se debe haber seleccionado cualquier opción menos la primera.
Para asegurarnos, simplemente se comprueba si el atributo selectedIndex del campo select tiene el valor
0. Ese atributo almacena el índice seleccionado en el menú desplegable. El primer campo tiene el índice 0,
el segundo el índice 1...
Si se comprueba que selectedIndex vale 0, se muestra un mensaje de alerta, se pone el foco en el campo
del formulario y se sale de la función.
Si hemos llegado hasta este punto sin salirnos de la función es que todos los campos del formulario
estaban rellenos correctamente. En ese caso se debe enviar el formulario. Antes de enviar el formulario se
muestra un mensaje de alerta, agradeciendo que se haya rellenado correctamente. Este mensaje se puede
suprimir si se desea.
Para enviar el formulario se hace una llamada al método submit() de dicho formulario.
Conclusión
Este ejercicio es de lo más básico y útil que se puede hacer en Javascript. Requiere ciertos conocimientos,
ya ligeramente avanzados, pero en el fondo no resulta complicado. Incluso ampliarlo es bastante sencillo,
siempre que sigamos un esquema similar para cada uno de los campos.
Podemos ver el resultado obtenido en una página aparte

[http://www.desarrolloweb.com/articulos/ejemplos/javascript/validar-fomulario.html].
Marcar o desmarcar todos los checkbox de un formulario con

Javascript
El ejercicio que vamos a relatar en este artículo es bastante típico de trabajo con formularios en
Javascript. Se trata de hacer un enlace para que se puedan marcar todos los campos checkbox que haya
en un formulario de una sola vez, es decir, sin tener que pulsarlos uno a uno para marcarlos todos.
También haremos la función que permita deseleccionar todos los campos checkbox del formulario de una
sola vez.
El ejercicio es simple de entender, pero podemos verlo en funcionamiento en una página aparte
[http://www.desarrolloweb.com/articulos/ejemplos/tallerjs/formulario-check.html para hacernos una idea exacta de
nuestras intenciones.
El formulario HTML
Tenemos un formulario creado con HTML que es donde estarán los checkboxes que hay que marcar y
desmarcar automáticamente. El formulario es muy sencillo. Lo vemos a continuación.
<form name="f1">
Nombre: <input type="text" name="nombre">
<br>
<input type="checkbox" name="ch1"> Opcion 1
<br>
<br>
<br>
<br>
//Otro campo de formulario:
<select name=otro>
<option value="1">Seleccion 1
<option value="2">Seleccion 2
</select>
<br>
<input type="submit">
<br>
<br>
<a href="javascript:seleccionar_todo()">Marcar todos</a> |
<a href="javascript:deseleccionar_todo()">Marcar ninguno</a>
</form>
Lo único que debemos fijarnos es que hemos colocado diversos tipos de elementos en el formulario. En
realidad sólo vamos a trabajar con el estado de los checkbox, pero hemos incluido otros elementos porque
lo habitual en un formulario es que hayan elementos de varios tipos.
Al final del formulario tenemos un par de enlaces para marcar o desmarcar todos los checkboxes de una
sola vez. Estos enlaces llaman a un par de funciones Javascript que veremos ahora.
Funciones de Javascript
function seleccionar_todo(){
for (i=0;i<document.f1.elements.length;i++)
if(document.f1.elements[i].type == "checkbox")
document.f1.elements[i].checked=1
}
La función seleccionar_todo() realiza un recorrido por todos los elementos del formulario. Para hacer un
recorrido por todos los campos se utiliza el array "elements", que guarda una referencia con cada
elemento que haya dentro del formulario.
En el recorrido comprueba si el elemento actual es de tipo "checkbox" (recordar que el array elements
contiene todos los elementos, pero sólo deseamos operar con los que sean checkbox) y en ese caso,
simplemente se actualiza el atributo "checked" al valor 1, con lo que el chekbox se marcará.
function deseleccionar_todo(){
for (i=0;i<document.f1.elements.length;i++)
if(document.f1.elements[i].type == "checkbox")
document.f1.elements[i].checked=0
}
La función deseleccionar_todo() es casi igual que la anterior. Realiza un recorrido a todos los elementos y
en el caso que sean checkbox, se fija a cero el atributo "checked" para que la caja de selección se quede
desmarcada.
El ejemplo no tiene más misterio. Se puede ver en marcha en una página aparte
[http://www.desarrolloweb.com/articulos/ejemplos/tallerjs/formulario-check.html].
Anexo I: Rutinas JS para aplicar a formularios
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>
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>
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:
Registrarse
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:
Registrarse
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:

c Opción 1
d
e
f
g
c Opción 2
d
e
f
g
c Opción 3
d
e
f
g
g Opción 4
c
d
e
f
g Opción 5
c
d
e
f
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>
c Marcar todos | g
d
e
f
g c Desmarcar todos
d
e
f
g Opción 1
c
d
e
f
c Opción 2
d
e
f
g
c Opción 3
d
e
f
g
c Opción 4
d
e
f
g
g Opción 5
c
d
e
f
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>
c Marcar todos | g
d
e
f
g c Desmarcar todos | g
d
e
f c Invertir selección
d
e
f
c Opción 1
d
e
f
g
g Opción 2
c
d
e
f
c Opción 3
d
e
f
g
c Opción 4
d
e
f
g
c Opción 5
d
e
f
g
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>
c Rojo
d
e
f
g
c Azul
d
e
f
g
g Amarillo
c
d
e
f
c Verde
d
e
f
g
Contar casillas
Anexo II: Más rutinas Javascript

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 aumentar disminuir
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:
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:
Borrar
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:
Enviar
Autores del manual:

Hay que agradecer a diversas personas la dedicación prestada para la creación de este manual. Sus
nombres junto con el número de artículos redactados por cada uno son los siguientes:
z Eugenia Bahit
Desarrolladora ASP y PHP
http://www.cmzk.com.ar/
(20 capítulos)
z Miguel Angel Alvarez

Director de DesarrolloWeb.com
(2 capítulos)
Todos los derechos de reproducción y difusión [http://www.desarrolloweb.com/copyright/] reservados a Guiarte

Multimedia S.L. [http://www.guiartemultimedia.com/]
Volver [http://www.desarrolloweb.com/manuales/50]

Manual Completo Formularios Javascript

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Manual Completo Formularios Javascript

Caricato da

Copyright:

Formati disponibili

Formularios y Javascript - Manual completo Página 1 de 42

1. El objeto form, propiedades y métodos [http://www.desarrolloweb.com/articulos/1375.php?manual=50]

2. Sub-propiedades del objeto form y eventos [http://www.desarrolloweb.com/articulos/1376.php?manual=50]

3. Valores de la propiedad action [http://www.desarrolloweb.com/articulos/1377.php?manual=50]

4. El valor de la propiedad method y target [http://www.desarrolloweb.com/articulos/1378.php?manual=50]

5. Objetos de un formulario [http://www.desarrolloweb.com/articulos/1390.php?manual=50]

6. Los objetos text y password [http://www.desarrolloweb.com/articulos/1391.php?manual=50]

7. Los objetos text y password II [http://www.desarrolloweb.com/articulos/1392.php?manual=50]

8. Los objetos text y password III [http://www.desarrolloweb.com/articulos/1393.php?manual=50]

9. Los objetos text y password IV [http://www.desarrolloweb.com/articulos/1415.php?manual=50]

9.1 Ejemplos de aplicación III: Trabajando con la propiedad length

10. Los objetos text y password V [http://www.desarrolloweb.com/articulos/1416.php?manual=50]

11. El objeto hidden [http://www.desarrolloweb.com/articulos/1417.php?manual=50]

12. Los objetos radio y checkbox [http://www.desarrolloweb.com/articulos/1448.php?manual=50]

13. Los objetos radio y checkbox II [http://www.desarrolloweb.com/articulos/1449.php?manual=50]

14. El objeto textarea [http://www.desarrolloweb.com/articulos/1451.php?manual=50]

15. Los objetos select y option [http://www.desarrolloweb.com/articulos/1489.php?manual=50]

16. Los objetos select y option II [http://www.desarrolloweb.com/articulos/1490.php?manual=50]

17. El objeto file [http://www.desarrolloweb.com/articulos/1498.php?manual=50]

El objeto form, propiedades y métodos

1.1 El objeto form

1.2 Propiedades principales del objeto form

El objeto form posee las siguientes propiedades:

1.2.1 Sintaxis básica

<form name="nombre_formulario" action="procesar.asp" method="POST" target="_blank">

1.3 Métodos del objeto form

El objeto form posee dos métodos:

1.3.1 Sintaxis básica

<form name="nombre_formulario" action="procesar.asp" method="POST" target="_blank">

1.4 Ejemplo de aplicación

Sub-propiedades del objeto form y eventos

2.1.1 Sintaxis básica

2.2 Ejemplos de aplicación

2.3 Los eventos que admite el objeto form

2.3.1 Sintaxis básica

<form name="..." method="..." action="..." target="..." onSubmit="función"

2.4 Ejemplos de aplicación

Valores de la propiedad action

Modificación del valor de la propiedad action

if ((boletin.alta.checked == false) && (boletin.baja.checked == false))

Por favor, introduce tu e-mail:

Duplicando el valor de la propiedad action

El valor de la propiedad method y target

Realmente es similar a la vista en el punto anterior.

4.2 Sobre la propiedad Target

objeto descripción ejemplo

es una lista desplegable de varias opciones. Puede opcion1

Los objetos text y password

6.1.2 Sintaxis básica

<input type="[objeto]" name="nombre" value="valor" disabled/ReadOnly size="20"

[objeto] --> debe ser reemplazado por text o password.

Para llamar a alguna de estas propiedades, se utiliza la siguiente sintaxis:

6.2 Principales métodos de los objetos text y password

6.2.1 Sintaxis básica

6.3 Principales eventos de los objetos text y password

6.4 Sintaxis básica

<input type="text" name="..." value="..." ..... evento="función">

Los objetos text y password II

<form name="ejemplo1" method="POST">

<form name="ejemplo3" method="POST" target="_blank">

<input type="button" value="Terminar" onClick="rellenar()">

Rellena tu perfil de usuario (opcional)

EJEMPLO #4: VALIDAR CAMPOS (forma 1)

if (form.nombre.value == "") { a += " Nombre real\n"; }