formularios javascript

1. El objeto form, propiedades y métodos

1.1 El objeto form

1.2 Propiedades principales del objeto form

1.2.1 Sintaxis básica1.3 Métodos del objeto form1.3.1 Sintaxis básica1.4 Ejemplo de aplicaciónMétodo POSTMétodo GET

2. Sub-propiedades del objeto form y eventos

2.1 Sub-propiedades del objeto form2.1.1 Sintaxis básica2.2 Ejemplos de aplicaciónLengthIndex2.3 Los eventos que admite el objeto form2.3.1 Sintaxis básica2.4 Ejemplos de aplicaciónAlerta al enviar y/o restablecer un formulario

3. Valores de la propiedad action

3.1 Ejemplos de aplicaciónModificación del valor de la propiedad actionDuplicando el valor de la propiedad action (enviar un mismo formulario a dos páginas distintas).

4. El valor de la propiedad method y target

4.1 Sobre la propiedad Method: Ejemplos de aplicaciónModificar el valor de la propiedad action4.2 Sobre la propiedad Target: Ejemplos de aplicaciónModificar el valor de la propiedad target

5. Objetos de un formulario

5.1 Tipos de objetos, definición y sintaxis básica (campos de un formulario). 6. Los objetos text y password6.1 Propiedades de los objetos text y password6.1.2 Sintaxis básica6.2 Principales métodos de los objetos text y password6.2.1 Sintaxis básica

http://www.desarrolloweb.com/articulos/1391.php?manual=50






6.3 Principales eventos de los objetos text y password6.4 Sintaxis básica

7. Los objetos text y password II

7.1 Ejemplos de aplicación I: Trabajando con el valor de un campoEliminar el valor de un campo al hacer clickReproducir el valor de un campo en otroRellenar el valor de un campo vacío con una frase o palabraValidar 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 aplicación II: Bloqueando y desbloqueando camposComo bloquear o desbloquear un campo8.2 Ejemplos de aplicación III: Trabajando con la propiedad sizeAumento y reducción del valor size

9. Los objetos text y password IV

9.1 Ejemplos de aplicación III: Trabajando con la propiedad lengthEstablecer un límite mínimo de caracteresEstablecer un límite máximo de caracteresEstablecer un límite absoluto de caracteresEstablecer un límite mínimo y uno máximo de caracteresContabilizar la cantidad de caracteres escritos y los restantesInformar la cantidad de caracteres excedidos y los faltantes

10. Los objetos text y password V

10.1 Ejemplos de aplicación IV: toUpperCase y toLowerCaseConvertir el texto a mayúsculasConvertir el texto a minúsculas

11. El objeto hidden

11.1 Usos de este objeto

12. Los objetos radio y checkbox

12.1 Propiedades de los objetos12.2 Principales eventos12.3 Sintaxis básica12.4 Ejemplos de aplicación I: Trabajando con la propiedad disabled







Habilitar o deshabilitar un grupo de checkbox según la opción elegida de los radio buttons.Habilitar o deshabilitar un grupo de checkbox según el valor de la propiedad checked de otro checkbox.

13. Los objetos radio y checkbox II

13.1 Sintaxis básica para conocer el valor de todas las propiedades13.1.1 Valor de value13.1.2 Valor de name13.1.3 Valor de disabled13.1.4 Valor de checked13.1.5 Valor de length13.2 Ejemplos de aplicación II: trabajando con el valor de las propiedadesComo conocer los valores de todas las propiedades13.3 Ejemplos de aplicación III: trabajando con propiedad checkedAceptar los términos de un contrato antes de suscribir el formulario (realiza una acción solo si el checkbox no ha sido marcado)

14. El objeto textarea

14.1 Propiedades básicas14.2 Sintaxis básica14.3 Principales métodos del objeto textarea14.4 Principales eventos del objeto textarea

14.5 Ejemplos de aplicación

Eliminar el valor de un campo al hacer clickReproducir el valor de un campo en otroRellenar el valor de un campo vacío con una frase o palabraValidar campos (forma 1)Validar campos (forma 2)Introducir en un solo campo los valores de distintos campos.Como bloquear o desbloquear un campoEstablecer un límite mínimo de caracteresEstablecer un límite máximo de caracteresEstablecer un límite absoluto de caracteresEstablecer un límite mínimo y uno máximo de caracteresContabilizar la cantidad de caracteres escritos y los restantesInformar la cantidad de caracteres excedidos y los faltantesConvertir el texto a mayúsculasConvertir el texto a minúsculas

15. Los objetos select y option

15.1 SELECT: Propiedades principales15.2 SELECT: Sintaxis básica15.3 SELECT: Métodos del objeto




15.4 SELECT: Eventos del objeto15.5 OPTION: Propiedades principales15.6 OPTION: Métodos y eventos15.7 Sintaxis básica general: llamando a las propiedades15.8 El constructor new Option: uso y sintaxis

16. Los objetos select y option II

16.1 Ejemplos de aplicaciónLa propiedad disabled: habilitar un select si ya se ha elegido una opción de otro delectEl constructor new Option: listas encadenadas. Cambian las opciones de una lista, dependiendo de la selección realizada en otra.Validar un select.Modificar la propiedad text de un option.

17. El objeto file

17.1 Principales propiedades17.2 Eventos que admite

Anexo I

Rutinas JavaScript para aplicar a formularios

Colocar el foco en un determinado campo al cargar la página Convierte la primer letra de cada palabra en mayúscula Convierte la primer letra del texto en mayúsculas Escribe un valor indicado en otra ventana, en el formulario abierto Comprueba que el valor ingresado en dos campos no sea el mismo Comprueba que el valor ingresado en dos campos sea igual Permite seleccionar solo una determinada cantidad de checkbox del mismo nombre Selecciona todos los checkbox con un solo click o los deselecciona Selecciona todos los checkbox con un solo click o los deselecciona o invierte la selección Cuenta la cantidad de checkbox o radio que hay seleccionados

Anexo II

Más rutinas JavaScript

Aumenta o disminuye un valor Cuenta la cantidad de palabras introducidas en un textarea Muestra o esconde el botón "submit" Habilita o deshabilita el botón "submit" Mensaje de confirmación al borrar un formulario Mensaje de confirmación al enviar un formulario

Conocer el objeto form, sus elementos y propiedades, su procesamiento de datos, su envío y recepción. El primer paso consistirá en conocer el objeto form, sus elementos y propiedades y luego iremos viendo algunas de las distintas formas del procesamiento de datos, su envío y recepción, etc. 1.1 El objeto form





El objeto form es un sub-objeto del objeto document y este a su vez, lo es del objeto window.Así como para crear una página en HTML se utilizan las etiquetas <HTML> Y </HTML>, lo mismo sucede con un formulario: el formulario debe estar contenido entre las etiquetas <form> y </form>En principio la sintaxis básica para referirnos a un formulario sería: window.document.forms.nombre_del_formulario En la que tranquilamente pueden prescindirse de window y forms ya que el navegador toma al formulario como un objeto en sí mismo. De la misma forma, tambien puede prescindirse de document. Pero esta omisión solo se hará si queremos referirnos a un formulario en particular (por ejemplo a un formulario llamado "datos"). Pero al momento de referirnos a "todos los formularios de una página", solo se podrá prescindir del objeto window. 1.2 Propiedades principales del objeto form

El objeto form posee las siguientes propiedades:

propiedad descripción

name es el nombre único del formulario.

action es el lugar al cual se envía el formulario para ser procesado. El action define la URL a la cual se envía dicho formulario.

method

método de envío de los datos insertados en un formulario. El method puede ser:GET = envía los datos en una cadena "visible". Conveniente para enviar pocos datos.POST = envía los datos en forma "invisible". Conveniente para enviar una gran cantidad de datos.

targetdefine la ventana o marco (frame) en la que se mostrarán o procesarán los resultados del formulario. El valor es el mismo que el utilizado en HTML (blank, self, top, nombre_marco, etc..)

1.2.1 Sintaxis básica <form name="nombre_formulario" action="procesar.asp" method="POST" target="_blank">.......campos....</form> 1.3 Métodos del objeto form

El objeto form posee dos métodos:

método descripción submit envía el formulario.

reset restablece el formulario a los valores por defecto.

1.3.1 Sintaxis básica <form name="nombre_formulario" action="procesar.asp" method="POST" target="_blank">.......campos....<input type="submit" value="enviar formulario"><input type="reset" value="borrar">

</form> 1.4 Ejemplo de aplicación

Con estos ejemplos veremos la utilización de la propiedad method y de los métodos submit y reset.

Method POST El código....<form name="datos" action="ejemplos/procesar.asp" method="POST" target="_blank">Escribe tu nombre: <input type="text" name="nombre"><br><input type="submit" value="enviar formulario"><br><input type="reset" value="borrar"></form> El resultado...

Escribe tu nombre:

Otras cuestiones relativas al objeto form: propiedades index y length, y eventos.

2.1 Sub-propiedades del objeto form

El objeto form posee dos sub-propiedades, a parte de las propiedades nombradas en el capítulo anterior. Estas sub-propiedades son:

sub-propiedad

descripción

index es un array que contiene todos los formularios de una página, donde el primer formulario es identificado con el número 0 y así sucesivamente.

length contiene el número (cantidad) de formularios que hay en una página.

2.1.1 Sintaxis básica document.forms[index]donde index es el número correspondiente al formulario: document.forms[0] indica el primer formulario y document.forms.lengthnos indica la cantidad de formularios que hay en una página. 2.2 Ejemplos de aplicación

LENGTH

El código...Presiona el botón para saber cuantos formularios hay en esta página:<input type="button" value="Click aquí" onClick="alert('Hay ' + document.forms.length + ' formularios en esta página')"> Los resultados...Presiona el botón para saber cuantos formularios hay en esta página:

INDEX

El código...Presiona el botón para saber el nombre del primer formulario:

<input type="button" value="Click aquí" onClick="alert('El nombre del primer formulario es: ' + document.forms[0].name)"> Los resultados... Presiona el botón para saber el nombre del primer formulario:

2.3 Los eventos que admite el objeto form

Si bien la mayoría de los eventos JavaScript son aceptados por el objeto form, muchos de ellos pueden crear más problemas que soluciones y si se utilizan, es en casos muy específicos pero no usuales.En la siguiente lista veremos los más utilizados:

evento descripción

onSubmites el principal evento del objeto form y se produce al enviar el formulario: ya sea mediante el botón submit o mediante una función JavaScript que llame al método submit()

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

2.3.1 Sintaxis básica <form name="..." method="..." action="..." target="..." onSubmit="función" onReset="función"> 2.4 Ejemplos de aplicación

Aquí veremos un ejemplo en el que se enviará un mensaje de alerta al usuario cuando envía el formulario o cuando lo restablece.El código...<form name="formulario" method="post" action="ejemplos/procesar.asp" target="_blank" onSubmit="alert('Se enviará el formulario')" onReset="alert('Se borrarán todos los datos insertados')">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:

Mediante JavaScript, podremos modificar y seleccionar el valor de la propiedad action.

3.1 Ejemplos de aplicación Mediante JavaScript, podremos modificar/seleccionar el valor de la propiedad action según las preferencias del usuario. El ejemplo más típico sería el de un formulario de suscripción a un boletín de novedades, donde el usuario deberá elegir, si desea darse de alta o de baja.

Modificación del valor de la propiedad action

El Script...<script language="javascript">function enviar(form){ if ((boletin.alta.checked == true) && (boletin.baja.checked == true)) { alert("Por favor, marca una sola casilla"); return true; }

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

Por favor, introduce tu e-mail:

Darme de alta | Darme de baja

Otro ejemplo muy utilizado, es enviar el mismo formulario a dos páginas diferentes. Veamos un ejemplo:

Duplicando el valor de la propiedad action

El Script...<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 sería un poco inadecuado ya que el método por el cual se envían los datos, puede estar perfectamente definido en el formulario. El valor de target puede llegar a ser más útil, si le damos al usuario la posibilidad de decidir si quiere abrir los resultados enviados en nueva ventana, en la misma página o en un marco de la misma.

La función que modifica el valor de method es muy similar a la que modifica el valor de action y target.

4.1 Sobre la propiedad Method

Como se dijo anteriormente, modificar el valor de la propiedad method carece de un verdadero sentido. Pero, de todas formas, esto siempre dependerá de lo que se necesite hacer. La función que modifica el valor de method es muy similar a la que modifica el valor de action y target.Veamos como se realiza este función:

<script languaje="javascript">function CambiaMethod(){ form1.method ="POST"; }</script> Realmente es similar a la vista en el punto anterior.Ahora, pondremos un ejemplo en práctica, donde le damos al usuario la posibilidad de elegir el método del envío de datos y según el tipo de envío que elija, será a la página que lo enviemos:

El Script...<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">Método POST | <input type="checkbox" name="GET" value="ON">Método GET<br><input type="button" value="Enviar" onClick="CambiaMethod(this.form)"></form> Los resultados...

http://www.desarrolloweb.com/articulos/4.htm




Escribe tu nombre:

Método POST | Método GET

4.2 Sobre la propiedad Target

De igual forma que en el anterior ejemplo, veremos un caso en el que el usuario seleccionará el target en el cual desea visualizar los resultados enviados por el formulario. El Script...<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

Propiedades de los objetos text y password son name, value, disabled, ReadOnly, size, length y maxlength.

6.1 Propiedades de los objetos text y password


name nombre del campo. Es el identificador único del campo. Este nombre no puede estar duplicado dentro del formulario.

value valor del campo. puede establecerse un valor por defecto u obtener el introducido mediante JavaScript.

disabled

si su valor es "true", bloquea el campo de texto y no permite introducir ningún dato en él. Dicho de una forma poco técnica, este campo de texto "No es enviado en el formulario" y "actúa como si no existiese". Si su valor es "false" contrarresta el efecto anterior.

ReadOnly convierte al campo en un área de "solo lectura". A diferencia de

disabled esta propiedad, no bloquea el campo, sino que simplemente no permite modificar su contenido.

size El ancho "visible" de la caja de texto. NO limita la cantidad de caracteres.

length cuenta la cantidad de caracteres introducidos en el campo.maxlength

es la cantidad máxima de caracteres permitidos dentro del campo.

6.1.2 Sintaxis básica <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 formulariocampo el nombre del campoy propiedad debe ser reemplazado por el nombre de la propiedad correspondiente. 6.2 Principales métodos de los objetos text y password

método descripción focus Pone el foco en el campo.

select Selecciona todo el texto contenido en el campo (lo colorea de un azul estándar)

toUpperCase

Convierte el texto introducido en el campo a mayúsculas. Está asociado a la propiedad value.

toLowerCase

Convierte el texto introducido en el campo a minúsculas. Está asociado a la propiedad value.

6.2.1 Sintaxis básica formulario.campo.método() donde:formulario es el nombre del formulariocampo el nombre del campoy método debe ser reemplazado por el nombre del método correspondiente. 6.3 Principales eventos de los objetos text y password

evento descripción onFocus Permite realizar una acción al poner el foco en el campo.

onBlur Permite realizar una acción cuando el foco ya no se

encuentra en el campo.

onSelet Permite realizar una acción cuando se selecciona el texto del campo.

onKeyUp / onKeyDown / onKeyPress

Permite realizar una acción cuando el usuario pulsa una tecla (en los ejemplos veremos la diferencia)

onClick Permite realizar una acción cuando se hace click sobre el campo.

onChange Permite realizar una acción cuando el texto del campo cambia por otro.

onMouseOver / onMouseOut

Permite realizar una acción cuando el mouse pasa por encima del campo o lo abandona (estos eventos tienen un uso muy restringido ya que dependen del fin que se le quiera aplicar. Por lo general, son bastante molestos puesto que el usuario puede pasar el mouse por error, sobre un campo).

6.4 Sintaxis básica <input type="text" name="..." value="..." ..... evento="función"> evento debe ser reemplazado por el evento deseado (ejemplo: onFocus) y función puede ser la función JavaScript, o una acción cualquiera. ejemplo: <... onFocus="alert('Mensaje de Alerta')" ...>

Tomamos los datos introducidos en distinto campos de texto y transferimos todos los valores a un solo campo.

7.1 Ejemplos de aplicación I: Trabajando con el valor de un campo

EJEMPLO #1: Tenemos una caja de texto con un valor por defecto. Cuando el usuario hace click sobre el campo, el valor "desaparece".

El código... <form name="ejemplo1" method="POST"><input type="text" name="usuario" value="Nombre de usuario" onClick="ejemplo1.usuario.value=''" size="16"><br>Password: <input type="password" name="clave" size="6" value="123456" onClick="ejemplo1.clave.value=''"></form> Los resultados...

Password: EJEMPLO #2: El valor introducido en una caja de texto es "reproducido" en otro campo.

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

{var error = "Por favor, antes de enviar el formulario,\ncomplete los siguientes campos:\n\n";var a = "" if (form.nombre.value == "") { a += " Nombre real\n"; } if (form.telefono.value == "") { a += " Teléfono\n"; } if (form.ciudad.value == "") { a += " Ciudad\n"; } if (a != "") { alert(error + a); return true; }form.submit()}</script> El formulario... <form name="ejemplo4" method="POST" target="_blank"><b>Rellena tu perfil de usuario</b> (obligatorio)<br>Nombre real: <input type="text" name="nombre"><br>Teléfono: <input type="text" name="telefono"><br>Ciudad: <input type="text" name="ciudad"><br><input type="button" value="Terminar" onClick="validar(this.form)"></form> Rellena tu perfil de usuario (obligatorio)

Nombre real:

Teléfono:

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('\"Teléfono\"'); 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>Teléfono: <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:

Teléfono:

Ciudad:

Otra función muy interesante con JavaScript, es aquella por la cual tomamos los datos introducidos en distinto campos de texto y transferimos todos los valores a un solo campo. Es ideal, por ejemplo, cuando recopilamos información sobre el domicilio de una persona o por que no, para tantas otras cosas.Veamos el ejemplo:

EJEMPLO #6

El Script... <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>Código Postal: <input type="text" name="cp" size="8"> Ciudad: <input type="text" name="ciudad" size="20"> País: <input type="text" name="pais" size="20"><br><br> Verifique su domicilio: <input type="text" name="domicilio" size="80" ReadOnly onFocus="completar(this.form)"><br>Si los datos no son correctos, <a onClick="ejemplo6.domicilio.value=''" style="cursor: hand">presione aquí</a> y realice los cambios en los campos correspondientes.<br><input type="submit" value="Confirmar"></form> Los resultados...

Por favor, complete su domicilio:

Calle: Nro.:

Piso: Departamento:

Código Postal: Ciudad: País:

Verifique su domicilio: lo datos se verán una vez que el campo tomo el foco (puede ser mediante la tecla TAB o haciendo click en el campo).

Si los datos no son correctos, presione aquí y realice los cambios en los campos correspondientes.

Tomamos los datos introducidos en distinto campos de texto y transferimos todos los valores a un solo campo.

7.1 Ejemplos de aplicación I: Trabajando con el valor de un campo

EJEMPLO #1: Tenemos una caja de texto con un valor por defecto. Cuando el usuario hace click sobre el campo, el valor "desaparece".

El código... <form name="ejemplo1" method="POST"><input type="text" name="usuario" value="Nombre de usuario" onClick="ejemplo1.usuario.value=''" size="16"><br>Password: <input type="password" name="clave" size="6" value="123456" onClick="ejemplo1.clave.value=''"></form> Los resultados...

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 más complejo, en el cual se rellenarán los campos de texto vacíos 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 automáticamente");ejemplo3.submit()}</script> El formulario... <form name="ejemplo3" method="POST" target="_blank"><b>Rellena tu perfil de usuario</b> (opcional)<br>Nombre real: <input type="text" name="nombre"><br>Teléfono: <input type="text" name="telefono"><br>Ciudad: <input type="text" name="ciudad"><br><input type="button" value="Terminar" onClick="rellenar()"></form> Los resultados...

Rellena tu perfil de usuario (opcional)

Nombre real:

Teléfono:

Ciudad:

Si modificamos un poco el ejemplo anterior, podemos hacer que en vez de completar automáticamente los campos, le avise al usuario que debe completarlos para poder enviar el formulario. Esto podremos hacerlo avisando al usuario campo por campo o enviándole un aviso en general:


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 += " Teléfono\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>Teléfono: <input type="text" name="telefono"><br>Ciudad: <input type="text" name="ciudad"><br><input type="button" value="Terminar" onClick="validar(this.form)"></form>


Nombre real:

Teléfono:

Ciudad:


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('\"Teléfono\"'); 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>Teléfono: <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...


Nombre real:

Teléfono:

Ciudad:

Otra función muy interesante con JavaScript, es aquella por la cual tomamos los datos introducidos en distinto campos de texto y transferimos todos los valores a un solo campo. Es ideal, por ejemplo, cuando recopilamos información sobre el domicilio de una persona o por que no, para tantas otras cosas.Veamos el ejemplo:

EJEMPLO #6

El Script... <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>Código Postal: <input type="text" name="cp" size="8"> Ciudad: <input type="text" name="ciudad" size="20"> País: <input type="text" name="pais" size="20"><br><br> Verifique su domicilio: <input type="text" name="domicilio" size="80" ReadOnly onFocus="completar(this.form)"><br>Si los datos no son correctos, <a onClick="ejemplo6.domicilio.value=''" style="cursor: hand">presione aquí</a> y realice los cambios en los campos correspondientes.<br><input type="submit" value="Confirmar"></form> Los resultados...

Por favor, complete su domicilio:

Calle: Nro.:

Piso: Departamento:

Código Postal: Ciudad: País:

Verifique su domicilio: lo datos se verán una vez que el campo tomo el foco (puede ser mediante la tecla TAB o haciendo click en el campo).

Si los datos no son correctos, presione aquí y realice los cambios en los campos correspondientes.

El campo "clave" (password) estará bloqueado si el campo "usuario" (text) se encuentra vacío y se desbloqueará en caso contrario.

8.1 Ejemplos de aplicación II: Bloqueando y desbloqueando campos

Lo que aquí veremos es un ejemplo muy sencillo, en el cual, el campo "clave" (password) estará bloqueado si el campo "usuario" (text) se encuentra vacío y se desbloqueará en caso contrario.

El script...

}</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. LÍMITE MÍNIMO Y MÁXIMO 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 mínimo de 6 caracteres y un máximo de 12'); form.palabra1.focus(); return true; }}</script> El formulario...

<form name="form4" method="post">Mínimo 6 caracteres, máximo 12: <input type="text" name="palabra1"><input type="button" onClick="validarCampo4(this.form)" value="Enviar"></form> Los resultados...

Mínimo 6 caracteres, máximo 12: De igual modo, podemos hacer lo siguiente:

Que a medida que el usuario escriba en el campo de texto se le informe la cantidad de caracteres que ha escrito y/o los restantes.

Que al presionar el botón, no solo se lo alerte del error de caracteres introducidos, sino que además se lo informe de la cantidad de caracteres que ha escrito, el exceso o resto de caracteres producidos.

Veamos los siguientes ejemplos basados en una amplitud máxima de 50 caracteres en el primer caso y una longitud absoluta de 12 caracteres en el segundo:

CANTIDAD DE CARACTERES ESCRITOS Y CARACTERES RESTANTES

El Script... <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">Máximo 50 caracteres: <input type="text" name="campo" size="50" maxlength="50" onKeyUp="contar(this.form)"><br>Escritos: <input type="text" ReadOnly name="escritos" size="2" value="0"> Restantes: <input type="text" ReadOnly name="restantes" size="2" value="50"></form> Los resultados...

Máximo 50 caracteres:

Escritos: Restantes: CANTIDAD DE CARACTERES EXCEDIDOS Y CARACTERES FALTANTES

El Script...<script languaje="javascript">function validarCampo5(form){c = 12; // cant. máxima de caracteresL = form.campo.value.length;// e es el excedido// f es el faltante

if (L > c) { e = (L-c); error = 1; } if (L < c) { f = (c-L); error = -1; }

if ((L != c) && (error == -1)) { alert("El campo contiene " + f + " caracteres menos a los solicitados"); form.campo.focus(); return true; }

if ((L != c) && (error == 1)) { alert("El campo contiene " + e + " caracteres más a los solicitados"); form.campo.focus(); return true; }}</script> El formulario... <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.

9.1 Ejemplos de aplicación IV: toUpperCase y toLowerCase

Este es uno de los métodos más sencillos de emplear y veremos solo dos ejemplos pero no nos detendremos demasiado.

CONVERTIR TODO EL TEXTO A MAYÚSCULAS

El código... <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 minúsculas notarás el cambio CONVERTIR TODO EL TEXTO A MINÍSCULAS

El código... <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 mayúsculas notarás el cambioUsos de este objeto componente de formularios.

11.1 Usos de este objeto

El primer punto a tener en cuenta con el objeto hidden es que este es "invisible al usuario". El usuario no puede verlo y por lo tanto no puede interactuar con él. El objeto hidden solo sirve para recolectar información del usuario y preferencias en forma de texto. Por ejemplo, podremos mantener durante todos los formularios de distintas páginas, el nombre del usuario: <input type="hidden" name="usuario" value="Carlitos_2003"> Pero el valor (value) estará siempre impuesto por defecto.

Propiedades, eventos y ejemplos de estos objetos contenidos en formularios.

12.1 Propiedades de los objetos


nameEs el nombre que identifica a un checkbox a un grupo de radio buttons. Para que éstos últimos conserven la capacidad de selección única, deben tener todos el mismo nombre.

value

Es un valor asociado a cada checkbox o radio. En el caso de los checkbox es útil asignar a un grupo de éstos con el mismo name distintos valores. Pero si se quieres acceder a las propiedades de cada checkbox separadamente mediante JavaScript, es mejor utilizar un name diferente para cada checkbox, ya que de lo contrario (si todos tienen el mismo name) la propiedad value resulta poco útil. En el caso de los radio buttons es una propiedad necesaria siempre al tener todos el mismo name, aunque para su acceso mediante JavaScript, esta propiedad no es muy útil.

disabled bloquea el checkbox o radio. Por lo tanto "No es enviado en el formulario" y "actúa como si no existiese".

checkedmarca o comprueba si está marcado un checkbox o un radio. Es una propiedad booleana (que solo admite verdadero o falso) en la cual su valor será "true" (verdadero) si el objeto está marcado y "false" (falso) en caso que no lo esté.

length es la cantidad de radio buttons que existe en un grupo determinado con el mismo name.

index

array que contiene todos los radio buttons que hay en un grupo con el mismo nombre. Para un grupo de 5 radio buttons con mismo nombre y diferente valor cada uno, para referirnos al cuarto de ellos se debe usar la sintaxis: formulario.nombre_radio[3]

12.2 Principales eventos

evento descripción

onFocus Permite realizar una acción al poner el foco en el objeto.

onBlur Permite realizar una acción cuando el foco ya no se encuentra en el objeto.

onClick Permite realizar una acción cuando se hace click sobre el objeto.

onChange Evento que se produce al marcar/desmarcar un checkbox o un radio button.

12.3 Sintaxis básicaPara un grupo de radio buttons (mismo nombre distinto valor) <input type="radio" name="color" value="rojo"><input type="radio" name="color" value="verde"> Para un grupo de checkbox (mismo nombre distinto valor) <input type="checkbox" name="colores" value="rojo"><input type="checkbox" name="colores" value="verde"> 12.3 Ejemplos de aplicación I: Trabajando con la propiedad disabledEjemplo #1En este caso se habilitarán o deshabilitarán los checkbox dependiendo de la opción que seleccione el usuario de un grupo de dos radio buttons.

El Script... <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 boletín de novedades? <br><input type="radio" name="boletin" value="si" checked onClick="habilita(this.form)"> SI, quiero suscribirme. <input type="radio" name="boletin" value="no" onClick="deshabilita(this.form)"> No, gracias.<br><br>Seleccione los temas de su interés:<br><input type="checkbox" name="intereses" value="Arte y Cultura"> Arte y Cultura<br><input type="checkbox" name="intereses" value="Ciencia">Ciencia<br><input type="checkbox" name="intereses" value="Música">Música<br></form> Los resultados...

¿Desea suscribirse a nuestro boletín de novedades?

SI, quiero suscribirme. No, gracias.

Seleccione los temas de su interés:

Arte y Cultura

Ciencia

Música Ejemplo #2En este caso se habilitarán o deshabilitarán 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 boletín de novedades? <input type="checkbox" name="boletin" value="ON" checked onClick="habilitaDeshabilita(this.form)"> SI, quiero suscribirme. <br><br>Seleccione los temas de su interés:<br><input type="checkbox" name="intereses" value="Arte y Cultura"> Arte y Cultura<br><input type="checkbox" name="intereses" value="Ciencia">Ciencia<br><input type="checkbox" name="intereses" value="Música">Música<br></form>

Los resultados...

¿Desea suscribirse a nuestro boletín de novedades? SI, quiero suscribirme.

Seleccione los temas de su interés:

Arte y Cultura

Ciencia

MúsicaSe presenta la sintaxis para conocer el valor de las propiedades de estos objetos.

13.1 Sintaxis básica para conocer el valor de todas las propiedadesPara trabajar con el valor de las propiedades de un checkbox o de un radio button se trabaja de manera distinta que con text y password. Aquí veremos primero, la sintaxis básica para conocer estos valores, y luego los aplicaremos a algunos ejemplos.13.1.1 Valor de value form.nombre_del_grupo[index].value Ejemplo: form.grupo1[0].valueform.grupo1[1].valueform.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].disabledform.grupo1[1].disabledform.grupo1[2].disabled 13.1.4 Valor de checked form.nombre_del_grupo[index].checked Ejemplo:form.grupo1[0].checkedform.grupo1[1].checkedform.grupo1[2].checked 13.1.5 Valor de length form.nombre_del_grupo.length Ejemplo:form.grupo1.length13.2 Ejemplos de aplicación II: trabajando con el valor de las propiedadesComo habrán podido observar en los ejemplos anteriores, seguramente notaron que para poder trabajar con un checkbox o un radio en forma particular, si pertenecen al mismo grupo, debe usarse el index. Por eso, decía anteriormente que conocer el valor de value es poco útil, a excepción que se necesite escribir

ese valor en un campo de texto. Pero los ejemplos "combinados" entre distintos objetos los dejaremos para más adelante. Nos limitaremos ahora, a estos dos objetos.Información del valor de todas las propiedades

El Script... <script languaje="javascript"> function informar(form){nombreCasilla = form.colores[0].namevalorCasilla = form.colores[0].value

valorDisabled = ""valorChecked = ""

valorLength = form.colores.length

// definición de valorDisabled if (form.colores[0].disabled == true) { valorDisabled = "está deshabilitada"; } else { valorDisabled = "está habilitada"; }

// definición de valorChecked if (form.colores[0].checked == true) { valorChecked = "está seleccionada"; } else { valorChecked = "no está seleccionada"; }

nombreCasillaStr = "El nombre de la primer casilla es: " + nombreCasillavalorCasillaStr = "El valor de la primer casilla es: " + valorCasillavalorDisabledStr = "La primer casilla " + valorDisabledvalorCheckedStr = "Esta casilla " + valorCheckedvalorLengthStr = "La cantidad total de casillas es: " + valorLength

// escribimos el mensaje de alertastrAlerta = nombreCasillaStr + "\n" + valorCasillaStr + "\n" + valorDisabledStr + "\n" + valorCheckedStr + "\n\n" + valorLengthStr

// lanzamos la acciónalert(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 información" onClick="informar(this.form)"></form> Los resultados...

Colores:

Verde

Azul

Rojo

13.3 Ejemplos de aplicación III: trabajando con propiedad checkedLanzar una acción si un checkbox no se ha marcadoAceptar los términos 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 términos del contrato antes de continuar"); form.acepto.focus(); return true; }form.submit()}</script> El formulario... <form name="contrato"><b>Formulario de suscripción al servicio de acceso a Internet 0610</b><br>... campos del formulario ...<br>...<br><input type="checkbox" name="acepto"> Acepto los términos del contrato de suscripción<br><input type="button" value="Enviar" onClick="verificarCasilla(this.form)"></form> Los resultados...

Formulario de suscripción al servicio de acceso a Internet 0610... campos del formulario ......

Acepto los términos del contrato de suscripción

En el capítulo se hace referencia a la sintaxis y propiedades de este objeto, muy parecido al objeto text

14.1 Propiedades básicasEl objeto textarea en principio recibe el mismo tratamiento que que el objeto text con algunas pocas diferencias. Tanto las propiedades, como los métodos y eventos son los mismos, solo se agregan los siguientes:


cols cantidad de columnas "ancho" de la caja de texto.

rows cantidad de filas "alto" de la caja de texto

El resto de las propiedades name, value, disabled, readonly, length y maxlength reciben la misma definición que para el objeto text. La única excepción está en size que es reemplazado por cols y rows (ancho y alto respectivamente). La propiedad value obtiene una pequeña diferencia con la definición dada en text por sobre todo en su sintáxis. Veamos su sintaxis básica: 14.2 Sintaxis básica <textarea cols="30" rows="5" name="nombre">texto que actúa como value</textarea>



Para llamar a alguna de estas propiedades, se lo hace de idéntica forma que con text: formulario.nombre_textarea.propiedad 14.3 Principales métodos del objeto textarea Idénticos a los del objeto text. 14.4 Principales eventos del objeto textarea Idénticos a los del objeto text. 14.5 Ejemplos de aplicaciónLos ejemplos de aplicación dados en los capítulos 7.1, 8.1, 9.1 y 10.1 correspondientes a los objetos text y password son perfectamente aplicables a este objeto. Bastará con solo reemplazar el nombre de los campos de texto (text) por los nombres del textarea.

Sintaxis, propiedades y eventos principales asociados a estos elementos de formulario.

15.1 SELECT: Propiedades principales propiedad descripción

name nombre del select

size establece la cantidad de opciones que a primera vista se verán en el select

option es la principal propiedad ya que permite acceder a cada opción del select.

disabled si su valor es "true", bloquea el select y no permite realizar ningún tipo de selección. Si su valor es "false" contrarresta el efecto anterior.

multiple permite al usuario seleccionar más de una opción (mediante la tecla Ctrl)

type informa si el select es del tipo multiple o simple.

15.2 SELECT: Sintaxis básica <select name="nombre" size="3" multiple><option value="valor 1">Texto de opción 1</option><option value="valor 2" selected>Texto de opción 2</option><option value="valor 3">Texto de opción 3</option><option value="valor 4">Texto de opción 4</option></select>Muestra (selección múltiple):

manteniendo apretada la tecla Ctrl (control) puede seleccionarse más de una opción Muestra (selección simple):

valor de size "3"

valor de size "1"solo puede seleccionarse una opción en cualquiera de los dos casos15.3 SELECT: Métodos del objeto método descripción







focus coloca el foco en el select

15.4 SELECT: Eventos del objeto evento descripción

onFocus se produce al colocar el foco en el select

onBlur se produce al abandonar el select (al quitar el foco)

onChange se produce al realizar un cambio de selección

15.5 OPTION: Propiedades principales propiedad descripción

value valor asociado a cada opción del select. Es invisible al usuario pero es el valor que se envía junto al formulario.

text es el texto que ve el usuario que se encuentra contenido entre las etiquetas <option> y </option>

selected indica si una opción está seleccionada.

selectedIndex Da acceso a la opción (option) que ha seleccionado el usuario.

index al igual que en form, o checkbox, este array contiene todas las opciones pertenecientes a un select y tambien comienza por 0.

length Cuenta la cantidad de opciones (option) que conforman un select

15.6 OPTION: Métodos y eventosEl objeto option no posee métodos ni eventos propios. 15.7 Sintaxis básica general: llamando a las propiedadesEn la siguiente lista veremos la forma correcta de llamar a cada propiedad en ambos objetos. PROPIEDAD

OBJETO SINTAXIS

name SELECT

nombre_formulario.nombre_select.name

size SELECT

nombre_formulario.nombre_select.size

option SELECT

nombre_formulario.nombre_select.options[index] se refiere a una opción específica formulario.select.options[formulario.select.selectedIndex].propiedadse refiere a la opción seleccionada por el usuario

disabled SELECT

nombre_formulario.nombre_select.disabled = true/false

multiple SELECT

nombre_formulario.nombre_select.multiple = true/false

type SELECT

nombre_formulario.nombre_select.type

value OPTIO nombre_formulario.nombre_select.options[index].value

N

se refiere a una opción específica formulario.select.options[formulario.select.selectedIndex].valuese refiere a la opción seleccionada por el usuario

text OPTION

nombre_formulario.nombre_select.options[index].text

selected OPTION

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

selectedIndex

OPTION

formulario.select.options[formulario.select.selectedIndex].propiedad

index OPTION

nombre_formulario.nombre_select.options[index]

length OPTION

nombre_formulario.nombre_select.options.length

15.8 El constructor new Option Este constructor nos permite introducir nuevas opciones dentro de un select. Su sintaxis básica es la siguiente: variable = new Option("text","value","defaultSelected","selected") Para introducir esta nueva opción en un select se debe usar la siguiente sintaxis: nombre_formulario.nombre_select.options[index] = variable Para borrar una opción existente de un select la sintaxis es la siguiente: nombre_formulario.nombre_select.options[index] = null

Aquí encontraremos ejemplos de aplicación en los que se usarán propiedades de este objeto. 16.1 Ejemplos de aplicación Trabajando con la propiedad disabledVeremos 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...

Trabajando con el constructor new OptionMediante este ejemplo, se generarán distintas opciones en la segunda lista dependiendo de la opción 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 selección","","",""); 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("Música 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 opción]</option><option value="musicapopular">Música Popular (Rock)</option><option value="musicaacademica">Música Académica</option></select> <select name="estilo"><option value=""><-- esperando selección</option></select> <input type="submit" value="Enviar"></form> Los resultados...

Validar un selectComo en los dos ejemplos anteriores, vimos que existen opciones que tienen un valor nulo (value=""). Se supone que ese tipo de opciones, no debe ser enviada en un formulario, ya que no tienen ese valor. Este ejemplo, verificará que la opción elegida, sea una opción válida.El script... <script languaje="javascript">function validar(form){ if (form.combo1.options[form.combo1.selectedIndex].value == "") { alert("Por favor, seleccione una opción válida"); form.combo1.focus(); return true; }form.submit();}</script> El formulario... <form name="ejemplo3" method="POST" target="_blank" action="pagina.htm"><select name="combo1"><option value=" ">[seleccione una opción]</option><option value="opcion1">Opción 1</option><option value="opcion2">Opción 2</option><option value="opcion3">Opción 3</option></select> <input type="button" value="Enviar" onClick="validar(this.form)"></form> Los resultados...

Modificar la propiedad text de un optionPor algún 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 opción válida"; form.opciones.focus(); } else { select[form.opciones.selectedIndex].text = "Presione el botón 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 opción]</option><option value="opcion1">Opción 1</option><option value="opcion2">Opción 2</option><option value="opcion3">Opción 3</option></select> <input type="submit" value="Enviar"></form>

Los resultados...

Lista de propiedades y eventos asociados. 17.1 Principales propiedades


name nombre que identifica el objeto

size ancho de la caja de texto

disabled deshabilita el campo de texto y el botón del objeto file

17.2 Principales eventos

evento descripción

onFocusPermite realizar una acción al poner el foco en el campo. Es un evento bastante molesto, porque en realidad, actúa en forma similar al evento onClick, bloqueando el campo.

onBlurPermite realizar una acción cuando el foco ya no se encuentra en el campo. Tal vez, es un poco más útil que el anterior, ya que solo podría lanzarse una acción, en caso que el campo se encuentre vacío.

Veremos varios ejemplos de scripts JavaScript aplicables a formularios que aumentarán la funcionalidad de éste.

1. Colocar el foco en un determinado campo al cargar la página <BODY onLoad="this.document.ejemplo1.campo1.focus()"> <form name="ejemplo1" method="GET" action="pagina.htm" target="_blank">Escribe tu nombre: <input type="text" name="campo1" size="15"> <input type="submit" value="Enviar"></form>

Escribe tu nombre: 2. Convierte la primer letra de cada palabra en mayúscula <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: 3. Convierte la primer letra del texto en mayúsculas (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 página actual <form name="ejemplo8" method="GET" action="pagina.htm" target="_blank">Por favor, introduce el código correspondiente al colorCódigo color: <input type="text" name="campo1" size="7"> <a onClick="window.open('ejemplos/paleta.htm',null,'widht=150,height=100')" style="cursor: hand">Ver Paleta</a><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">marrón</font><br><input type="radio" name="color" value="#FF00FF" onClick="opener.document.ejemplo8.campo1.value=colores.color[1].value"><font color="#FF00FF">fucsia</font><br><a href="javascript:window.close()"><b>x cerrar ventana</b></a></form> Por favor, introduce el código correspondiente al color Código color: Ver Paleta

5. Comprueba que el valor ingresado en dos campos no sea el mismo <script languaje="javascritp">function validarCampos1(form){ if(form.campo1.value == form.campo2.value) { alert("La contraseña no puede ser igual al nombre de usuario"); form.campo2.value = ""; form.campo2.focus(); return true; }form.submit()}</script>

<form name="ejemplo9" method="POST" action="pagina.htm" target="_blank">Usuario: <input type="text" name="campo1"><br>Contraseña: <input type="password" name="campo2"><br><input type="button" value="Registrarse" onClick="validarCampos1(this.form)"></form>

Usuario:

Contraseña:

6. Comprueba que el valor ingresado en dos campos sea igual <script languaje="javascritp">function validarCampos2(form){ if(form.campo2.value == form.campo1.value) { form.submit(); } else { alert("La repetición de la contraseña no coincide."); form.campo2.value = ""; form.campo2.focus(); return true; }}</script> <form name="ejemplo10" method="POST" action="pagina.htm" target="_blank">Contraseña: <input type="password" name="campo1"><br>Repetir contraseña: <input type="password" name="campo2"><br><input type="button" value="Registrarse" onClick="validarCampos2(this.form)"></form>

Contraseña:

Repetir contraseña:

7. Permite seleccionar solo una determinada cantidad de checkbox del mismo nombre <script language="javascript">function limitarSelección(casilla,form) {a = casilla.form.casilla1[0].checked;b = casilla.form.casilla1[1].checked;c = casilla.form.casilla1[2].checked;d = casilla.form.casilla1[3].checked;e = casilla.form.casilla1[4].checked;

contador = (a ? 1 : 0) + (b ? 1 : 0) + (c ? 1 : 0) + (d ? 1 : 0) + (e ? 1 : 0);

if (contador > 3) { alert("Solo puedes seleccionar 3 opciones"); casilla.checked = false; }}</script> <form name="ejemplo11" method="GET" action="pagina.htm" target="_blank">Por favor, seleccione 3 opciones como máximo:<br><input type="checkbox" name="casilla1" value="Opcion 1" onClick="limitarSelección(this,this.form)">Opción 1<br>

<input type="checkbox" name="casilla1" value="Opcion 2" onClick="limitarSelección(this,this.form)">Opción 2<br><input type="checkbox" name="casilla1" value="Opcion 3" onClick="limitarSelección(this,this.form)">Opción 3<br><input type="checkbox" name="casilla1" value="Opcion 4" onClick="limitarSelección(this,this.form)">Opción 4<br><input type="checkbox" name="casilla1" value="Opcion 5" onClick="limitarSelección(this,this.form)">Opción 5<br><input type="submit" value="Enviar"></form>

Por favor, seleccione 3 opciones como máximo:

Opción 1

Opción 2

Opción 3

Opción 4

Opción 5

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">Opción 1<br><input type="checkbox" name="casilla1" value="Opcion 2">Opción 2<br><input type="checkbox" name="casilla1" value="Opcion 3">Opción 3<br><input type="checkbox" name="casilla1" value="Opcion 4">Opción 4<br><input type="checkbox" name="casilla1" value="Opcion 5">Opción 5<br><hr><input type="submit" value="Enviar"></form>

Marcar todos | Desmarcar todos

Opción 1

Opción 2

Opción 3

Opción 4

Opción 5

9. Selecciona todos los checkbox con un solo click o los deselecciona o invierte la selección <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 selección<hr><input type="checkbox" name="casilla1" value="Opcion 1">Opción 1<br><input type="checkbox" name="casilla1" value="Opcion 2">Opción 2<br><input type="checkbox" name="casilla1" value="Opcion 3">Opción 3<br><input type="checkbox" name="casilla1" value="Opcion 4">Opción 4<br><input type="checkbox" name="casilla1" value="Opcion 5">Opción 5<br><hr><input type="submit" value="Enviar"></form>

Marcar todos | Desmarcar todos | Invertir selección

Opción 1

Opción 2

Opción 3

Opción 4

Opción 5

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 más de uso de rutinas con formularios. 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 máxima 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.valuetexto = 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:

13. Muestra o esconde el botón "submit"Esconde el botón submit si los campos están vacíos <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:

14. Habilita o deshabilita el botón "submit"Deshabilita el botón submit si los campos están vacíos <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:

15. Mensaje de confirmación al borrar un formulario <script languaje="javascript">function ConfirmarBorrado(form){borrar = window.confirm('Se borrarán 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 confirmación al enviar un formulario <script languaje="javascript">function ConfirmarEnvio(form){enviar = window.confirm('Se enviarán 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

Technology