Contiene todo la infromacion referente a la programación de javascriptDescripción completa
Introducere in JavaScriptFull description
Description : Cours de javascript par Cabaré
JavaScriptDescrição completa
Descripción: Los formularios mejoran la productividad de excel
Fomr
Un Interesnate Tema De manejos de Formularios incluyendo el uso de sentencias para acceso al formulario por php
Descripción: $_GET, $_POST, $_FILES
Descripción completa
Un Interesnate Tema De manejos de Formularios incluyendo el uso de sentencias para acceso al formulario por php
Full description
JavaScript nije Java. Toliko! Kada smo ovo razjasnili, možemo da pređemo na značajnije i važnije učenje, kao npr. kako da napravite dobre slajdere. Šalu na stranu, JavaScript je jedna imple…Full description
Resumen JavascriptDescripción completa
Test upload
1. El objeto form, propiedades y métodos 1.1 El objeto form 1.2 Propiedades principales del objeto form 1.2.1 Sintaxis básica 1.3 Métodos del objeto form 1.3.1 Sintaxis básica 1.4 Ejemplo de aplicación Método POST Método GET
2. Sub-propiedades del objeto form y eventos 2.1 Sub-propiedades del objeto form 2.1.1 Sintaxis básica 2.2 Ejemplos de aplicación Length Index 2.3 Los eventos que admite el objeto form 2.3.1 Sintaxis básica 2.4 Ejemplos de aplicación Alerta al enviar y/o restablecer un formulario
3. Valores de la propiedad action 3.1 Ejemplos de aplicación
Modificación del valor de la propiedad action Duplicando el valor de la propiedad action (enviar un mismo formulario a dos páginas distintas).
4. El valor de la propiedad method y target 4.1 Sobre la propiedad Method: Ejemplos de aplicación Modificar el valor de la propiedad action 4.2 Sobre la propiedad Target: Ejemplos de aplicación Modificar el valor de la propiedad target
5. Objetos de un formulario 5.1 Tipos de objetos, definición y sintaxis básica (campos de un formulario).
6. Los objetos text y password 6.1 Propiedades de los objetos text y password 6.1.2 Sintaxis básica 6.2 Principales métodos de los objetos text y password 6.2.1 Sintaxis básica 6.3 Principales eventos de los objetos text y password 6.4 Sintaxis básica
7. Los objetos text y password II 7.1 Ejemplos de aplicación I: Trabajando con el valor de un campo Eliminar el valor de un campo al hacer click
Reproducir el valor de un campo en otro Rellenar el valor de un campo vacío con una frase o palabra Validar campos (forma 1) 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 campos Como bloquear o desbloquear un campo 8.2 Ejemplos de aplicación III: Trabajando con la propiedad size Aumento y reducción del valor size
9. Los objetos text y password IV 9.1 Ejemplos de aplicación III: Trabajando con la propiedad length Establecer un límite mínimo de caracteres Establecer un límite máximo de caracteres Establecer un límite absoluto de caracteres Establecer un límite mínimo y uno máximo de caracteres Contabilizar la cantidad de caracteres escritos y los restantes Informar la cantidad de caracteres excedidos y los faltantes
10. Los objetos text y password V 10.1 Ejemplos de aplicación IV: toUpperCase y toLowerCase
Convertir el texto a mayúsculas Convertir el texto a minúsculas
11. El objeto hidden 11.1 Usos de este objeto
12. Los objetos radio y checkbox 12.1 Propiedades de los objetos 12.2 Principales eventos 12.3 Sintaxis básica 12.4 Ejemplos de aplicación I: Trabajando con la propiedad disabled Habilitar o deshabilitar un grupo de checkbox según la opción elegida de los radio buttons. Habilitar o deshabilitar un grupo de checkbox según el valor de la propiedad checked de otro checkbox.
13. Los objetos radio y checkbox II 13.1 Sintaxis básica para conocer el valor de todas las propiedades 13.1.1 Valor de value 13.1.2 Valor de name 13.1.3 Valor de disabled 13.1.4 Valor de checked 13.1.5 Valor de length 13.2 Ejemplos de aplicación II: trabajando con el valor de las propiedades Como conocer los valores de todas las propiedades 13.3 Ejemplos de aplicación III: trabajando con propiedad checked
Aceptar los términos de un contrato antes de suscribir el formulario (realiza una acción solo si el checkbox no ha sido marcado)
14. El objeto textarea 14.1 Propiedades básicas 14.2 Sintaxis básica 14.3 Principales métodos del objeto textarea 14.4 Principales eventos del objeto textarea 14.5 Ejemplos de aplicación Eliminar el valor de un campo al hacer click Reproducir el valor de un campo en otro Rellenar el valor de un campo vacío con una frase o palabra Validar campos (forma 1) Validar campos (forma 2) Introducir en un solo campo los valores de distintos campos. Como bloquear o desbloquear un campo Establecer un límite mínimo de caracteres Establecer un límite máximo de caracteres Establecer un límite absoluto de caracteres Establecer un límite mínimo y uno máximo de caracteres Contabilizar la cantidad de caracteres escritos y los restantes Informar la cantidad de caracteres excedidos y los faltantes Convertir el texto a mayúsculas Convertir el texto a minúsculas
15. Los objetos select y option 15.1 SELECT: Propiedades principales 15.2 SELECT: Sintaxis básica 15.3 SELECT: Métodos del objeto 15.4 SELECT: Eventos del objeto 15.5 OPTION: Propiedades principales 15.6 OPTION: Métodos y eventos 15.7 Sintaxis básica general: llamando a las propiedades 15.8 El constructor new Option: uso y sintaxis
16. Los objetos select y option II 16.1 Ejemplos de aplicación La propiedad disabled: habilitar un select si ya se ha elegido una opción de otro delect El constructor new Option: listas encadenadas. Cambian las opciones de una lista, dependiendo de la selección realizada en otra. Validar un select. Modificar la propiedad text de un option.
17. El objeto file 17.1 Principales propiedades 17.2 Eventos que admite
Anexo I Rutinas JavaScript para aplicar a formularios
Colocar el foco en un determinado campo al cargar la página Convierte la primer letra de cada palabra en mayúscula Convierte la primer letra del texto en mayúsculas Escribe un valor indicado en otra ventana, en el formulario abierto Comprueba que el valor ingresado en dos campos no sea el mismo Comprueba que el valor ingresado en dos campos sea igual Permite seleccionar solo una determinada cantidad de checkbox del mismo nombre Selecciona todos los checkbox con un solo click o los deselecciona Selecciona todos los checkbox con un solo click o los deselecciona o invierte la selección Cuenta la cantidad de checkbox o radio que hay seleccionados
Anexo II Más rutinas JavaScript
Aumenta o disminuye un valor Cuenta la cantidad de palabras introducidas en un textarea Muestra o esconde el botón "submit" Habilita o deshabilita el botón "submit" Mensaje de confirmación al borrar un formulario Mensaje de confirmación al enviar un formulario
Conocer el objeto form, sus elementos y propiedades, su procesamiento de datos, su envío y recepción. Por Eugenia Bahit Atención: 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 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 Y , lo mismo sucede con un formulario: el formulario debe estar contenido entre las etiquetas En principio la sintaxis básica para referirnos a un formulario sería: window.document.forms.nombre_del_formulario En la que tranquilamente pueden prescindirse de window y forms ya que el navegador toma al formulario como un objeto en sí mismo. De la misma forma, tambien puede prescindirse de document. Pero esta omisión solo se hará si queremos referirnos a un formulario en particular (por ejemplo a un formulario llamado "datos"). Pero al momento de referirnos a "todos los formularios de una página", solo se podrá prescindir del objeto window. De todas formas, iremos viendo la aplicación de este tipo de sintaxis con los próximos ejemplos y a medida que avancemos. 1.2 Propiedades principales del objeto form El objeto form posee las siguientes propiedades:
propiedad descripción name
es el nombre único del formulario.
action
es el lugar al cual se envía el formulario para ser procesado. El action define la URL a la cual se envía dicho formulario.
method
método de envío de los datos insertados en un formulario. El method puede ser: GET = envía los datos en una cadena "visible". Conveniente para enviar pocos datos. POST = envía los datos en forma "invisible". Conveniente para enviar una gran cantidad de datos.
target
define la ventana o marco (frame) en la que se mostrarán o procesarán los resultados del formulario. El valor es el mismo que el utilizado en HTML (blank, self, top, nombre_marco, etc..)
1.2.1 Sintaxis básica 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 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.... El resultado... Escribe tu nombre: enviar formulario
borrar
Method GET El código.... El resultado... Escribe tu nombre: enviar formulario
borrar
Otras cuestiones relativas al objeto form: propiedades index y length, y eventos. Por Eugenia Bahit Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
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:
subpropiedad
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.length nos 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: 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: Los resultados... Presiona el botón para saber el nombre del primer formulario: 2.3 Los eventos que admite el objeto form Si bien la mayoría de los eventos JavaScript son aceptados por el objeto form, muchos de ellos pueden crear más problemas que soluciones y si se utilizan, es en casos muy específicos pero no usuales. En la siguiente lista veremos los más utilizados:
evento
descripción
onSubmit
es el principal evento del objeto form y se produce al enviar el formulario: ya sea mediante el botón submit o mediante una función JavaScript que llame al método submit()
onReset
funciona igual que el evento anterior pero se sucede al restablecer el formulario.
2.3.1 Sintaxis básica Los resultados.... Escribe tu nombre: Enviar
Borrar
Mediante JavaScript, podremos modificar y seleccionar el valor de la propiedad action. Por Eugenia Bahit Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
3.1 Ejemplos de aplicación Vimos en la introducción de este manual, para que sirve la propiedad action. Ahora, veremos lo que se puede hacer con la misma mediante JavaScript. Mediante JavaScript, podremos modificar/seleccionar el valor de la propiedad action según las preferencias del usuario. El ejemplo más típico sería el de un formulario de suscripción a un boletín de novedades, donde el usuario deberá elegir, si desea darse de alta o de baja. Modificación del valor de la propiedad action El Script... <script language="javascript"> function enviar(form) { if ((boletin.alta.checked == true) && (boletin.baja.checked == true)) { alert("Por favor, marca una sola casilla"); return true; } if ((boletin.alta.checked == false) && (boletin.baja.checked == false)) { alert("Debes indicar si deseas darte de alta o de baja"); return true; } if (boletin.alta.checked == true) { boletin.action = "ejemplos/alta.asp"; } if (boletin.baja.checked == true) { boletin.action = "ejemplos/baja.asp"; } form.submit() } El formulario... 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() } El Formulario... 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 ridículo ya que el método por el cual se envían los datos, puede estar perfectamente definido en el formulario. El valor de target 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. Por Eugenia Bahit Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
4.1 Sobre la propiedad Method Como dijese anteriormente, modificar el valor de la propiedad method carece de un verdadero sentido. Pero, de todas formas, esto siempre dependerá de lo que se necesite hacer. La función que modifica el valor de method es muy similar a la que modifica el valor de action y target. Veamos como se realiza este función: <script languaje="javascript"> function CambiaMethod() { form1.method ="POST"; } 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() } El formulario... Los resultados... Escribe tu nombre: Método POST |
Método GET
4.2 Sobre la propiedad Target
De igual forma que en el anterior ejemplo, veremos un caso en el que el usuario seleccionará el target en el cual desea visualizar los resultados enviados por el formulario. El Script... <script languaje="javascript"> function CambiaTarget() { if (form2.blank.checked == true) { form2.target ="_blank"; } if (form2.self.checked == true) { form2.target = "_self"; } form2.submit() } El formulario... 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 Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
5.1 Tipos de objetos, definición y sintaxis básica Los objetos de un formulario (objetos del objeto form) son los "campos" de un formulario. En la siguiente tabla, podremos apreciar los tipos de objetos con su correspondiente descripción:
objeto
descripción
text
es un campo de texto en el que los datos en él introducidos son visibles para el usuario.
Sintaxis:
un campo de texto idéntico 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 *
ejemplo
Sintaxis:
hidden
es un campo de texto oculto con un valor preestablecido y que el usuario no podrá visualizar en ningún momento. Sintaxis:
es un campo de texto similar en su tratamiento a text pero lo que en él varía 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 línea. Sintaxis:
radio
es un botón circular que permite elegir al usuario una opción de entre varias pertenecientes a un mismo grupo. Sintaxis:
es una casilla de verificación que permite al checkbox usuario seleccionar más de una opción entre varias. Similar a radio pero con esta ventaja. Sintaxis:
option
es una lista desplegable de varias opciones. Puede permitir la selección de una sola opción o de múltiples opciones (si se mantiene presionada la tecla Crtl durante dicha selección).
opcion1 opcion2
Sintaxis:
file
campo compuesto que permite examinar el disco duro para subir ficheros al servidor. Sintaxis:
submit
es un tipo de botón que se encarga de enviar el formulario. Sintaxis:
Enviar
reset
es un tipo de botón que se encarga de restablecer el formulario a sus valores por defecto.
Borrar
Sintaxis:
button
es un tipo de botón al que se le pueden asignar múltiples funciones mediante eventos. Sintaxis:
image
es una imagen que actúa como botón (reset, button o submit)
Sintaxis:
Propiedades de los objetos text y password son name, value, disabled, ReadOnly, size, length y maxlength. Por Eugenia Bahit Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
6.1 Propiedades de los objetos text y password
propiedad descripción 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
[objeto] --> debe ser reemplazado por text o password. disabled/ReadOnly --> debe elegirse una sola propiedad disabled o ReadOnly Para llamar a alguna de estas propiedades, se utiliza la siguiente sintaxis: formulario.campo.propiedad donde: formulario es el nombre del formulario campo el nombre del campo y propiedad debe ser reemplazado por el nombre de la propiedad correspondiente. 6.2 Principales métodos de los objetos text y password
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 formulario campo el nombre del campo y método debe ser reemplazado por el nombre del método correspondiente. 6.3 Principales eventos de los objetos text y password
evento
descripción
onFocus
Permite realizar una acción al poner el foco en el campo.
onBlur
Permite realizar una acción cuando el foco ya no se encuentra en el campo.
onSelet
Permite realizar una acción cuando se selecciona el texto del campo.
onKeyUp / Permite realizar una acción cuando el usuario pulsa una tecla onKeyDown / (en los ejemplos veremos la diferencia) onKeyPress onClick
Permite realizar una acción cuando se hace click sobre el campo.
Permite realizar una acción cuando el texto del campo cambia por otro.
onChange
Permite realizar una acción 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 básica 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. Por Eugenia Bahit Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
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... 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; } El formulrio...
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() } El formulario... Los resultados... Rellena tu perfil de usuario (opcional) Nombre real: Teléfono: Ciudad:
Si modificamos un poco el ejemplo anterior, podemos hacer que en vez de completar automáticamente los campos, le avise al usuario que debe completarlos para poder enviar el formulario. Esto podremos hacerlo avisando al usuario campo por campo o enviándole un aviso en general: EJEMPLO #4: VALIDAR CAMPOS (forma 1)
El Script... <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() } El formulario...
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() }
El formulario... 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; } } El formulario... Los resultados... Por favor, complete su domicilio: Calle: Piso:
Nro.: Departamento:
Código Postal:
Ciudad:
País:
Verifique su domicilio: lo datos se verán una vez que el campo tomo el foco (puede ser mediante la tecla TAB o haciendo click en el campo).
Si los datos no son correctos, presione aquí y realice los cambios en los campos correspondientes. Confirmar
El campo "clave" (password) estará bloqueado si el campo "usuario" (text) se encuentra vacío y se desbloqueará en caso contrario. Por Eugenia Bahit Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
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 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; } } El formulario...
Los resultados... Usuario: Clave: 8.2 Ejemplos de aplicación III: Trabajando con la propiedad size No son muy frecuentes los cambios o el provecho que se le puede sacar al valor de la propiedad size, pero en algunos casos, y sobre todo asociado a la propiedad length puede resultar muy útil. AUMENTO Y REDUCCIÓN DEL VALOR SIZE Si aumenta el valor de length aumenta el tamaño de size El script... <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"; } } El formulario... Los resultados... Campo 1:
Utilización de la propiedad length, aplicada a varios ejemplos Por Eugenia Bahit Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
9.1 Ejemplos de aplicación III: Trabajando con la propiedad length Esta es una de las propiedades más útiles de estos objetos. Con esta propiedad, podremos limitar una cantidad de caracteres mínimo, máximo o absoluto. Veremos entonces, 4 ejemplos: 1. LÍMITE MÍNIMO DE CARACTERES
El script... <script languaje="javascript">
function validarCampo1(form) { if (form.palabra1.value.length < 6) { alert('Debes introducir una palabra con un mínimo de 6 caracteres'); form.palabra1.focus(); return true; } } El formulario... El resultado... Mínimo 6 caracteres: 2. LÍMITE MÁXIMO DE CARACTERES
El script... <script languaje="javascript"> function validarCampo2(form) { if (form.palabra1.value.length > 6) { alert('Debes introducir una palabra con un máximo de 6 caracteres'); form.palabra1.focus(); return true; } }
El formulario... Los resultados... Máximo 6 caracteres: 3. LÍMITE 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; } } El formulario... 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; } } El formulario... 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); } } El formulario... Los resultados... Máximo 50 caracteres: Escritos:
0
Restantes:
50
CANTIDAD DE CARACTERES EXCEDIDOS Y CARACTERES FALTANTES
El Script... <script languaje="javascript"> function validarCampo5(form) { c = 12; // cant. máxima de caracteres L = form.campo.value.length; // e es el excedido // f es el faltante if (L > c) { e = (L-c); error = 1; } if (L < c) { f = (c-L); error = -1; } if ((L != c) && (error == -1)) { alert("El campo contiene " + f + " caracteres menos a los solicitados"); form.campo.focus(); return true; } if ((L != c) && (error == 1)) { alert("El campo contiene " + e + " caracteres más a los solicitados"); form.campo.focus(); return true; } } El formulario... Los resultados... Escribir solo 12 caracteres:
Ejemplos de uso de las funciones toUpperCase y toLowerCase. Por Eugenia Bahit Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
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... Los resultados... Texto: si escribes el texto utilizando minúsculas notarás el cambio
CONVERTIR TODO EL TEXTO A MINÍSCULAS
El código... Los resultados... Texto: si escribes el texto utilizando mayúsculas notarás el cambio
Usos de este objeto componente de formularios. Por Eugenia Bahit Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
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: Pero el valor (value) estará siempre impuesto por defecto.
Propiedades, eventos y ejemplos de estos objetos contenidos en formularios. Por Eugenia Bahit Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
12.1 Propiedades de los objetos propiedad
descripción
name
Es el nombre que identifica a un checkbox a un grupo de radio buttons. Para que éstos últimos conserven la capacidad de selección única, deben tener todos el mismo nombre. Es un valor asociado a cada checkbox o radio.
value
En el caso de los checkbox es útil asignar a un grupo de éstos con el mismo name distintos valores. Pero si se quieres acceder a las propiedades de cada checkbox separadamente mediante JavaScript, es mejor utilizar un name diferente para cada checkbox, ya que de lo contrario (si todos tienen el mismo name) la propiedad value resulta poco útil. En el caso de los radio buttons es una propiedad necesaria siempre al tener todos el mismo name, aunque para su acceso mediante JavaScript, esta propiedad no es muy útil.
disabled
bloquea el checkbox o radio. Por lo tanto "No es enviado en el formulario" y "actúa como si no existiese".
checked
marca o comprueba si está marcado un checkbox o un radio. Es una propiedad booleana (que solo admite verdadero o falso) en la cual su valor será "true" (verdadero) si el objeto está marcado y "false" (falso) en caso que no lo esté.
length
es la cantidad de radio buttons que existe en un grupo determinado con el mismo name.
index
array que contiene todos los radio buttons que hay en un grupo con el mismo nombre. Para un grupo de 5 radio buttons con mismo nombre y diferente valor cada uno, para referirnos al cuarto de ellos se debe usar la sintaxis: formulario.nombre_radio[3]
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ásica Para un grupo de radio buttons (mismo nombre distinto valor) Para un grupo de checkbox (mismo nombre distinto valor) 12.3 Ejemplos de aplicación I: Trabajando con la propiedad disabled Ejemplo #1 En este caso se habilitarán o deshabilitarán los checkbox dependiendo de la opción que seleccione el usuario de un grupo de dos radio buttons.
El Script... <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; } El Formulario... Los resultados... ¿Desea suscribirse a nuestro boletín de novedades? SI, quiero suscribirme.
No, gracias.
Seleccione los temas de su interés: Arte y Cultura Ciencia Música Ejemplo #2 En este caso se habilitarán o deshabilitarán los checkbox dependiendo del valor de la propiedad checked de otro checkbox.
El Script... <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; } } El Formulario... Los resultados... ¿Desea suscribirse a nuestro boletín de novedades? Seleccione los temas de su interés: Arte y Cultura Ciencia Música
SI, quiero suscribirme.
Se presenta la sintaxis para conocer el valor de las propiedades de estos objetos. Por Eugenia Bahit Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
13.1 Sintaxis básica para conocer el valor de todas las propiedades Para trabajar con el valor de las propiedades de un checkbox o de un radio button se trabaja de manera distinta que con text y password. Aquí veremos primero, la sintaxis básica para conocer estos valores, y luego los aplicaremos a algunos ejemplos. 13.1.1 Valor de value form.nombre_del_grupo[index].value Ejemplo: form.grupo1[0].value 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 aplicación II: trabajando con el valor de las propiedades Como habrán podido observar en los ejemplos anteriores, seguramente notaron que para poder trabajar con un checkbox o un radio en forma particular, si pertenecen al mismo grupo, debe usarse el index. Por eso, decía anteriormente que conocer el valor de value es poco útil, a excepción que se necesite escribir ese valor en un campo de texto. Pero los ejemplos "combinados" entre distintos objetos los dejaremos para más adelante. Nos limitaremos ahora, a estos dos objetos. Información del valor de todas las propiedades
El Script... <script languaje="javascript">
function informar(form) { nombreCasilla = form.colores[0].name valorCasilla = form.colores[0].value valorDisabled = "" valorChecked = "" valorLength = form.colores.length // definición de valorDisabled if (form.colores[0].disabled == true) { valorDisabled = "está deshabilitada"; } else { valorDisabled = "está habilitada"; } // definición de valorChecked if (form.colores[0].checked == true) { valorChecked = "está seleccionada"; } else { valorChecked = "no está seleccionada"; } nombreCasillaStr = "El nombre de la primer casilla es: " + nombreCasilla valorCasillaStr = "El valor de la primer casilla es: " + valorCasilla valorDisabledStr = "La primer casilla " + valorDisabled valorCheckedStr = "Esta casilla " + valorChecked valorLengthStr = "La cantidad total de casillas es: " + valorLength // escribimos el mensaje de alerta strAlerta = nombreCasillaStr + "\n" + valorCasillaStr + "\n" + valorDisabledStr + "\n" + valorCheckedStr + "\n\n" + valorLengthStr // lanzamos la acción alert(strAlerta); } El formulario... Los resultados... Colores: Verde Azul Rojo 13.3 Ejemplos de aplicación III: trabajando con propiedad checked Lanzar una acción si un checkbox no se ha marcado Aceptar los términos de un contrato antes de suscribir el formulario
El Script...
<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() } El formulario... 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 Por Eugenia Bahit Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
14.1 Propiedades básicas El objeto textarea en principio recibe el mismo tratamiento que que el objeto text con algunas pocas diferencias. Tanto las propiedades, como los métodos y eventos son los mismos, solo se agregan los siguientes: propiedad
descripción
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
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ón Los ejemplos de aplicación dados en los capítulos 7.1, 8.1, 9.1 y 10.1 correspondientes a los objetos text y password son perfectamente aplicables a este objeto. Bastará con solo reemplazar el nombre de los campos de texto (text) por los nombres del textarea.
Sintaxis, propiedades y eventos principales asociados a estos elementos de formulario. Por Eugenia Bahit Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
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 Muestra (selección múltiple): Texto de opción 1 Texto de opción 2 Texto de opción 3 manteniendo apretada la tecla Ctrl (control) puede seleccionarse más de una opción
Muestra (selección simple): Texto de opción 1 Texto de opción 2 Texto de opción 3 valor de size "3" Texto de opción 2
valor de size "1" solo puede seleccionarse una opción en cualquiera de los dos casos
15.3 SELECT: Métodos del objeto
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
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 eventos El objeto option no posee métodos ni eventos propios. 15.7 Sintaxis básica general: llamando a las propiedades En la siguiente lista veremos la forma correcta de llamar a cada propiedad en ambos objetos. PROPIEDAD
OBJET SINTAXIS O
name
SELEC T
nombre_formulario.nombre_select.name
size
SELEC T
nombre_formulario.nombre_select.size nombre_formulario.nombre_select.options[index] se refiere a una opción específica
option
SELEC T
formulario.select.options[formulario.select.selectedIndex].prop iedad se refiere a la opción seleccionada por el usuario
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. Por Eugenia Bahit Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
16.1 Ejemplos de aplicación 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; } } El formulario... Los resultados... Enviar
Trabajando con el constructor new Option Mediante este ejemplo, se generarán distintas opciones en la segunda lista dependiendo de la opción elegida en la primera. El Script... <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; } } El formulario... Los resultados... Enviar
Validar un select Como en los dos ejemplos anteriores, vimos que existen opciones que tienen un valor nulo (value=""). Se supone que ese tipo de opciones, no debe ser enviada en un formulario, ya que no tienen ese valor. Este ejemplo, verificará que la opción elegida, sea una opción válida. El script... <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(); } El formulario... Los resultados...
Modificar la propiedad text de un option Por algún motivo, puede resultar interesante modificar el texto de un option. Aquí veremos un ejemplo de como hacerlo. El Script... <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"; } }
El formulario... Los resultados... Enviar
Lista de propiedades y eventos asociados. Por Eugenia Bahit Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
17.1 Principales propiedades propiedad descripción 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
onFocus
Permite realizar una acción al poner el foco en el campo. Es un evento bastante molesto, porque en realidad, actúa en forma similar al evento onClick, bloqueando el campo.
onBlur
Permite realizar una acción cuando el foco ya no se encuentra en el campo. Tal vez, es un poco más útil que el anterior, ya que solo podría lanzarse una acción, en caso que el campo se encuentre vacío.
Cómo validar un formulario en una página web, en el lado del cliente con Javascript. Se comprueban todos sus campos y si son correctos, se envía el formulario. Por Miguel Angel Alvarez Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
Vamos realizar un ejemplo de un formulario completo para validar. Las validaciones se hacen en el propio navegador antes de enviarlo. Si hubo algún campo no relleno o con información errónea, el formulario muestra el campo que está incorrecto y solicita al usuario que lo cambie. Si todos los datos del formulario son correctos se envía el formulario. Hemos querido hacer un formulario sencillo, para que el ejercicio no se haga demasiado complicado. No obstante, se realizan validaciones en campos con distintos valores, para hacerlo más variado. Se comprueba un campo donde debe figurar un texto, otro donde debe introducirse un número mayor que 18 y un último con un campo select donde deben haber seleccionado un valor.
Referencia: para comprender este ejercicio hace falta conocer el trabajo con formularios con Javascript. Podemos aprender también Javascript desde cero http://www.desarrolloweb.com/javascript/, si es que fuera necesario. Se puede ver el ejemplo en funcionamiento para hacerse una idea más exacta del objetivo buscado. El código del formulario El formulario con el que vamos a trabajar es el siguiente: Es un formulario cualquiera. Los únicos puntos donde debemos prestar atención son:
El nombre del formulario, "fvalida", que utilizaremos para referirnos al él mediante Javascript. El botón de enviar, que en lugar de ser un submit corriente, es un botón que llama a una función, que se encarga de validar el formulario y enviarlo si todo fue correcto.
Función Javascript para validar el formulario Ahora veremos la función que hemos creado para validar el formulario. Se llama valida_envia(). Simplemente, para cada campo del formulario, comprueba que el valor introducido es correcto. Si no es correcto, muestra un mensaje de alerta, pone el foco de la aplicación en el campo que ha dado el error y abandona la función retornando el valor 0. Si todos los campos eran correctos, la función continúa hasta el final, sin salirse, por no estar ningún campo incorrecto. Entonces ejecuta la sentencia última, que es el envío del formulario. Veamos la función entera, aunque luego la expliquemos por partes. function valida_envia(){ //valido el nombre if (document.fvalida.nombre.value.length==0){ alert("Tiene que escribir su nombre") document.fvalida.nombre.focus() return 0; } //valido la edad. tiene que ser entero mayor que 18 edad = document.fvalida.edad.value edad = validarEntero(edad) document.fvalida.edad.value=edad if (edad==""){ alert("Tiene que introducir un número entero en su edad.") document.fvalida.edad.focus() return 0; }else{ if (edad<18){ alert("Debe ser mayor de 18 años.") document.fvalida.edad.focus() return 0; } } //valido el interés if (document.fvalida.interes.selectedIndex==0){ alert("Debe seleccionar un motivo de su contacto.") document.fvalida.interes.focus() return 0; } //el formulario se envia alert("Muchas gracias por enviar el formulario"); document.fvalida.submit();
} En el primer bloque se valida el campo nombre. La validación que se hace es simplemente si se ha escrito algo en el campo. Para ello comprueba si el número de caracteres escritos en el campo nombre es cero. En ese caso, muestra el mensaje de alerta, sitúa el foco en el campo de texto y se sale de la función devolviendo el valor 0. Nota: el foco de la aplicación es el lugar donde está situado el cursor. El foco puede estar en cualquier sitio. Por ejemplo en un campo de texto, en un select, en un enlace o en la propia página. Si presionamos una tecla del teclado afecta al lugar donde está situado el foco. Si, por ejemplo, el foco está en un campo de texto, al operar con el teclado estaremos escribiendo en ese campo de texto. La validación de la edad mayor que 18 años tiene dos partes. Primero debemos comprobar que en el campo de texto hay escrito un valor entero. Luego, si teníamos un entero, habría que comprobar que es mayor que 18. Para hacer esta validación nos vamos a apoyar en una función que ya hemos visto en otro artículo de DesarrolloWeb.com, que habla sobre cómo validar un entero en un campo de formulario. Esa función devuelve un string vació en caso de que no sea un entero y el propio entero, si es que lo era. Antes de realizar la validación de la edad propiamente dicha, se obtiene el valor introducido en el campo de formulario edad y se guarda en una variable llamada edad. Luego se ejecuta la función pasando esta edad. Su resultado lo utilizamos para volcarlo otra vez al campo de texto. Entonces, se comprueba si el valor devuelto por la función es un string vacío. En ese caso, es que el valor escrito en el formulario no era un entero, por lo que se muestra el mensaje de error, se sitúa el foco y se sale de la función. En caso de que el campo edad contuviese un entero, se debe comprobar a continuación si es mayor que 18. En caso de que sea menor, se muestra el error y se sale. En caso contrario entonces el valor sería mayor o igual que 18-, se continúa con las comprobaciones. Por último se valida el campo select, donde aparece el interés del supuesto visitante, que le motiva para enviarnos el formulario. En ese campo se debe haber seleccionado cualquier opción menos la primera. Para asegurarnos, simplemente se comprueba si el atributo selectedIndex del campo select tiene el valor 0. Ese atributo almacena el índice seleccionado en el menú desplegable. El primer campo tiene el índice 0, el segundo el índice 1... Si se comprueba que selectedIndex vale 0, se muestra un mensaje de alerta, se pone el foco en el campo del formulario y se sale de la función. Si hemos llegado hasta este punto sin salirnos de la función es que todos los campos del formulario estaban rellenos correctamente. En ese caso se debe enviar el formulario. Antes de enviar el formulario se muestra un mensaje de alerta, agradeciendo que se haya rellenado correctamente. Este mensaje se puede suprimir si se desea.
Para enviar el formulario se hace una llamada al método submit() de dicho formulario. Conclusión Este ejercicio es de lo más básico y útil que se puede hacer en Javascript. Requiere ciertos conocimientos, ya ligeramente avanzados, pero en el fondo no resulta complicado. Incluso ampliarlo es bastante sencillo, siempre que sigamos un esquema similar para cada uno de los campos. Podemos ver el resultado obtenido en una página aparte. Realizamos función de Javascript para que se puedan seleccionar todos los checkbox o cajas de selección de un formulario a la vez, pulsando un solo enlace. Hacemos también la función para deseleccionar todos los elementos a la vez. Por Miguel Angel Alvarez Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
El ejercicio que vamos a relatar en este artículo es bastante típico de trabajo con formularios en Javascript. Se trata de hacer un enlace para que se puedan marcar todos los campos checkbox que haya en un formulario de una sola vez, es decir, sin tener que pulsarlos uno a uno para marcarlos todos. También haremos la función que permita deseleccionar todos los campos checkbox del formulario de una sola vez. El ejercicio es simple de entender, pero podemos verlo en funcionamiento en una página aparte para hacernos una idea exacta de nuestras intenciones. El formulario HTML Tenemos un formulario creado con HTML que es donde estarán los checkboxes que hay que marcar y desmarcar automáticamente. El formulario es muy sencillo. Lo vemos a continuación. Lo único que debemos fijarnos es que hemos colocado diversos tipos de elementos en el formulario. En realidad sólo vamos a trabajar con el estado de los checkbox, pero hemos incluido otros elementos porque lo habitual en un formulario es que hayan elementos de varios tipos. Al final del formulario tenemos un par de enlaces para marcar o desmarcar todos los checkboxes de una sola vez. Estos enlaces llaman a un par de funciones Javascript que veremos ahora. Funciones de Javascript function seleccionar_todo(){ for (i=0;i
Un ejemplo sobre como se puede enviar un formulario por POST al pulsar un enlace, utilizando Javascript Por Miguel Angel Alvarez Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
El objetivo de este artículo es enviar unos datos por post a una página web utilizando Javascript. En realidad lo que vamos a hacer es enviar un formulario al pulsar un enlace de una página web. El formulario no se verá en la página, lo único que veremos es un enlace y al hacer clic, con javascript haremos que ese formulario se envíe, con lo que se mandarán los datos del formulario por POST a la página de destino del formulario. El ejemplo es sencillo. Requiere de tres partes, el formulario, la función javascript para enviarlo y el enlace que se debe hacer clic para que se realice el envío. El formulario con los datos a enviar por POST Lo más cómodo 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 página a la que queremos enviar los datos y el método de envío POST. Como no queremos que se vea el formulario, sólo queremos enviar sus datos por POST, todos los campos del formulario son hidden, es decir, ocultos. Función Javascript para enviar un formulario La segunda parte es una función Javascript que ejecutaremos para enviar el formulario. Hace uso del método submit() asociado a los formularios. <script> function enviar_formulario(){ document.formulario1.submit() } Si nos fijamos, la función 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 Enviar formulario Veremos varios ejemplos de scripts JavaScript aplicables a formularios que aumentarán la funcionalidad de éste. Por Eugenia Bahit Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
1. Colocar el foco en un determinado campo al cargar la página
Escribe tu nombre:
Enviar
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; }
Escribe tu nombre:
Enviar
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)) {
Escribe tu nombre: 4. Escribe un valor indicado en otra ventana, en el formulario abierto
Formulario de la página actual Paleta de colores (paleta.htm)
Por favor, introduce el código correspondiente al color Código color:
Ver Paleta
Enviar
5. Comprueba que el valor ingresado en dos campos no sea el mismo <script languaje="javascritp"> function validarCampos1(form) { if(form.campo1.value == form.campo2.value) { alert("La contraseña no puede ser igual al nombre de usuario"); form.campo2.value = ""; form.campo2.focus(); return true; } form.submit() }
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; } }
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; } }
Por favor, seleccione 3 opciones como máximo: Opción 1 Opción 2 Opción 3 Opción 4 Opción 5 Enviar
8. Selecciona todos los checkbox con un solo click o los deselecciona <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; }
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; }
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") }
method="GET" action="pagina.htm" target="_blank"> name="casilla1" value="Rojo">Rojo name="casilla1" value="Azul">Azul name="casilla1" value="Amarillo">Amarillo
Verde
Rojo Azul Amarillo Verde
6 casos más de uso de rutinas con formularios. Por Eugenia Bahit Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
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"); } }
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 }
Por favor, redacte aquí su mensaje Palabras escritas:
0
Enviar
13. Muestra o esconde el botón "submit" Esconde el botón submit si los campos están vacíos <script languaje="javascript"> function esconde(form) { if ((form.nombre.value != "") && (form.apellido.value != "")) { form.enviar.style.visibility = "visible"; } else { form.enviar.style.visibility = "hidden"; } }
Nombre: Apellido: Enviar
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; } }
Nombre: Apellido: Enviar
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'; }
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'; }
Nombre: Apellido:
Hacemos un script Javascript para controlar que un textarea de un formulario tenga más 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 Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
Este script de Javascript es bastante utilizado en muchos sitios web. Se trata de controlar el tamaño 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, dinámicamente en el lado del cliente, de modo que cuando el usuario llega a la longitud permitida, no se permite escribir más contenido en el campo textarea. Veamos el ejemplo en marcha para hacernos una idea exacta del objetivo de este artículo. El ejemplo es sencillo. Simplemente vamos a definir un número 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 número de caracteres que puede contener el textarea, no se deja escribir más texto en el campo del formulario. Eso lo conseguiremos colocando el texto que había antes de que se escribiese ese carácter 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. Además, cuando se llegue al límite 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 sería bueno leer: Contar caracteres escritos en un textarea El ejercicio tiene dos partes, el script Javascript y el formulario HTML. Empecemos viendo el formulario: No tiene ninguna complicación. Pero hay que prestar atención 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 función 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 } 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 vacía, porque el textarea suponemos que está vacío.
Tenemos también una variable num_caracteres_permitidos, que almacena el número de caracteres que se permite escribir en el textarea. En este caso lo hemos definido como 10. Ahora nos metemos con la función 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 más 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 tamaño permitido. Si lo escrito en el textarea es mayor que lo permitido, se trata de una situación que no se puede aprobar. Entonces simplemente escribimos en el textarea lo que hay en la variable contenido_textarea, que era lo que había antes y que estaba validado en longitud correctamente. Eso es todo, es sencillo! Pero ahora vamos a hacer una pequeña mejora para que cuando el textarea llegue a la longitud máxima 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 número 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 número de caracteres escritos. Con style.color se puede modificar la propiedad de estilo CSS que define el color del texto del campo. Si se había llegado a los caracteres permitidos, se pone color rojo, en caso contrario, se pone color negro. Por último hacemos una llamada a la función cuenta(), que ya habíamos creado en el artículo anterior:
function cuenta(){ document.forms[0].caracteres.value=document.forms[0].texto.value.length } Esta función simplemente actualiza el campo de texto, colocando el número 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 Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
Esto puede ser útil para campos que sólo admitar números o letras. Por ejemplo, vamos a hacer que en un campo de texto de un formulario sólo se permitan meter números decimales del tipo 9999.99: Necesitamos una función 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; } /* Sólo puede teclear el número 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 página con el formulario y la caja de texto. Tendremos que llamar a la función "fieldNumber" en el evento onkeypress: Si tenéis algun problema no dudéis en consultármelo mandándome un mail a [email protected]
Veremos varios ejemplos de scripts JavaScript aplicables a formularios que aumentarán la funcionalidad de éste. Por Eugenia Bahit Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
1. Colocar el foco en un determinado campo al cargar la página
Escribe tu nombre:
Enviar
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; }
Escribe tu nombre:
Enviar
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; }
Escribe tu nombre:
4. Escribe un valor indicado en otra ventana, en el formulario abierto
Formulario de la página actual Paleta de colores (paleta.htm)
Por favor, introduce el código correspondiente al color Código color:
Ver Paleta
Enviar
5. Comprueba que el valor ingresado en dos campos no sea el mismo <script languaje="javascritp"> function validarCampos1(form) { if(form.campo1.value == form.campo2.value) { alert("La contraseña no puede ser igual al nombre de usuario"); form.campo2.value = ""; form.campo2.focus(); return true; } form.submit() }
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; } }
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; } }
Por favor, seleccione 3 opciones como máximo: Opción 1
Opción 2 Opción 3 Opción 4 Opción 5 Enviar
8. Selecciona todos los checkbox con un solo click o los deselecciona <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; }
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") }
Rojo Azul Amarillo Verde
6 casos más de uso de rutinas con formularios. Por Eugenia Bahit Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
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"); } }
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 }
Por favor, redacte aquí su mensaje Palabras escritas:
0
Enviar
13. Muestra o esconde el botón "submit" Esconde el botón submit si los campos están vacíos <script languaje="javascript"> function esconde(form) { if ((form.nombre.value != "") && (form.apellido.value != "")) { form.enviar.style.visibility = "visible"; } else { form.enviar.style.visibility = "hidden"; } }
Nombre: Apellido: Enviar
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; } }
Nombre: Apellido: Enviar
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'; }
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'; }
