Formularios Javascript

1.
El objeto form, propiedades y mtodos

1.1 El objeto form 1.2 Propiedades principales del objeto form 1.2.1 Sintaxis bsica 1.3 Mtodos del objeto form 1.3.1 Sintaxis bsica 1.4 Ejemplo de aplicacin Mtodo POST Mtodo GET
2. Sub-propiedades del objeto form y eventos

2.1 Sub-propiedades del objeto form 2.1.1 Sintaxis bsica 2.2 Ejemplos de aplicacin Length Index 2.3 Los eventos que admite el objeto form 2.3.1 Sintaxis bsica 2.4 Ejemplos de aplicacin Alerta al enviar y/o restablecer un formulario
3. Valores de la propiedad action

3.1 Ejemplos de aplicacin
Modificacin del valor de la propiedad action Duplicando el valor de la propiedad action (enviar un mismo formulario a dos pginas distintas).
4. El valor de la propiedad method y target

4.1 Sobre la propiedad Method: Ejemplos de aplicacin Modificar el valor de la propiedad action 4.2 Sobre la propiedad Target: Ejemplos de aplicacin Modificar el valor de la propiedad target
5. Objetos de un formulario
5.1 Tipos de objetos, definicin y sintaxis bsica (campos de un formulario).
6. Los objetos text y password

6.1 Propiedades de los objetos text y password 6.1.2 Sintaxis bsica 6.2 Principales mtodos de los objetos text y password 6.2.1 Sintaxis bsica 6.3 Principales eventos de los objetos text y password 6.4 Sintaxis bsica
7. Los objetos text y password II

7.1 Ejemplos de aplicacin 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 vaco con una frase o palabra Validar campos (forma 1) Validar campos (forma 2) Introducir en un solo campo los valores de distintos campos.
8. Los objetos text y password III

8.1 Ejemplos de aplicacin II: Bloqueando y desbloqueando campos Como bloquear o desbloquear un campo 8.2 Ejemplos de aplicacin III: Trabajando con la propiedad size Aumento y reduccin del valor size
9. Los objetos text y password IV

9.1 Ejemplos de aplicacin III: Trabajando con la propiedad length Establecer un lmite mnimo de caracteres Establecer un lmite mximo de caracteres Establecer un lmite absoluto de caracteres Establecer un lmite mnimo y uno mximo 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 aplicacin IV: toUpperCase y toLowerCase
Convertir el texto a maysculas Convertir el texto a minsculas
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.3 Sintaxis bsica 12.4 Ejemplos de aplicacin I: Trabajando con la propiedad disabled Habilitar o deshabilitar un grupo de checkbox segn la opcin elegida de los radio buttons. Habilitar o deshabilitar un grupo de checkbox segn el valor de la propiedad checked de otro checkbox.
13. Los objetos radio y checkbox II

13.1 Sintaxis bsica 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 aplicacin II: trabajando con el valor de las propiedades Como conocer los valores de todas las propiedades 13.3 Ejemplos de aplicacin III: trabajando con propiedad checked
Aceptar los trminos de un contrato antes de suscribir el formulario (realiza una accin solo si el checkbox no ha sido marcado)
14. El objeto textarea

14.1 Propiedades bsicas 14.2 Sintaxis bsica 14.3 Principales mtodos del objeto textarea 14.4 Principales eventos del objeto textarea 14.5 Ejemplos de aplicacin Eliminar el valor de un campo al hacer click Reproducir el valor de un campo en otro Rellenar el valor de un campo vaco con una frase o palabra Validar campos (forma 1) Validar campos (forma 2) Introducir en un solo campo los valores de distintos campos. Como bloquear o desbloquear un campo Establecer un lmite mnimo de caracteres Establecer un lmite mximo de caracteres Establecer un lmite absoluto de caracteres Establecer un lmite mnimo y uno mximo de caracteres Contabilizar la cantidad de caracteres escritos y los restantes Informar la cantidad de caracteres excedidos y los faltantes Convertir el texto a maysculas Convertir el texto a minsculas
15. Los objetos select y option

15.1 SELECT: Propiedades principales 15.2 SELECT: Sintaxis bsica 15.3 SELECT: Mtodos del objeto 15.4 SELECT: Eventos del objeto 15.5 OPTION: Propiedades principales 15.6 OPTION: Mtodos y eventos 15.7 Sintaxis bsica general: llamando a las propiedades 15.8 El constructor new Option: uso y sintaxis
16. Los objetos select y option II

16.1 Ejemplos de aplicacin La propiedad disabled: habilitar un select si ya se ha elegido una opcin de otro delect El constructor new Option: listas encadenadas. Cambian las opciones de una lista, dependiendo de la seleccin 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 pgina Convierte la primer letra de cada palabra en mayscula Convierte la primer letra del texto en maysculas 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 seleccin Cuenta la cantidad de checkbox o radio que hay seleccionados
Anexo II
Ms rutinas JavaScript

Aumenta o disminuye un valor Cuenta la cantidad de palabras introducidas en un textarea Muestra o esconde el botn "submit" Habilita o deshabilita el botn "submit" Mensaje de confirmacin al borrar un formulario Mensaje de confirmacin al enviar un formulario
Conocer el objeto form, sus elementos y propiedades, su procesamiento de datos, su envo y recepcin. Por Eugenia Bahit
Atencin: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
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 envo y recepcin, 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 pgina 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 bsica para referirnos a un formulario sera: 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 omisin 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 pgina", solo se podr prescindir del objeto window. De todas formas, iremos viendo la aplicacin de este tipo de sintaxis con los prximos ejemplos y a medida que avancemos. 1.2 Propiedades principales del objeto form El objeto form posee las siguientes propiedades:
propiedad descripcin
name es el nombre nico del formulario. es el lugar al cual se enva el formulario para ser procesado. El action define la URL a la cual se enva dicho formulario. mtodo de envo de los datos insertados en un formulario. El method puede ser: GET = enva los datos en una cadena "visible". Conveniente para enviar pocos datos. POST = enva los datos en forma "invisible". Conveniente para enviar una gran cantidad de datos. define la ventana o marco (frame) en la que se mostrarn o procesarn los resultados del formulario. El valor es el mismo que el utilizado en HTML (blank, self, top, nombre_marco,
etc..)
action
method
target
1.2.1 Sintaxis bsica <form name="nombre_formulario" action="procesar.asp" method="POST" target="_blank"> .......campos.... </form> 1.3 Mtodos del objeto form
El objeto form posee dos mtodos:
mtodo
submit
descripcin
enva el formulario. restablece el formulario a los valores por defecto.
reset
1.3.1 Sintaxis bsica <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 aplicacin Con estos ejemplos veremos la utilizacin de la propiedad method y de los mtodos submit y reset. Method POST El cdigo.... <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
Method GET El cdigo.... <form name="datos1" action="ejemplos/procesar1.asp" method="GET" 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. Por Eugenia Bahit
2.1 Sub-propiedades del objeto form El objeto form posee dos sub-propiedades, a parte de las propiedades nombradas en el captulo anterior. Estas sub-propiedades son:
subpropiedad
index
descripcin
es un array que contiene todos los formularios de una pgina, donde el primer formulario es identificado con el nmero 0 y as sucesivamente.
length
contiene el nmero (cantidad) de formularios que hay en una pgina.
2.1.1 Sintaxis bsica document.forms[index] donde index es el nmero correspondiente al formulario: document.forms[0] indica el primer formulario y document.forms.length nos indica la cantidad de formularios que hay en una pgina. 2.2 Ejemplos de aplicacin LENGTH El cdigo... Presiona el botn para saber cuantos formularios hay en esta pgina: <input type="button" value="Click aqu" onClick="alert('Hay ' + document.forms.length + ' formularios en esta pgina')"> Los resultados... Presiona el botn para saber cuantos formularios hay en esta pgina: INDEX El cdigo... Presiona el botn 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 botn para saber el nombre del primer formulario: 2.3 Los eventos que admite el objeto form Si bien la mayora de los eventos JavaScript son aceptados por el objeto form, muchos de ellos pueden crear ms problemas que soluciones y si se utilizan, es en casos muy especficos pero no usuales. En la siguiente lista veremos los ms utilizados:
evento
onSubmit
descripcin
es el principal evento del objeto form y se produce al enviar el formulario: ya sea mediante el botn submit o mediante una funcin JavaScript que llame al mtodo submit()
onReset
funciona igual que el evento anterior pero se sucede al restablecer el formulario.
2.3.1 Sintaxis bsica <form name="..." method="..." action="..." target="..." onSubmit="funcin" onReset="funcin"> 2.4 Ejemplos de aplicacin Aqu veremos un ejemplo en el que se enviar un mensaje de alerta al usuario cuando enva el formulario o cuando lo restablece. El cdigo... <form name="formulario" method="post" action="ejemplos/procesar.asp" target="_blank" onSubmit="alert('Se enviar el formulario')" onReset="alert('Se borrarn todos los datos insertados')"> Escribe tu nombre: <input type="text" name="nombre"><br> <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. Por Eugenia Bahit
3.1 Ejemplos de aplicacin Vimos en la introduccin 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 segn las preferencias del usuario. El ejemplo ms tpico sera el de un formulario de suscripcin a un boletn de novedades, donde el usuario deber elegir, si desea darse de alta o de baja. Modificacin 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>Suscripcin gratuita al boletn 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: Darme de alta | Darme de baja
Otro ejemplo muy utilizado, es enviar el mismo formulario a dos pginas diferentes. Veamos un ejemplo: Duplicando el valor de la propiedad action
El Script... <script language="javascript"> 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:
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 sera un poco ridculo ya que el mtodo por el cual se envan los datos, puede estar perfectamente definido en el formulario. El valor de target puede llegar a ser ms til, si le damos al usuario la posibilidad de decidir si quiere abrir los resultados enviados en nueva ventana, en la misma pgina o en un marco de la misma.
La funcin que modifica el valor de method es muy similar a la que modifica el valor de action y target. Por Eugenia Bahit
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 funcin que modifica el valor de method es muy similar a la que modifica el valor de action y target. Veamos como se realiza este funcin: <script languaje="javascript"> function CambiaMethod() { form1.method ="POST"; } </script> Realmente es similar a la vista en el punto anterior. Ahora, pondremos un ejemplo en prctica, donde le damos al usuario la posibilidad de elegir el mtodo del envo de datos y segn el tipo de envo que elija, ser a la pgina que lo enviemos: El Script... <script languaje="javascript"> 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"> Escribe tu nombre: <input type="text" name="nombre"><br> <input type="checkbox" name="POST" value="ON">Mtodo POST | <input type="checkbox" name="GET" value="ON">Mtodo GET<br> <input type="button" value="Enviar" onClick="CambiaMethod(this.form)"> </form> Los resultados... Escribe tu nombre: Mtodo POST | Mtodo 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... <script languaje="javascript"> 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"> Escribe tu nombre: <input type="text" name="nombre"><br> <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
Los objetos de un formulario (objetos del objeto form) son los "campos" de un formulario. Por Eugenia Bahit
5.1 Tipos de objetos, definicin y sintaxis bsica 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 descripcin:
objeto
text
descripcin
es un campo de texto en el que los datos en l introducidos son visibles para el usuario.
ejemplo
Sintaxis:
<input type="text" name=".." value=".." size="..">
un campo de texto idntico a text con la diferencia que los datos en l introducidos, no pueden ser password visualizados por el usuario, sino que son mostrados con asteriscos *
Sintaxis:
<input type="password" name=".." value=".." size="..">
hidden
es un campo de texto oculto con un valor preestablecido y que el usuario no podr visualizar en ningn momento. Sintaxis:
<input type="hidden" name=".." value="..">
es un campo de texto similar en su tratamiento a text pero lo que en l vara es su apariencia, ya que textarea puede tener un alto y ancho determinado, barras de scroll para navegar por su interior y admite saltos de lnea. Sintaxis:
<textarea rows=".." cols="..">....texto...</textarea>
radio
es un botn circular que permite elegir al usuario una opcin de entre varias pertenecientes a un mismo grupo. Sintaxis:
<input type="radio" name=".." value="..">
es una casilla de verificacin que permite al checkbox usuario seleccionar ms de una opcin entre varias. Similar a radio pero con esta ventaja. Sintaxis:
<input type="checkbox" name=".." value="..">
option
es una lista desplegable de varias opciones. Puede permitir la seleccin de una sola opcin o de mltiples opciones (si se mantiene presionada la tecla Crtl durante dicha seleccin). Sintaxis:
<select name=".." multiple> <option value="..">texto1</option> <option value="..">texto2</option> </select>
opcion1 opcion2
file
campo compuesto que permite examinar el disco duro para subir ficheros al servidor. Sintaxis:
<input type="file" name="..." size="5">
submit
es un tipo de botn que se encarga de enviar el formulario. Sintaxis:

<input type="submit" value="..">
Enviar
reset
es un tipo de botn que se encarga de restablecer el formulario a sus valores por defecto. Sintaxis:
<input type="reset" value="..">
Borrar
button
es un tipo de botn al que se le pueden asignar mltiples funciones mediante eventos. Sintaxis:
<input type="button" value="..">
image
es una imagen que acta como botn (reset, button o submit)
Sintaxis:
<input type="image" src=".." ...>
Propiedades de los objetos text y password son name, value, disabled, ReadOnly, size, length y maxlength. Por Eugenia Bahit
6.1 Propiedades de los objetos text y password
propiedad descripcin
name nombre del campo. Es el identificador nico del campo. Este nombre no puede estar duplicado dentro del formulario. valor del campo. puede establecerse un valor por defecto u obtener el introducido mediante JavaScript. si su valor es "true", bloquea el campo de texto y no permite introducir ningn dato en l. Dicho de una forma poco tcnica, este campo de texto "No es enviado en el formulario" y "acta 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 propiedad, no bloquea el campo, sino que simplemente no permite modificar su contenido.
value disabled
ReadOnly size length
El ancho "visible" de la caja de texto. NO limita la cantidad de caracteres. cuenta la cantidad de caracteres introducidos en el campo.
maxlength es la cantidad mxima de caracteres permitidos dentro del campo.

6.1.2 Sintaxis bsica <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 mtodos de los objetos text y password
mtodo
focus
descripcin
Pone el foco en el campo.
select toUpperCase toLowerCase
Selecciona todo el texto contenido en el campo (lo colorea de un azul estndar) Convierte el texto introducido en el campo a maysculas. Est asociado a la propiedad value. Convierte el texto introducido en el campo a minsculas. Est asociado a la propiedad value.
6.2.1 Sintaxis bsica formulario.campo.mtodo() donde: formulario es el nombre del formulario campo el nombre del campo y mtodo debe ser reemplazado por el nombre del mtodo correspondiente. 6.3 Principales eventos de los objetos text y password
evento
onFocus
descripcin
Permite realizar una accin al poner el foco en el campo.
onBlur onSelet
Permite realizar una accin cuando el foco ya no se encuentra en el campo. Permite realizar una accin cuando se selecciona el texto del campo.
onKeyUp / Permite realizar una accin cuando el usuario pulsa una tecla onKeyDown / (en los ejemplos veremos la diferencia) onKeyPress onClick Permite realizar una accin cuando se hace click sobre el campo.
onChange
Permite realizar una accin cuando el texto del campo cambia por otro.
Permite realizar una accin cuando el mouse pasa por encima onMouseOver del campo o lo abandona (estos eventos tienen un uso muy restringido ya que dependen del fin que se le quiera aplicar. Por / onMouseOut lo general, son bastante molestos puesto que el usuario puede pasar el mouse por error, sobre un campo).
6.4 Sintaxis bsica <input type="text" name="..." value="..." ..... evento="funcin"> evento debe ser reemplazado por el evento deseado (ejemplo: onFocus) y funcin puede ser la funcin JavaScript, o una accin 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. Por Eugenia Bahit
7.1 Ejemplos de aplicacin 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 cdigo... <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 usuari ******
Password:
EJEMPLO #2:
El valor introducido en una caja de texto es "reproducido" en otro campo.
El Script... <script languaje="javascript"> 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 ms complejo, en el cual se rellenarn los campos de texto vacos con la frase "No aportado"
El Script... <script languaje="javascript"> 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 automticamente"); 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> Telfono: <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: Telfono: Ciudad:
Si modificamos un poco el ejemplo anterior, podemos hacer que en vez de completar automticamente los campos, le avise al usuario que debe completarlos para poder enviar el formulario. Esto podremos hacerlo avisando al usuario campo por campo o envindole un aviso en general:
EJEMPLO #4: VALIDAR CAMPOS (forma 1)
El Script... <script languaje="javascript"> 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 += " Telfono\n"; } if (form.ciudad.value == "") { a += " Ciudad\n"; } if (a != "") { alert(error + a); return true; } form.submit() } </script> El formulario... <form name="ejemplo4" method="POST" target="_blank"> <b>Rellena tu perfil de usuario</b> (obligatorio)<br> Nombre real: <input type="text" name="nombre"><br> Telfono: <input type="text" name="telefono"><br> Ciudad: <input type="text" name="ciudad"><br> <input type="button" value="Terminar" onClick="validar(this.form)"> </form>
Rellena tu perfil de usuario (obligatorio) Nombre real: Telfono: Ciudad:

EJEMPLO #5: VALIDAR CAMPOS (forma 2)
El Script... <script languaje="javascript"> 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('\"Telfono\"'); form.telefono.focus(); return true; } if (form.ciudad.value == "") { alerta('\"Ciudad\"'); form.ciudad.focus(); return true; } form.submit() }
</script> El formulario... <form name="ejemplo5" method="POST" target="_blank"> <b>Rellena tu perfil de usuario</b> (obligatorio)<br> Nombre real: <input type="text" name="nombre"><br> Telfono: <input type="text" name="telefono"><br> Ciudad: <input type="text" name="ciudad"><br> <input type="button" value="Terminar" onClick="validar2(this.form)"> </form> Los resultados... Rellena tu perfil de usuario (obligatorio) Nombre real: Telfono: Ciudad:
Otra funcin 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 informacin sobre el domicilio de una persona o por que no, para tantas otras cosas. Veamos el ejemplo:
EJEMPLO #6
El Script... <script languaje="javascript"> 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> Cdigo Postal: <input type="text" name="cp" size="8"> Ciudad: <input type="text" name="ciudad" size="20"> Pas: <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: Piso: Departamento: Ciudad: Pas: Nro.:
Cdigo Postal:
haciendo click en el campo).
Verifique su domicilio: lo datos se vern una vez que el campo tomo el foco (puede ser mediante la tecla TAB o
Si los datos no son correctos, presione aqu y realice los cambios en los campos correspondientes.
Confirmar
El campo "clave" (password) estar bloqueado si el campo "usuario" (text) se encuentra vaco y se desbloquear en caso contrario. Por Eugenia Bahit
8.1 Ejemplos de aplicacin 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 vaco y se desbloquear en caso contrario. El script... <script languaje="javascript"> 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 aplicacin 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 REDUCCIN DEL VALOR SIZE Si aumenta el valor de length aumenta el tamao de size El script... <script languaje="javascript"> 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:
Utilizacin de la propiedad length, aplicada a varios ejemplos Por Eugenia Bahit

9.1 Ejemplos de aplicacin III: Trabajando con la propiedad length Esta es una de las propiedades ms tiles de estos objetos. Con esta propiedad, podremos limitar una cantidad de caracteres mnimo, mximo o absoluto. Veremos entonces, 4 ejemplos: 1. LMITE MNIMO DE CARACTERES
El script... <script languaje="javascript">
function validarCampo1(form) { if (form.palabra1.value.length < 6) { alert('Debes introducir una palabra con un mnimo de 6 caracteres'); form.palabra1.focus(); return true; } } </script> El formulario... <form name="form1" method="post"> Mnimo 6 caracteres: <input type="text" name="palabra1"> <input type="button" onClick="validarCampo1(this.form)" value="Enviar"> </form> El resultado... Mnimo 6 caracteres: 2. LMITE MXIMO DE CARACTERES
El script... <script languaje="javascript"> function validarCampo2(form) { if (form.palabra1.value.length > 6) { alert('Debes introducir una palabra con un mximo de 6 caracteres'); form.palabra1.focus(); return true; } } </script>
El formulario...
<form name="form2" method="post"> Mximo 6 caracteres: <input type="text" name="palabra1"> <input type="button" onClick="validarCampo2(this.form)" value="Enviar"> </form> Los resultados... Mximo 6 caracteres: 3. LMITE ABSOLUTO DE CARACTERES
El script... <script languaje="javascript"> function validarCampo3(form) { if (form.palabra1.value.length != 6)
{ alert('Debes introducir una palabra de 6 caracteres'); form.palabra1.focus(); return true; } } </script> El formulario... <form name="form3" method="post"> Introduce solo 6 caracteres: <input type="text" name="palabra1"> <input type="button" onClick="validarCampo3(this.form)" value="Enviar"> </form> Los resultados... Introduce solo 6 caracteres: 4. LMITE MNIMO Y MXIMO DE CARACTERES
El script... <script languaje="javascript"> function validarCampo4(form) { var a = form.palabra1.value.length if ((a < 6) || ( a > 12)) { alert('Debes introducir una palabra con un mnimo de 6 caracteres y un mximo de 12'); form.palabra1.focus(); return true; } } </script> El formulario... <form name="form4" method="post"> Mnimo 6 caracteres, mximo 12: <input type="text" name="palabra1"> <input type="button" onClick="validarCampo4(this.form)" value="Enviar"> </form> Los resultados... Mnimo 6 caracteres, mximo 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 botn, no solo se lo alerte del error de caracteres introducidos, sino que adems 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 mxima 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...
<script languaje="javascript"> 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"> Mximo 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... Mximo 50 caracteres: Escritos:
0
Restantes:
50
CANTIDAD DE CARACTERES EXCEDIDOS Y CARACTERES FALTANTES
El Script... <script languaje="javascript"> function validarCampo5(form) { c = 12; // cant. mxima 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 ms a los solicitados"); form.campo.focus(); return true; } } </script> El formulario... <form name="form6" method="POST">
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. Por Eugenia Bahit

9.1 Ejemplos de aplicacin IV: toUpperCase y toLowerCase Este es uno de los mtodos ms sencillos de emplear y veremos solo dos ejemplos pero no nos detendremos demasiado. CONVERTIR TODO EL TEXTO A MAYSCULAS
El cdigo... <form name="form1" method="POST"> 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 minsculas notars el cambio
CONVERTIR TODO EL TEXTO A MINSCULAS
El cdigo... <form name="form2" method="POST"> 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 maysculas notars el cambio
Usos de este objeto componente de formularios. Por Eugenia Bahit

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 informacin del usuario y preferencias en forma de texto. Por ejemplo, podremos mantener durante todos los formularios de distintas pginas, 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. Por Eugenia Bahit
12.1 Propiedades de los objetos propiedad name descripcin Es el nombre que identifica a un checkbox a un grupo de radio buttons. Para que stos ltimos conserven la capacidad de seleccin 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 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 "acta como si no existiese". 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. es la cantidad de radio buttons que existe en un grupo determinado con el mismo 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: formulario.nombre_radio[3]
value
checked
length
index
12.2 Principales eventos evento onFocus descripcin Permite realizar una accin al poner el foco en el objeto.
onBlur onClick onChange
Permite realizar una accin cuando el foco ya no se encuentra en el objeto. Permite realizar una accin cuando se hace click sobre el objeto. Evento que se produce al marcar/desmarcar un checkbox o un radio button.
12.3 Sintaxis bsica 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 aplicacin I: Trabajando con la propiedad disabled Ejemplo #1 En este caso se habilitarn o deshabilitarn los checkbox dependiendo de la opcin que seleccione el usuario de un grupo de dos radio buttons.
El Script... <script languaje="javascript"> function habilita(form) { form.intereses[0].disabled = false; form.intereses[1].disabled = false; form.intereses[2].disabled = false; } function deshabilita(form) { form.intereses[0].disabled = true; form.intereses[1].disabled = true; form.intereses[2].disabled = true; } </script> El Formulario... <form name="ejemplo1"> Desea suscribirse a nuestro boletn 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 inters:<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="Msica">Msica<br> </form> Los resultados... Desea suscribirse a nuestro boletn de novedades? SI, quiero suscribirme. No, gracias.
Seleccione los temas de su inters: Arte y Cultura Ciencia Msica Ejemplo #2 En este caso se habilitarn o deshabilitarn los checkbox dependiendo del valor de la propiedad checked de otro checkbox.
El Script... <script languaje="javascript"> function habilitaDeshabilita(form) { if (form.boletin.checked == true) { form.intereses[0].disabled = false; form.intereses[1].disabled = false; form.intereses[2].disabled = false; } if (form.boletin.checked == false) { form.intereses[0].disabled = true; form.intereses[1].disabled = true; form.intereses[2].disabled = true; } } </script> El Formulario... <form name="ejemplo2"> Desea suscribirse a nuestro boletn de novedades? <input type="checkbox" name="boletin" value="ON" checked onClick="habilitaDeshabilita(this.form)"> SI, quiero suscribirme. <br><br> Seleccione los temas de su inters:<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="Msica">Msica<br> </form> Los resultados... Desea suscribirse a nuestro boletn de novedades? Seleccione los temas de su inters: Arte y Cultura Ciencia Msica SI, quiero suscribirme.
Se presenta la sintaxis para conocer el valor de las propiedades de estos objetos. Por Eugenia Bahit
13.1 Sintaxis bsica 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 bsica 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 form.grupo1[1].value form.grupo1[2].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 form.grupo1[1].disabled form.grupo1[2].disabled 13.1.4 Valor de checked form.nombre_del_grupo[index].checked Ejemplo: form.grupo1[0].checked form.grupo1[1].checked form.grupo1[2].checked 13.1.5 Valor de length form.nombre_del_grupo.length Ejemplo: form.grupo1.length 13.2 Ejemplos de aplicacin II: trabajando con el valor de las propiedades Como habrn 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, deca anteriormente que conocer el valor de value es poco til, a excepcin que se necesite escribir ese valor en un campo de texto. Pero los ejemplos "combinados" entre distintos objetos los dejaremos para ms adelante. Nos limitaremos ahora, a estos dos objetos. Informacin del valor de todas las propiedades
El Script... <script languaje="javascript">
function informar(form) { nombreCasilla = form.colores[0].name valorCasilla = form.colores[0].value valorDisabled = "" valorChecked = "" valorLength = form.colores.length // definicin de valorDisabled if (form.colores[0].disabled == true) { valorDisabled = "est deshabilitada"; } else { valorDisabled = "est habilitada"; } // definicin 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 accin alert(strAlerta); } </script> El formulario... <form name="ejemplo1"> 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 informacin" onClick="informar(this.form)"> </form> Los resultados... Colores: Verde Azul Rojo 13.3 Ejemplos de aplicacin III: trabajando con propiedad checked Lanzar una accin si un checkbox no se ha marcado Aceptar los trminos de un contrato antes de suscribir el formulario
El Script...
<script languaje="javascript"> function verificarCasilla(form) { if (form.acepto.checked == false) { alert("Debes aceptar los trminos del contrato antes de continuar"); form.acepto.focus(); return true; } form.submit() } </script> El formulario... <form name="contrato"> <b>Formulario de suscripcin al servicio de acceso a Internet 0610</b><br> ... campos del formulario ...<br> ...<br> <input type="checkbox" name="acepto"> Acepto los trminos del contrato de suscripcin <br> <input type="button" value="Enviar" onClick="verificarCasilla(this.form)"> </form> Los resultados... Formulario de suscripcin al servicio de acceso a Internet 0610 ... campos del formulario ... ... Acepto los trminos del contrato de suscripcin
En el captulo se hace referencia a la sintaxis y propiedades de este objeto, muy parecido al objeto text Por Eugenia Bahit
14.1 Propiedades bsicas El objeto textarea en principio recibe el mismo tratamiento que que el objeto text con algunas pocas diferencias. Tanto las propiedades, como los mtodos y eventos son los mismos, solo se agregan los siguientes: propiedad cols rows descripcin cantidad de columnas "ancho" de la caja de texto. cantidad de filas "alto" de la caja de texto
El resto de las propiedades name, value, disabled, readonly, length y maxlength reciben la misma definicin que para el objeto text. La nica excepcin est en size que es reemplazado por cols y rows (ancho y alto respectivamente). La propiedad value obtiene una pequea diferencia con la definicin dada en text por sobre todo en su sintxis. Veamos su sintaxis bsica: 14.2 Sintaxis bsica
<textarea cols="30" rows="5" name="nombre">texto que acta como value</textarea> Para llamar a alguna de estas propiedades, se lo hace de idntica forma que con text: formulario.nombre_textarea.propiedad 14.3 Principales mtodos del objeto textarea Idnticos a los del objeto text. 14.4 Principales eventos del objeto textarea Idnticos a los del objeto text. 14.5 Ejemplos de aplicacin Los ejemplos de aplicacin dados en los captulos 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. Por Eugenia Bahit
15.1 SELECT: Propiedades principales propiedad descripcin name size option disabled multiple type nombre del select establece la cantidad de opciones que a primera vista se vern en el select es la principal propiedad ya que permite acceder a cada opcin del select. si su valor es "true", bloquea el select y no permite realizar ningn tipo de seleccin. Si su valor es "false" contrarresta el efecto anterior. permite al usuario seleccionar ms de una opcin (mediante la tecla Ctrl) informa si el select es del tipo multiple o simple.
15.2 SELECT: Sintaxis bsica <select name="nombre" size="3" multiple> <option value="valor 1">Texto de opcin 1</option> <option value="valor 2" selected>Texto de opcin 2</option> <option value="valor 3">Texto de opcin 3</option> <option value="valor 4">Texto de opcin 4</option> </select> Muestra (seleccin mltiple):
Texto de opcin 1 Texto de opcin 2 Texto de opcin 3
manteniendo apretada la tecla Ctrl (control) puede seleccionarse ms de una opcin
Muestra (seleccin simple):

Texto de opcin 1 Texto de opcin 2 Texto de opcin 3
valor de size "3"
Texto de opcin 2
valor de size "1" solo puede seleccionarse una opcin en cualquiera de los dos casos
15.3 SELECT: Mtodos del objeto
mtodo focus
descripcin coloca el foco en el select
15.4 SELECT: Eventos del objeto evento onFocus onBlur onChange descripcin se produce al colocar el foco en el select se produce al abandonar el select (al quitar el foco) se produce al realizar un cambio de seleccin
15.5 OPTION: Propiedades principales propiedad value text selected descripcin valor asociado a cada opcin del select. Es invisible al usuario pero es el valor que se enva junto al formulario. es el texto que ve el usuario que se encuentra contenido entre las etiquetas <option> y </option> indica si una opcin est seleccionada.
selectedIndex Da acceso a la opcin (option) que ha seleccionado el usuario. index length al igual que en form, o checkbox, este array contiene todas las opciones pertenecientes a un select y tambien comienza por 0. Cuenta la cantidad de opciones (option) que conforman un select
15.6 OPTION: Mtodos y eventos El objeto option no posee mtodos ni eventos propios. 15.7 Sintaxis bsica general: llamando a las propiedades En la siguiente lista veremos la forma correcta de llamar a cada propiedad en ambos objetos. PROPIEDAD name size OBJET SINTAXIS O SELEC T SELEC T nombre_formulario.nombre_select.name nombre_formulario.nombre_select.size nombre_formulario.nombre_select.options[index]
se refiere a una opcin especfica
option
SELEC T
formulario.select.options[formulario.select.selectedIndex].prop iedad
se refiere a la opcin seleccionada por el usuario
disabled multiple type value
SELEC T SELEC T SELEC T
nombre_formulario.nombre_select.disabled = true/false nombre_formulario.nombre_select.multiple = true/false nombre_formulario.nombre_select.type
nombre_formulario.nombre_select.options[index].value OPTION se refiere a una opcin especfica
formulario.select.options[formulario.select.selectedIndex].valu e
se refiere a la opcin seleccionada por el usuario
text selected
OPTION nombre_formulario.nombre_select.options[index].text nombre_formulario.nombre_select.options[index].selected = OPTION true/false
formulario.select.options[formulario.select.selectedIndex].prop selectedInde OPTION iedad x index length OPTION nombre_formulario.nombre_select.options[index] 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 bsica es la siguiente: variable = new Option("text","value","defaultSelected","selected") Para introducir esta nueva opcin en un select se debe usar la siguiente sintaxis: nombre_formulario.nombre_select.options[index] = variable Para borrar una opcin existente de un select la sintaxis es la siguiente: nombre_formulario.nombre_select.options[index] = null
Aqu encontraremos ejemplos de aplicacin en los que se usarn propiedades de este objeto. Por Eugenia Bahit
16.1 Ejemplos de aplicacin 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... <script languaje="javascript"> 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> <option value="COD 002">COD 002: Producto 2</option> <option value="COD 003">COD 003: Producto 3</option>
</select> <select name="cantidad" disabled> <option value="">[cantidad]</option> <option value="5">5 unidades</option> <option value="10">10 unidades</option> <option value="15">15 unidades</option> </select> <input type="submit" value="Enviar"></form> Los resultados...
Enviar
Trabajando con el constructor new Option Mediante este ejemplo, se generarn distintas opciones en la segunda lista dependiendo de la opcin elegida en la primera. El Script... <script language="javascript"> 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 seleccin","","",""); combo[0] = seleccionar; } if (selec[1].selected == true) { var popular1 = new Option("Rock de los 90","Rock1","",""); var popular2 = new Option("Rock de los 80","Rock2","",""); combo[0] = popular1; combo[1] = popular2; } if (selec[2].selected == true) { var academica1 = new Option("Musica del Barroco","Barroco","",""); var academica2 = new Option("Musica del Siglo XX","Siglo XX","",""); var academica3 = new Option("Msica del Romantisismo","Romantico","",""); combo[0] = academica1; combo[1] = academica2; combo[2] = academica3; } } </script> El formulario... <form name="ejemplo2" method="POST" target="_blank" action="pagina.htm"> <select name="tipos" onChange="agregarOpciones(this.form)"> <option value="">[seleccione una opcin]</option> <option value="musicapopular">Msica Popular (Rock)</option> <option value="musicaacademica">Msica Acadmica</option> </select>
<select name="estilo"> <option value=""><-- esperando seleccin</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 opcin elegida, sea una opcin vlida. El script... <script languaje="javascript"> function validar(form) { if (form.combo1.options[form.combo1.selectedIndex].value == "") { alert("Por favor, seleccione una opcin vlida"); form.combo1.focus(); return true; } form.submit(); } </script> El formulario... <form name="ejemplo3" method="POST" target="_blank" action="pagina.htm"> <select name="combo1"> <option value=" ">[seleccione una opcin]</option> <option value="opcion1">Opcin 1</option> <option value="opcion2">Opcin 2</option> <option value="opcion3">Opcin 3</option> </select> <input type="button" value="Enviar" onClick="validar(this.form)"> </form> Los resultados...
Modificar la propiedad text de un option Por algn motivo, puede resultar interesante modificar el texto de un option. Aqu veremos un ejemplo de como hacerlo. El Script... <script languaje="javascript"> function modificarTexto(form) { var selec = form.opciones.options; if (select[0].selected == true) { selec[0].text = "Esta no es una opcin vlida"; form.opciones.focus(); } else { select[form.opciones.selectedIndex].text = "Presione el botn enviar"; } } </script>
El formulario... <form name="ejemplo4" method="POST" target="_blank" action="pagina.htm"> <select name="opciones" onChange="modificarTexto(this.form)"> <option value=" ">[seleccione una opcin]</option> <option value="opcion1">Opcin 1</option> <option value="opcion2">Opcin 2</option> <option value="opcion3">Opcin 3</option> </select> <input type="submit" value="Enviar"> </form> Los resultados...
Enviar
Lista de propiedades y eventos asociados. Por Eugenia Bahit

17.1 Principales propiedades propiedad descripcin name size disabled nombre que identifica el objeto ancho de la caja de texto deshabilita el campo de texto y el botn del objeto file
17.2 Principales eventos evento onFocus descripcin Permite realizar una accin al poner el foco en el campo. Es un evento bastante molesto, porque en realidad, acta en forma similar al evento onClick, bloqueando el campo. Permite realizar una accin cuando el foco ya no se encuentra en el campo. Tal vez, es un poco ms til que el anterior, ya que solo podra lanzarse una accin, en caso que el campo se encuentre vaco.
onBlur
Cmo validar un formulario en una pgina web, en el lado del cliente con Javascript. Se comprueban todos sus campos y si son correctos, se enva el formulario. Por Miguel Angel Alvarez
Vamos realizar un ejemplo de un formulario completo para validar. Las validaciones se hacen en el propio navegador antes de enviarlo. Si hubo algn campo no relleno o con informacin errnea, el formulario muestra el campo que est incorrecto y solicita al usuario que lo cambie. Si todos los datos del formulario son correctos se enva 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 ms variado. Se comprueba un campo donde debe figurar un texto, otro donde debe introducirse un nmero 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. Podemos aprender tambin Javascript desde cero http://www.desarrolloweb.com/javascript/, si es que fuera necesario. Se puede ver el ejemplo en funcionamiento para hacerse una idea ms exacta del objetivo buscado. El cdigo 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>Inters:</td> <td> <select name=interes> <option value="Elegir">Elegir <option value="Comercial">Contacto comercial <option value="Clientes">Atencin 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 atencin son:

El nombre del formulario, "fvalida", que utilizaremos para referirnos al l mediante Javascript. El botn de enviar, que en lugar de ser un submit corriente, es un botn que llama a una funcin, que se encarga de validar el formulario y enviarlo si todo fue correcto.
Funcin Javascript para validar el formulario Ahora veremos la funcin 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 aplicacin en el campo que ha dado el error y abandona la funcin retornando el valor 0. Si todos los campos eran correctos, la funcin contina hasta el final, sin salirse, por no estar ningn campo incorrecto. Entonces ejecuta la sentencia ltima, que es el envo del formulario. Veamos la funcin 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 nmero entero en su edad.") document.fvalida.edad.focus() return 0; }else{ if (edad<18){ alert("Debe ser mayor de 18 aos.") document.fvalida.edad.focus() return 0; } } //valido el inters 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 validacin que se hace es simplemente si se ha escrito algo en el campo. Para ello comprueba si el nmero de caracteres escritos en el campo nombre es cero. En ese caso, muestra el mensaje de alerta, sita el foco en el campo de texto y se sale de la funcin devolviendo el valor 0. Nota: el foco de la aplicacin 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 pgina. 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 validacin de la edad mayor que 18 aos tiene dos partes. Primero debemos comprobar que en el campo de texto hay escrito un valor entero. Luego, si tenamos un entero, habra que comprobar que es mayor que 18. Para hacer esta validacin nos vamos a apoyar en una funcin que ya hemos visto en otro artculo de DesarrolloWeb.com, que habla sobre cmo validar un entero en un campo de formulario. Esa funcin 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 validacin 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 funcin pasando esta edad. Su resultado lo utilizamos para volcarlo otra vez al campo de texto. Entonces, se comprueba si el valor devuelto por la funcin es un string vaco. 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 sita el foco y se sale de la funcin. En caso de que el campo edad contuviese un entero, se debe comprobar a continuacin si es mayor que 18. En caso de que sea menor, se muestra el error y se sale. En caso contrario entonces el valor sera mayor o igual que 18-, se contina con las comprobaciones. Por ltimo se valida el campo select, donde aparece el inters del supuesto visitante, que le motiva para enviarnos el formulario. En ese campo se debe haber seleccionado cualquier opcin 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 funcin. Si hemos llegado hasta este punto sin salirnos de la funcin 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 mtodo submit() de dicho formulario. Conclusin Este ejercicio es de lo ms bsico 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 pgina aparte. Realizamos funcin de Javascript para que se puedan seleccionar todos los checkbox o cajas de seleccin de un formulario a la vez, pulsando un solo enlace. Hacemos tambin la funcin para deseleccionar todos los elementos a la vez. Por Miguel Angel Alvarez
El ejercicio que vamos a relatar en este artculo es bastante tpico 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. Tambin haremos la funcin 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 pgina aparte para hacernos una idea exacta de nuestras intenciones. El formulario HTML Tenemos un formulario creado con HTML que es donde estarn los checkboxes que hay que marcar y desmarcar automticamente. El formulario es muy sencillo. Lo vemos a continuacin. <form name="f1"> Nombre: <input type="text" name="nombre"> <br> <input type="checkbox" name="ch1"> Opcion 1 <br> <input type="checkbox" name="ch2"> Opcion 2 <br> <input type="checkbox" name="ch3"> Opcion 3 <br> <input type="checkbox" name="ch4"> Opcion 4 <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 slo 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 funcin 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 slo 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 funcin 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 seleccin se quede desmarcada. El ejemplo no tiene ms misterio. Se puede ver en marcha en una pgina aparte.
Un ejemplo sobre como se puede enviar un formulario por POST al pulsar un enlace, utilizando Javascript Por Miguel Angel Alvarez
El objetivo de este artculo es enviar unos datos por post a una pgina web utilizando Javascript. En realidad lo que vamos a hacer es enviar un formulario al pulsar un enlace de una pgina web. El formulario no se ver en la pgina, lo nico que veremos es un enlace y al hacer clic, con javascript haremos que ese formulario se enve, con lo que se mandarn los datos del formulario por POST a la pgina de destino del formulario. El ejemplo es sencillo. Requiere de tres partes, el formulario, la funcin javascript para enviarlo y el enlace que se debe hacer clic para que se realice el envo. El formulario con los datos a enviar por POST Lo ms cmodo es que, si queremos enviar datos por POST, creemos el formulario con los datos que se desea enviar. El formulario tendr el atributo action dirigido a la pgina a la que queremos enviar los datos y el mtodo de envo POST. <form action="pagina_destino.php" method=post name="formulario1"> <input type="hidden" name="campo1" value="valor"> <input type="hidden" name="campo2" value="otroValor"> </form> Como no queremos que se vea el formulario, slo queremos enviar sus datos por POST, todos los campos del formulario son hidden, es decir, ocultos. Funcin Javascript para enviar un formulario La segunda parte es una funcin Javascript que ejecutaremos para enviar el formulario. Hace uso del mtodo submit() asociado a los formularios. <script> function enviar_formulario(){ document.formulario1.submit() } </script> Si nos fijamos, la funcin tiene una nica sentencia que submite el formulario. Para ello se accede primero al formulario por el nombre que le hemos dado en el atributo name de la etiqueta <FORM> en el cdigo HTML. El nombre del formulario era "formulario1". As que esa instruccin hace un submit() del formulario1, que a su vez es una propiedad del objeto document de la pgina. Enlace para enviar los datos por POST
Ahora, el objetivo del artculo es enviar unos datos por post al hacer clic en un enlace. As que simplemente, enviando el formulario haremos llegar esos datos por post al destino. Por tanto, tenemos que construir un enlace que llame a la funcin javascript anterior. <a href="javascript:enviar_formulario()">Enviar formulario</a> Esto es muy sencillo. Simplemente se indica con javascript: que se debe ejecutar un cdigo javascript al pulsar el enlace. El cdigo javascript es una simple llamada a la funcin enviar_formulario(). El cdigo completo de este ejemplo se puede ver aqu: <html> <head> <title>Enviar formulario al pulsar un enlace</title> <script> function enviar_formulario(){ document.formulario1.submit() } </script> </head> <body> <form action="pagina_destino.php" method=post name="formulario1"> <input type="hidden" name="campo1" value="valor"> <input type="hidden" name="campo2" value="otroValor"> </form> <a href="javascript:enviar_formulario()">Enviar formulario</a> </body> </html> Veremos varios ejemplos de scripts JavaScript aplicables a formularios que aumentarn la funcionalidad de ste. Por Eugenia Bahit
1. Colocar el foco en un determinado campo al cargar la pgina <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"> <input type="submit" value="Enviar"> </form>
Enviar
Escribe tu nombre:
2. Convierte la primer letra de cada palabra en mayscula <script language="javascript"> 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> <form name="ejemplo2" method="GET" action="pagina.htm" target="_blank"> Escribe tu nombre: <input type="text" name="campo1" size="15" onKeyUp="Convertir(this.ejemplo2.campo1)"> <input type="submit" value="Enviar"> </form>
Escribe tu nombre:
Enviar
3. Convierte la primer letra del texto en maysculas (al enviar el formulario) <script language="javascript"> 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> <form name="ejemplo3" method="GET" action="pagina.htm" target="_blank"> 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 pgina actual

<form name="ejemplo8" method="GET" action="pagina.htm" target="_blank"> Por favor, introduce el cdigo correspondiente al color Cdigo 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> <input type="submit" value="Enviar"> </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">marrn</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 cdigo correspondiente al color

Cdigo color:
Enviar
Ver Paleta
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 contrasea 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> Contrasea: <input type="password" name="campo2"><br> <input type="button" value="Registrarse" onClick="validarCampos1(this.form)"> </form>
Usuario: Contrasea:
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 repeticin de la contrasea no coincide."); form.campo2.value = ""; form.campo2.focus(); return true; } } </script> <form name="ejemplo10" method="POST" action="pagina.htm" target="_blank"> Contrasea: <input type="password" name="campo1"><br> Repetir contrasea: <input type="password" name="campo2"><br> <input type="button" value="Registrarse" onClick="validarCampos2(this.form)"> </form>
Contrasea: Repetir contrasea: 7. Permite seleccionar solo una determinada cantidad de checkbox del mismo nombre <script language="javascript"> function limitarSeleccin(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> <form name="ejemplo11" method="GET" action="pagina.htm" target="_blank"> Por favor, seleccione 3 opciones como mximo:<br> <input type="checkbox" name="casilla1" value="Opcion 1" onClick="limitarSeleccin(this,this.form)">Opcin 1<br> <input type="checkbox" name="casilla1" value="Opcion 2" onClick="limitarSeleccin(this,this.form)">Opcin 2<br> <input type="checkbox" name="casilla1" value="Opcion 3" onClick="limitarSeleccin(this,this.form)">Opcin 3<br> <input type="checkbox" name="casilla1" value="Opcion 4" onClick="limitarSeleccin(this,this.form)">Opcin 4<br> <input type="checkbox" name="casilla1" value="Opcion 5" onClick="limitarSeleccin(this,this.form)">Opcin 5<br> <input type="submit" value="Enviar"> </form>
Por favor, seleccione 3 opciones como mximo: Opcin 1 Opcin 2 Opcin 3 Opcin 4 Opcin 5
Enviar
8. Selecciona todos los checkbox con un solo click o los deselecciona <script language="javascript"> function todos(form) { for (i = 0; i < form.casilla1.length; i++) form.casilla1[i].checked = true;
form.desmarcatodos.checked = false; } function ninguno(form) { for (i = 0; i < form.casilla1.length; i++) form.casilla1[i].checked = false; form.marcatodos.checked = false; } </script> <form name="ejemplo12" method="GET" action="pagina.htm" target="_blank"> <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">Opcin 1<br> <input type="checkbox" name="casilla1" value="Opcion 2">Opcin 2<br> <input type="checkbox" name="casilla1" value="Opcion 3">Opcin 3<br> <input type="checkbox" name="casilla1" value="Opcion 4">Opcin 4<br> <input type="checkbox" name="casilla1" value="Opcion 5">Opcin 5<br> <hr> <input type="submit" value="Enviar"> </form>
Marcar todos | Opcin 1 Opcin 2 Opcin 3 Opcin 4 Opcin 5

Enviar
Desmarcar todos
9. Selecciona todos los checkbox con un solo click o los deselecciona o invierte la seleccin <script language="javascript"> function todos2(form) { for (i = 0; i < form.casilla1.length; i++) form.casilla1[i].checked = true; form.desmarcatodos.checked = false; form.invierte.checked = false; } function ninguno2(form) { for (i = 0; i < form.casilla1.length; i++) form.casilla1[i].checked = false; form.marcatodos.checked = false; form.invierte.checked = false; }
function invertir(form) { for (i = 0; i < form.casilla1.length; i++) form.casilla1[i].checked = !form.casilla1[i].checked; form.marcatodos.checked = false; form.desmarcatodos.checked = false; } </script> <form name="ejemplo13" method="GET" action="pagina.htm" target="_blank"> <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 seleccin <hr> <input type="checkbox" name="casilla1" value="Opcion 1">Opcin 1<br> <input type="checkbox" name="casilla1" value="Opcion 2">Opcin 2<br> <input type="checkbox" name="casilla1" value="Opcion 3">Opcin 3<br> <input type="checkbox" name="casilla1" value="Opcion 4">Opcin 4<br> <input type="checkbox" name="casilla1" value="Opcion 5">Opcin 5<br> <hr> <input type="submit" value="Enviar"> </form>
Marcar todos |
Desmarcar todos |
Invertir seleccin
Opcin 1 Opcin 2 Opcin 3 Opcin 4 Opcin 5

Enviar
10. Cuenta la cantidad de checkbox o radio que hay seleccionados <script languaje="javascript"> 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> <form name="ejemplo14" <input type="checkbox" <input type="checkbox" <input type="checkbox" method="GET" action="pagina.htm" target="_blank"> name="casilla1" value="Rojo">Rojo<br> name="casilla1" value="Azul">Azul<br> 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 ms de uso de rutinas con formularios. Por Eugenia Bahit

11. Aumenta o disminuye un valor <script languaje="javascript"> 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 mxima de productos a comprar es de 100 productos"); } } </script> <form name="ejemplo15" method="POST" action="pagina.htm" target="_blank"> 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:
12. Cuenta la cantidad de palabras introducidas en un textarea <script languaje="javascript"> function contarPalabras(form) { texto = form.mensaje.value texto = texto.split(" ") form.cantidad.value=texto.length } </script> <form name="ejemplo16" method="POST" action="pagina.htm" target="_blank">
<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> <input type="submit" value="Enviar"> </form>
Por favor, redacte aqu su mensaje Palabras escritas:
Enviar
13. Muestra o esconde el botn "submit" Esconde el botn submit si los campos estn vacos <script languaje="javascript"> function esconde(form) { if ((form.nombre.value != "") && (form.apellido.value != "")) { form.enviar.style.visibility = "visible"; } else { form.enviar.style.visibility = "hidden"; } } </script> <form name="ejemplo17" method="POST" action="pagina.htm" target="_blank"> 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 botn "submit" Deshabilita el botn submit si los campos estn vacos <script languaje="javascript"> function deshabilita(form) { if ((form.nombre.value != "") && (form.apellido.value != "")) { form.enviar.disabled = false; } else { form.enviar.disabled = true; } } </script>
<form name="ejemplo18" method="POST" action="pagina.htm" target="_blank"> 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 confirmacin al borrar un formulario <script languaje="javascript"> function ConfirmarBorrado(form) { borrar = window.confirm('Se borrarn todos los datos del formulario'); (borrar)?form.reset():'return false'; } </script> <form name="ejemplo19" method="POST" action="pagina.htm" target="_blank"> 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 confirmacin al enviar un formulario <script languaje="javascript"> function ConfirmarEnvio(form) { enviar = window.confirm('Se enviarn todos los datos del formulario'); (enviar)?form.submit():'return false'; } </script> <form name="ejemplo20" method="POST" action="pagina.htm" target="_blank"> 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:
Hacemos un script Javascript para controlar que un textarea de un formulario tenga ms caracteres de los permitidos. Es decir, que se permita escribir en un textarea hasta que se alcance una longitud del texto dada. Por Miguel Angel Alvarez
Este script de Javascript es bastante utilizado en muchos sitios web. Se trata de controlar el tamao del texto que se escribe en un textarea para evitar que los caracteres escritos sobrepasen de los permitidos. El control de los caracteres escritos se hace con Javascript, dinmicamente en el lado del cliente, de modo que cuando el usuario llega a la longitud permitida, no se permite escribir ms contenido en el campo textarea. Veamos el ejemplo en marcha para hacernos una idea exacta del objetivo de este artculo. El ejemplo es sencillo. Simplemente vamos a definir un nmero de caracteres permitidos. Con cada letra que escriba el usuario vamos a comprobar si la cantidad de caracteres que hay en el textarea es permitida.

Si es permitida, no hacemos nada. Si no es permitida, porque estemos sobrepasando el nmero de caracteres que puede contener el textarea, no se deja escribir ms texto en el campo del formulario. Eso lo conseguiremos colocando el texto que haba antes de que se escribiese ese carcter no permitido.
Adicionalmente, vamos a llevar la cuenta de los caracteres escritos en un campo de texto, para que el usuario pueda visualizar los caracteres que lleva escritos. Adems, cuando se llegue al lmite de caracteres permitidos se pondr en rojo el campo de texto que cuenta los caracteres del textarea. Este ejercicio est realizado a partir de otro ejercicio que hemos publicado anteriormente en DesarrolloWeb.com, que sera bueno leer: Contar caracteres escritos en un textarea El ejercicio tiene dos partes, el script Javascript y el formulario HTML. Empecemos viendo el formulario: <form action="#" method="post"> <table> <tr> <td>Texto:</td> <td><textarea cols="40" rows="5" name="texto" onKeyDown="valida_longitud()" onKeyUp="valida_longitud()"></textarea></td> </tr> <tr> <td>Caracteres:</td>
<td><input type="text" name=caracteres size=4></td> </tr> </table> </form> No tiene ninguna complicacin. Pero hay que prestar atencin a los eventos del textarea, que son onKeyDown y onKeyUp, que se desatan cuando el usuario aprieta o suelta teclas del teclado. En ambos eventos se llama a la funcin javascript valida_longitud(), que se encargar de hacer todo el trabajo. Veamos ahora el Javascript: <script> contenido_textarea = "" num_caracteres_permitidos = 10 function valida_longitud(){ num_caracteres = document.forms[0].texto.value.length if (num_caracteres > num_caracteres_permitidos){ document.forms[0].texto.value = contenido_textarea }else{ contenido_textarea = document.forms[0].texto.value } if (num_caracteres >= num_caracteres_permitidos){ document.forms[0].caracteres.style.color="#ff0000"; }else{ document.forms[0].caracteres.style.color="#000000"; } cuenta() } function cuenta(){ document.forms[0].caracteres.value=document.forms[0].texto.value.length } </script> Primero se definen dos variables: contenido_textarea = "" num_caracteres_permitidos = 10 La variable contenido_textarea almacena el contenido del campo textarea. Al principio est inicializada a la cadena vaca, porque el textarea suponemos que est vaco.
Tenemos tambin una variable num_caracteres_permitidos, que almacena el nmero de caracteres que se permite escribir en el textarea. En este caso lo hemos definido como 10. Ahora nos metemos con la funcin valida_longitud(). Lo primero que hacemos es averiguar la cantidad de caracteres escritos, y lo almacenamos en la variable num_caracteres. num_caracteres = document.forms[0].texto.value.length Luego hacemos la parte ms importante de este script: Vemos si los caracteres escritos son menores o iguales que los permitidos, para actuar en consecuencia. if (num_caracteres <= num_caracteres_permitidos){ contenido_textarea = document.forms[0].texto.value }else{ document.forms[0].texto.value = contenido_textarea } Si los caracteres escritos son menores o iguales que los caracteres permitidos, entonces todo va bien. Lo que hacemos es actualizar la variable que mantiene el contenido del textarea, contenido_textarea, introduciendo lo que hay en el textarea actualmente, que es de un tamao permitido. Si lo escrito en el textarea es mayor que lo permitido, se trata de una situacin que no se puede aprobar. Entonces simplemente escribimos en el textarea lo que hay en la variable contenido_textarea, que era lo que haba antes y que estaba validado en longitud correctamente. Eso es todo, es sencillo! Pero ahora vamos a hacer una pequea mejora para que cuando el textarea llegue a la longitud mxima permitida el campo de texto que lleva la cuenta de los caracteres se ponga de color rojo. if (num_caracteres >= num_caracteres_permitidos){ document.forms[0].caracteres.style.color="#ff0000"; }else{ document.forms[0].caracteres.style.color="#000000"; } Como se puede ver, simplemente se comprueba de nuevo si el nmero de caracteres es mayor o igual que los permitidos. Entonces, si es as, se actualiza la propiedad style.color del campo de texto "caracteres", que muestra el nmero de caracteres escritos. Con style.color se puede modificar la propiedad de estilo CSS que define el color del texto del campo. Si se haba llegado a los caracteres permitidos, se pone color rojo, en caso contrario, se pone color negro. Por ltimo hacemos una llamada a la funcin cuenta(), que ya habamos creado en el artculo anterior:
function cuenta(){ document.forms[0].caracteres.value=document.forms[0].texto.value.length } Esta funcin simplemente actualiza el campo de texto, colocando el nmero de caracteres escritos en el textarea. Podemos ver de nuevo el ejemplo en marcha.
Podemos impedir con Javascript que los caracteres que el usuario teclea en un campo de texto de un formulario aparezcan. Por Ismael Zori
Esto puede ser til para campos que slo admitar nmeros o letras. Por ejemplo, vamos a hacer que en un campo de texto de un formulario slo se permitan meter nmeros decimales del tipo 9999.99: Necesitamos una funcin en JavaScript (por ejemplo): function fieldNumber (objeto) { var valorCampo; var evento_key = window.event.keyCode; var numPosPunto = 0; var strParteEntera = ""; var strParteDecimal = ""; var NUM_DECIMALES = 2; switch (evento_key) { case 48: case 49: case 50: case 51: case 52: case 53: case 54: case 55: case 56: case 57: case 46: break; default: window.event.keyCode = 0;
return false; } valorCampo = objeto.value; if (evento_key == 46) if (valorCampo.indexOf(".") != -1) { window.event.keyCode = 0; return false; } /* Slo puede teclear el nmero de decimales indicado en NUM_DECIMALES */ if ((numPosPunto = valorCampo.indexOf(".")) != -1) { strParteEntera = valorCampo.substr(0,(numPosPunto - 1)); strParteDecimal = valorCampo.substr((numPosPunto + 1), valorCampo.length) if (strParteDecimal.length > (NUM_DECIMALES - 1)) { window.event.keyCode = 0; return false; } } return true; } Tendremos una pgina con el formulario y la caja de texto. Tendremos que llamar a la funcin "fieldNumber" en el evento onkeypress: <input type="text" name="txtImporte" onkeypress="fieldNumber(this)"> Si tenis algun problema no dudis en consultrmelo mandndome un mail a iszori@hotmail.com
Veremos varios ejemplos de scripts JavaScript aplicables a formularios que aumentarn la funcionalidad de ste. Por Eugenia Bahit
1. Colocar el foco en un determinado campo al cargar la pgina <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"> <input type="submit" value="Enviar"> </form>
Enviar
Escribe tu nombre:
2. Convierte la primer letra de cada palabra en mayscula <script language="javascript"> 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> <form name="ejemplo2" method="GET" action="pagina.htm" target="_blank"> Escribe tu nombre: <input type="text" name="campo1" size="15" onKeyUp="Convertir(this.ejemplo2.campo1)">
<input type="submit" value="Enviar"> </form>
Escribe tu nombre:
Enviar
3. Convierte la primer letra del texto en maysculas (al enviar el formulario) <script language="javascript"> 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> <form name="ejemplo3" method="GET" action="pagina.htm" target="_blank"> 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 pgina actual

<form name="ejemplo8" method="GET" action="pagina.htm" target="_blank"> Por favor, introduce el cdigo correspondiente al color Cdigo 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> <input type="submit" value="Enviar"> </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">marrn</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 cdigo correspondiente al color

Cdigo color:
Enviar
Ver Paleta
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 contrasea 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> Contrasea: <input type="password" name="campo2"><br> <input type="button" value="Registrarse" onClick="validarCampos1(this.form)"> </form>
Usuario: Contrasea: 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 repeticin de la contrasea no coincide."); form.campo2.value = ""; form.campo2.focus(); return true; } } </script> <form name="ejemplo10" method="POST" action="pagina.htm" target="_blank"> Contrasea: <input type="password" name="campo1"><br> Repetir contrasea: <input type="password" name="campo2"><br> <input type="button" value="Registrarse" onClick="validarCampos2(this.form)"> </form>
Contrasea: Repetir contrasea: 7. Permite seleccionar solo una determinada cantidad de checkbox del mismo nombre <script language="javascript"> function limitarSeleccin(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> <form name="ejemplo11" method="GET" action="pagina.htm" target="_blank"> Por favor, seleccione 3 opciones como mximo:<br> <input type="checkbox" name="casilla1" value="Opcion 1" onClick="limitarSeleccin(this,this.form)">Opcin 1<br> <input type="checkbox" name="casilla1" value="Opcion 2" onClick="limitarSeleccin(this,this.form)">Opcin 2<br> <input type="checkbox" name="casilla1" value="Opcion 3" onClick="limitarSeleccin(this,this.form)">Opcin 3<br> <input type="checkbox" name="casilla1" value="Opcion 4" onClick="limitarSeleccin(this,this.form)">Opcin 4<br> <input type="checkbox" name="casilla1" value="Opcion 5" onClick="limitarSeleccin(this,this.form)">Opcin 5<br> <input type="submit" value="Enviar"> </form>
Por favor, seleccione 3 opciones como mximo: Opcin 1
Opcin 2 Opcin 3 Opcin 4 Opcin 5

Enviar
8. Selecciona todos los checkbox con un solo click o los deselecciona <script language="javascript"> function todos(form) { for (i = 0; i < form.casilla1.length; i++) form.casilla1[i].checked = true; form.desmarcatodos.checked = false; } function ninguno(form) { for (i = 0; i < form.casilla1.length; i++) form.casilla1[i].checked = false; form.marcatodos.checked = false; } </script> <form name="ejemplo12" method="GET" action="pagina.htm" target="_blank"> <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">Opcin 1<br> <input type="checkbox" name="casilla1" value="Opcion 2">Opcin 2<br> <input type="checkbox" name="casilla1" value="Opcion 3">Opcin 3<br> <input type="checkbox" name="casilla1" value="Opcion 4">Opcin 4<br> <input type="checkbox" name="casilla1" value="Opcion 5">Opcin 5<br> <hr> <input type="submit" value="Enviar"> </form>
Marcar todos |
Desmarcar todos
Opcin 1 Opcin 2 Opcin 3 Opcin 4 Opcin 5

Enviar
9. Selecciona todos los checkbox con un solo click o los deselecciona o invierte la seleccin
<script language="javascript"> function todos2(form) { for (i = 0; i < form.casilla1.length; i++) form.casilla1[i].checked = true; form.desmarcatodos.checked = false; form.invierte.checked = false; } function ninguno2(form) { for (i = 0; i < form.casilla1.length; i++) form.casilla1[i].checked = false; form.marcatodos.checked = false; form.invierte.checked = false; } function invertir(form) { for (i = 0; i < form.casilla1.length; i++) form.casilla1[i].checked = !form.casilla1[i].checked; form.marcatodos.checked = false; form.desmarcatodos.checked = false; } </script> <form name="ejemplo13" method="GET" action="pagina.htm" target="_blank"> <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 seleccin <hr> <input type="checkbox" name="casilla1" value="Opcion 1">Opcin 1<br> <input type="checkbox" name="casilla1" value="Opcion 2">Opcin 2<br> <input type="checkbox" name="casilla1" value="Opcion 3">Opcin 3<br> <input type="checkbox" name="casilla1" value="Opcion 4">Opcin 4<br> <input type="checkbox" name="casilla1" value="Opcion 5">Opcin 5<br> <hr> <input type="submit" value="Enviar"> </form>
Marcar todos | Opcin 1 Opcin 2 Opcin 3 Opcin 4 Opcin 5

Enviar
Desmarcar todos |
Invertir seleccin
10. Cuenta la cantidad de checkbox o radio que hay seleccionados <script languaje="javascript">
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> <form name="ejemplo14" method="GET" action="pagina.htm" target="_blank"> <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 ms de uso de rutinas con formularios. Por Eugenia Bahit

11. Aumenta o disminuye un valor <script languaje="javascript"> 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 mxima de productos a comprar es de 100 productos"); } } </script> <form name="ejemplo15" method="POST" action="pagina.htm" target="_blank"> 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:
12. Cuenta la cantidad de palabras introducidas en un textarea <script languaje="javascript"> function contarPalabras(form) { texto = form.mensaje.value texto = texto.split(" ") form.cantidad.value=texto.length } </script> <form name="ejemplo16" method="POST" action="pagina.htm" target="_blank"> <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> <input type="submit" value="Enviar"> </form>
Por favor, redacte aqu su mensaje Palabras escritas:
Enviar
13. Muestra o esconde el botn "submit" Esconde el botn submit si los campos estn vacos <script languaje="javascript"> function esconde(form) { if ((form.nombre.value != "") && (form.apellido.value != "")) { form.enviar.style.visibility = "visible"; } else { form.enviar.style.visibility = "hidden"; } } </script> <form name="ejemplo17" method="POST" action="pagina.htm" target="_blank"> 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 botn "submit" Deshabilita el botn submit si los campos estn vacos <script languaje="javascript"> function deshabilita(form) { if ((form.nombre.value != "") && (form.apellido.value != "")) { form.enviar.disabled = false; } else { form.enviar.disabled = true; } } </script> <form name="ejemplo18" method="POST" action="pagina.htm" target="_blank"> 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 confirmacin al borrar un formulario <script languaje="javascript"> function ConfirmarBorrado(form) { borrar = window.confirm('Se borrarn todos los datos del formulario'); (borrar)?form.reset():'return false'; } </script> <form name="ejemplo19" method="POST" action="pagina.htm" target="_blank"> 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 confirmacin al enviar un formulario
<script languaje="javascript"> function ConfirmarEnvio(form) { enviar = window.confirm('Se enviarn todos los datos del formulario'); (enviar)?form.submit():'return false'; } </script> <form name="ejemplo20" method="POST" action="pagina.htm" target="_blank"> 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

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Formularios Javascript

Încărcat de

Drepturi de autor:

Formate disponibile

1.

El objeto form, propiedades y mtodos

2. Sub-propiedades del objeto form y eventos

3. Valores de la propiedad action

4. El valor de la propiedad method y target

6. Los objetos text y password

7. Los objetos text y password II

8. Los objetos text y password III

9. Los objetos text y password IV

10. Los objetos text y password V

Convertir el texto a maysculas Convertir el texto a minsculas

11. El objeto hidden

12. Los objetos radio y checkbox

13. Los objetos radio y checkbox II

14. El objeto textarea

15. Los objetos select y option

16. Los objetos select y option II

17. El objeto file

El objeto form posee dos mtodos:

contiene el nmero (cantidad) de formularios que hay en una pgina.

funciona igual que el evento anterior pero se sucede al restablecer el formulario.

Por favor, introduce tu e-mail: Darme de alta | Darme de baja

4.2 Sobre la propiedad Target

<input type="text" name=".." value=".." size="..">

es un tipo de botn que se encarga de enviar el formulario. Sintaxis:

es una imagen que acta como botn (reset, button o submit)

<input type="image" src=".." ...>

6.1 Propiedades de los objetos text y password

ReadOnly size length

maxlength es la cantidad mxima de caracteres permitidos dentro del campo.

select toUpperCase toLowerCase

7.1 Ejemplos de aplicacin I: Trabajando con el valor de un campo

El valor introducido en una caja de texto es "reproducido" en otro campo.

El Script... <script languaje="javascript"> function pasaValor(form) { ejemplo2.campo2.value = ejemplo2.campo1.value; } </script> El formulrio...

Rellena tu perfil de usuario (obligatorio) Nombre real: Telfono: Ciudad:

Utilizacin de la propiedad length, aplicada a varios ejemplos Por Eugenia Bahit

El script... <script languaje="javascript">

El script... <script languaje="javascript"> function validarCampo3(form) { if (form.palabra1.value.length != 6)

CANTIDAD DE CARACTERES EXCEDIDOS Y CARACTERES FALTANTES

Ejemplos de uso de las funciones toUpperCase y toLowerCase. Por Eugenia Bahit

CONVERTIR TODO EL TEXTO A MINSCULAS

Usos de este objeto componente de formularios. Por Eugenia Bahit

onBlur onClick onChange

El Script... <script languaje="javascript">

Muestra (seleccin simple):

15.3 SELECT: Mtodos del objeto

descripcin coloca el foco en el select

disabled multiple type value

SELEC T SELEC T SELEC T

nombre_formulario.nombre_select.disabled = true/false nombre_formulario.nombre_select.multiple = true/false nombre_formulario.nombre_select.type

nombre_formulario.nombre_select.options[index].value OPTION se refiere a una opcin especfica

OPTION nombre_formulario.nombre_select.options[index].text nombre_formulario.nombre_select.options[index].selected = OPTION true/false

Lista de propiedades y eventos asociados. Por Eugenia Bahit

Formulario de la pgina actual

Por favor, introduce el cdigo correspondiente al color

Marcar todos | Opcin 1 Opcin 2 Opcin 3 Opcin 4 Opcin 5

Opcin 1 Opcin 2 Opcin 3 Opcin 4 Opcin 5

Rojo Azul Amarillo Verde

6 casos ms de uso de rutinas con formularios. Por Eugenia Bahit

Producto seleccionado: COD. 7548-65 CD-R IPC Cantidad:

Por favor, redacte aqu su mensaje Palabras escritas:

<input type="submit" value="Enviar"> </form>

4. Escribe un valor indicado en otra ventana, en el formulario abierto

Formulario de la pgina actual