Formularios Javascript

71
 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 a l enviar y/ o restab lecer un formular io  3. Valores de la propiedad action 3.1 Ejemplos de aplicación  

Transcript of Formularios Javascript

Page 1: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 1/71

 

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 

Page 2: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 2/71

 

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 

Page 3: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 3/71

 

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 

Page 4: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 4/71

 

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 radiobuttons. 

Habilitar o deshabilitar un grupo de checkbox según el valor de la propiedadchecked 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 value13.1.2 Valor de name13.1.3 Valor de disabled13.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 

Page 5: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 5/71

 

Aceptar los términos de un contrato antes de suscribir el formulario (realiza unaacció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 

Page 6: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 6/71

 

 

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 

Page 7: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 7/71

 

 

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 

Page 8: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 8/71

 

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 ypropiedades 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 mismosucede 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 alformulario 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 losformularios 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 ejemplosy 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 enviarpocos datos.POST = envía los datos en forma "invisible". Conveniente para enviaruna gran cantidad de datos.

target 

define la ventana o marco (frame) en la que se mostrarán o procesaránlos 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 

Page 9: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 9/71

 

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  yreset .

Method POST 

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

El resultado... 

Escribe tu nombre:

enviar formulario borrar

 

Method GET 

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

El resultado... 

Escribe tu nombre:

enviar formulario borrar  

Page 10: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 10/71

 

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:

 

sub-propiedad 

descripción 

index es un array que contiene todos los formularios de una página, donde el primerformulario 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:<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 primerformulario 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 crearmá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 seamediante el botón submit o mediante una función JavaScript que llame al métodosubmit() 

Page 11: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 11/71

 

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

Enviar Borrar 

Page 12: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 12/71

 

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 laspreferencias del usuario.

El ejemplo más típico sería el de un formulario de suscripción a un boletín de novedades, dondeel 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 unejemplo:

Duplicando el valor de la propiedad action 

Page 13: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 13/71

 

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

Page 14: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 14/71

 

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 verdaderosentido. 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 ytarget .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... 

Escribe tu nombre:

Método POST | Método GET

4.2 Sobre la propiedad Target  

Page 15: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 15/71

 

De igual forma que en el anterior ejemplo, veremos un caso en el que el usuario seleccionará eltarget en el cual desea visualizar los resultados enviados por el formulario.

El Script... <script languaje="javascript">function CambiaTarget() {

if (form2. blank.checked == true){form2.target ="_blank";}

if (form2.self.checked == true){form2.target = "_self";}

form2.submit()}</script>

El formulario... <form name="form2" method="post" action="ejemplos/procesar.asp" target="_blank">Escribe tu nombre: <input type="text" name="nombre"><br><input type="checkbox" name="blank" value="ON">Resultados en nueva ventana |<input type="checkbox" name="self" value="ON">en la misma ventana<br><input type="button" value="Enviar" onClick="CambiaTarget(this.form)"></form>

Los resultados... 

Escribe tu nombre:

Resultados en nueva ventana | en la misma ventana

Los objetos de un formulario (objetos del objeto form) son los "campos" de un formulario.Por Eugenia Bahit 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 lasiguiente tabla, podremos apreciar los tipos de objetos con su correspondiente descripción:

 

objeto  descripción  ejemplo 

text es un campo de texto en el que los datos en élintroducidos son visibles para el usuario.

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

 

password 

un campo de texto idéntico a text con la diferencia

que los datos en él introducidos, no pueden servisualizados por el usuario, sino que son

mostrados con asteriscos *

Page 16: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 16/71

 

 Sintaxis: 

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

hidden 

es un campo de texto oculto con un valorpreestablecido y que el usuario no podrá visualizar

en ningún momento.Sintaxis: 

 <input type="hidden" name=".." value="..">

textarea 

es un campo de texto similar en su tratamiento a

text pero lo que en él varía es su apariencia, ya que

puede tener un alto y ancho determinado, barrasde scroll para navegar por su interior y admite

saltos de línea.

Sintaxis:  <textarea rows=".."cols="..">....texto... </textarea>  

radio 

es un botón circular que permite elegir al usuariouna opción de entre varias pertenecientes a un

mismo grupo.

Sintaxis:  <input type="radio" name=".." value="..">

checkbox 

es una casilla de verificación que permite alusuario seleccionar más de una opción entre

varias. Similar a radio pero con esta ventaja.

Sintaxis:  <input type="checkbox" name=".." value="..">

option 

es una lista desplegable de varias opciones. Puede

permitir la selección de una sola opción o demúltiples opciones (si se mantiene presionada la

tecla Crtl durante dicha selección).opcion1

opcion2  

Sintaxis:  <select name=".."  multiple><option value="..">texto1</option><option value="..">texto2</option>

 </select>  

file campo compuesto que permite examinar el discoduro para subir ficheros al servidor.

Sintaxis:  <input type="file" name="..." size="5">

submit es un tipo de botón que se encarga de enviar el

formulario.Enviar

 

Sintaxis:  <input type="submit" value="..">

Page 17: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 17/71

 

reset es un tipo de botón que se encarga de restablecer

el formulario a sus valores por defecto.Borrar

 

Sintaxis:  <input type="reset" value="..">

button es un tipo de botón al que se le pueden asignarmúltiples funciones mediante eventos.

Sintaxis:  <input type="button" value="..">

image es una imagen que actúa como botón (reset, button

o submit )

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

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

length y maxlength.Por Eugenia Bahit 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 nombreno puede estar duplicado dentro del formulario.

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

disabled 

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

ReadOnly convierte al campo en un área de "solo lectura". A diferencia dedisabled esta propiedad, no bloquea el campo, sino que simplementeno permite modificar su contenido.

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

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">

Page 18: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 18/71

 

 [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 encuentraen el campo.

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

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 elcampo.

Page 19: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 19/71

 

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 muyrestringido ya que dependen del fin que se le quiera aplicar. Por

lo general, son bastante molestos puesto que el usuario puedepasar 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 lafunció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 losvalores 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 elcampo, el valor "desaparece".

El código... 

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

Los resultados... 

 

Nombre de usuar 

Password:******

 

EJEMPLO #2:

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

El Script... 

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

El formulrio... 

Page 20: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 20/71

 

<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 conla 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 completarautomáticamente los campos, le avise al usuario que debe completarlos para poder enviar elformulario. Esto podremos hacerlo avisando al usuario campo por campo o enviándole un avisoen general:

EJEMPLO #4: VALIDAR CAMPOS (forma 1) 

Page 21: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 21/71

 

El Script... 

<script languaje="javascript">function validar(form){var error = "Por favor, antes de enviar el formulario,\ncomplete los siguientescampos:\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()}

Page 22: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 22/71

 

</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 datosintroducidos en distinto campos de texto y transferimos todos los valores a un solo campo. Esideal, por ejemplo, cuando recopilamos información sobre el domicilio de una persona o por queno, 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">

Page 23: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 23/71

 

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" ReadOnlyonFocus="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 ohaciendo click en el campo). 

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

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; }

}</script>

El formulario... 

Page 24: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 24/71

 

 <form name="login" method="POST" action="pagina_de_login.asp" target="_blank">Usuario: <input type="text" name="usuario" size="10" onKeyUp="bloqDesbloq()"><br>Clave: <input type="password" name="clave" size="10" disabled></form>

Los resultados... 

Usuario:

Clave:

8.2 Ejemplos de aplicación III: Trabajando con la propiedad size 

No son muy frecuentes los cambios o el provecho que se le puede sacar al valor de la propiedadsize, 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"; }

}</script>

El formulario... 

<form name="ejemplo9">Campo 1: <input type="text" name="campo1" size="6" onKeyUp="aumentarSize()"></form>

Los resultados...

Campo 1:

Utilización de la propiedad length, aplicada a varios ejemplosPor 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, podremoslimitar 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">

Page 25: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 25/71

 

function validarCampo1(form) {

if (form.palabra1.value.length < 6){alert('Debes introducir una palabra con un mínimo de 6 caracteres');form.palabra1.focus(); return true;}

}</script>

El formulario... 

<form name="form1" method="post">Mínimo 6 caracteres: <input type="text" name="palabra1"><input type="button" onClick="validarCampo1(this.form)" value="Enviar"></form>

El resultado... 

Mínimo 6 caracteres:

2. LÍMITE MÁXIMO DE CARACTERES 

El script... 

<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;}

}</script>

 El formulario... 

<form name="form2" method="post">Máximo 6 caracteres: <input type="text" name="palabra1"><input type="button" onClick="validarCampo2(this.form)" value="Enviar"></form>

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)

Page 26: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 26/71

 

{alert('Debes introducir una palabra de 6 caracteres');form.palabra1.focus(); return true;}

}</script>

El formulario... <form name="form3" method="post">Introduce solo 6 caracteres: <input type="text" name="palabra1"><input type="button" onClick="validarCampo3(this.form)" value="Enviar"></form>

Los resultados... 

Introduce solo 6 caracteres:

4. 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, sinoque además se lo informe de la cantidad de caracteres que ha escrito, el exceso o restode caracteres producidos.

Veamos los siguientes ejemplos basados en una amplitud máxima de 50 caracteres en el primercaso y una longitud absoluta de 12 caracteres en el segundo:CANTIDAD DE CARACTERES ESCRITOS Y CARACTERES RESTANTES 

El Script... 

Page 27: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 27/71

 

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

Restantes:50

 

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">

Page 28: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 28/71

 

Escribir solo 12 caracteres: <input type="text" name="campo" size="12"><br><input type="button" value="Enviar" onClick="validarCampo5(this.form)"></form>

Los resultados... 

Escribir solo 12 caracteres:

Ejemplos de uso de las funciones toUpperCase y toLowerCase.Por Eugenia Bahit 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 nosdetendremos 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 cambio 

Page 29: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 29/71

 

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 detexto. Por ejemplo, podremos mantener durante todos los formularios de distintas páginas, elnombre del usuario:

<input type="hidden" name="usuario" value="Carlitos_2003">

Pero el valor (value) estará siempre impuesto por defecto.

Propiedades, eventos y ejemplos de estos objetos contenidos en formularios.Por Eugenia Bahit 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 . Paraque éstos últimos conserven la capacidad de selección única, deben tener todosel 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 mismoname distintos valores. Pero si se quieres acceder a las propiedades de cadacheckbox separadamente mediante JavaScript, es mejor utilizar un name  diferente para cada checkbox , ya que de lo contrario (si todos tienen el mismoname ) la propiedad value resulta poco útil.

En el caso de los radio buttons es una propiedad necesaria siempre al tenertodos el mismo name , aunque para su acceso mediante JavaScript, estapropiedad 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 propiedadbooleana (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 elmismo name .

index

array que contiene todos los radio  buttons que hay en un grupo con el mismonombre. Para un grupo de 5 radio  buttons con mismo nombre y diferente valorcada 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.

Page 30: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 30/71

 

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)

<input type="radio" name="color"  value="rojo"><input type="radio" name="color"  value=" verde">

Para un grupo de checkbox (mismo nombre distinto valor)

<input type="checkbox" name="colores"  value="rojo"><input type="checkbox" name="colores"  value=" verde">

12.3 Ejemplos de aplicación I: Trabajando con la propiedad disabled  Ejemplo #1 En este caso se habilitarán o deshabilitarán los checkbox dependiendo de la opción que seleccione el usuariode 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.

Page 31: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 31/71

 

 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 deotro 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 yCultura<br><input type="checkbox" name="intereses" value="Ciencia">Ciencia<br><input type="checkbox" name="intereses" value="Música">Música<br></form>

Los resultados... 

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

Seleccione los temas de su interés:

Arte y Cultura

Ciencia

Música

Page 32: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 32/71

 

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 maneradistinta 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 propiedades Como habrán podido observar en los ejemplos anteriores, seguramente notaron que para poder trabajar conun 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 valoren un campo de texto. Pero los ejemplos "combinados" entre distintos objetos los dejaremos para másadelante. Nos limitaremos ahora, a estos dos objetos.Información del valor de todas las propiedades 

El Script... 

<script languaje="javascript">

Page 33: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 33/71

 

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 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... 

Page 34: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 34/71

 

 <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 desuscripció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 textPor 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 pocasdiferencias. Tanto las propiedades, como los métodos y eventos son los mismos, solo se agregan lossiguientes:

 

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 mismadefinición que para el objeto text . La única excepción está en size que es reemplazado por cols y rows (anchoy alto respectivamente).

La propiedad value obtiene una pequeña diferencia con la definición dada en text por sobre todo en susintáxis. Veamos su sintaxis básica:

14.2 Sintaxis básica 

Page 35: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 35/71

 

 <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ó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 ypassword son perfectamente aplicables a este objeto. Bastará con solo reemplazar el nombre de los camposde 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 

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

 

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 2Texto 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 

Page 36: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 36/71

 

 

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 unselect y tambien comienza por 0.

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

15.6 OPTION: Métodos y eventos El objeto option no posee métodos ni eventos propios.

15.7 Sintaxis básica general: llamando a las propiedades En la siguiente lista veremos la forma correcta de llamar a cada propiedad en ambos objetos.

 

PROPIEDAD OBJETO 

SINTAXIS 

name SELECT

nombre_formulario.nombre_select.name

size SELECT

nombre_formulario.nombre_select.size

option SELECT

nombre_formulario.nombre_select.options[index]se refiere a una opción específica 

formulario.select.options[formulario.select.selectedIndex]. propiedad  se refiere a la opción seleccionada por el usuario 

disabled  SELECT nombre_formulario.nombre_select.disabled = true/false 

multiple SELECT

nombre_formulario.nombre_select.multiple = true/false 

type SELECT

nombre_formulario.nombre_select.type

value OPTIONnombre_formulario.nombre_select.options[index].valuese refiere a una opción específica 

Page 37: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 37/71

 

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 OPTIONnombre_formulario.nombre_select.options[index].selected =true/false 

selectedIndex 

OPTIONformulario.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 lasiguiente:

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 esteobjeto.

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, deotra 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>

Page 38: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 38/71

 

</select>

<select name="cantidad" disabled><option value="">[cantidad]</option><option value="5">5 unidades</option><option value="10">10 unidades</option><option value="15">15 unidades</option>

</select>

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

Los resultados... 

Enviar 

Trabajando con el constructor new Option  Mediante este ejemplo, se generarán distintas opciones en la segunda lista dependiendo de la opción elegidaen 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>

Page 39: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 39/71

 

<select name="estilo"><option value=""><-- esperando selección</option></select>

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

Los resultados... 

Enviar 

Validar un select  Como en los dos ejemplos anteriores, vimos que existen opciones que tienen un valor nulo (value="" ). Sesupone que ese tipo de opciones, no debe ser enviada en un formulario, ya que no tienen ese valor. Esteejemplo, 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 option  Por algún motivo, puede resultar interesante modificar el texto de un option. Aquí veremos un ejemplo decomo 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>

Page 40: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 40/71

 

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... 

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 eventobastante 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 unaacció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. Secomprueban 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 coninformació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 elformulario.

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, parahacerlo 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 haberseleccionado un valor.

Page 41: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 41/71

 

Referencia: para comprender este ejercicio hace falta conocer el trabajo conformularios 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:

<form name="fvalida">

<table><tr>

<td>Nombre: </td><td><input type="text" name="nombre" size="30" maxlength="100"></td>

</tr><tr>

<td>Edad: </td><td><input type="text" name="edad" size="3" maxlength="2"></td>

</tr><tr>

<td>Interés:</td><td>

<select name=interes><option value="Elegir">Elegir

<option value="Comercial">Contacto comercial

<option value="Clientes">Atención al cliente<option value="Proveedores">Contacto de proveedores</select>

</td></tr>

<tr><td colspan="2" align="center"><input type="button" value="Enviar"

onclick="valida_envia()"></td></tr>

</table></form>

Es un formulario cualquiera. Los únicos puntos donde debemos prestar atención son:

  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.

Page 42: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 42/71

 

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 valorintroducido 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 noestar 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 18edad = 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ésif (document.fvalida.interes.selectedIndex==0){

alert("Debe seleccionar un motivo de su contacto.")document.fvalida.interes.focus()

return 0;}

 //el formulario se enviaalert("Muchas gracias por enviar el formulario");

document.fvalida.submit();

Page 43: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 43/71

 

}

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 enel 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 focopuede 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 allugar 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 comprobarque 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ómovalidar un entero en un campo de formulario . Esa función devuelve un string vació en casode 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 ejecutala 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 esecaso, 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 esmayor 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 lemotiva para enviarnos el formulario. En ese campo se debe haber seleccionado cualquier

opción menos la primera. Para asegurarnos, simplemente se comprueba si el atributoselectedIndex 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 focoen 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 delformulario 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 hayarellenado correctamente. Este mensaje se puede suprimir si se desea.

Page 44: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 44/71

 

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. Inclusoampliarlo 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 ocajas 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 conformularios 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 quepulsarlos 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áginaaparte 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 acontinuación.

<form name="f1">

Nombre: <input type="text" name="nombre"><br>

<input type="checkbox" name="ch1"> Opcion 1<br>

<input type="checkbox" name="ch2"> Opcion 2<br>

<input type="checkbox" name="ch3"> Opcion 3<br>

<input type="checkbox" name="ch4"> Opcion 4<br>

 //Otro campo de formulario:<select name=otro>

<option value="1">Seleccion 1<option value="2">Seleccion 2

</select>

Page 45: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 45/71

 

<br>

<input type="submit"><br>

<br><a href="javascript:seleccionar_todo()">Marcar todos</a> |

<a href="javascript:deseleccionar_todo()">Marcar ninguno</a></form>

Lo único que debemos fijarnos es que hemos colocado diversos tipos de elementos en el

formulario. En realidad sólo vamos a trabajar con el estado de los checkbox, pero hemosincluido 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 loscheckboxes de una sola vez. Estos enlaces llaman a un par de funciones Javascript que

veremos ahora.

Funciones de Javascript 

function seleccionar_todo(){for (i=0;i<document.f1.elements.length;i++)

if(document.f1.elements[i].type == "checkbox")document.f1.elements[i].checked=1

}

La función seleccionar_todo() realiza un recorrido por todos los elementos del formulario.Para hacer un recorrido por todos los campos se utiliza el array "elements", que guarda una

referencia con cada elemento que haya dentro del formulario.

En el recorrido comprueba si el elemento actual es de tipo "checkbox" (recordar que elarray elements contiene todos los elementos, pero sólo deseamos operar con los que sean

checkbox) y en ese caso, simplemente se actualiza el atributo "checked" al valor 1, con loque el chekbox se marcará.

function deseleccionar_todo(){

for (i=0;i<document.f1.elements.length;i++)if(document.f1.elements[i].type == "checkbox")

document.f1.elements[i].checked=0}

La función deseleccionar_todo() es casi igual que la anterior. Realiza un recorrido a todos

los elementos y en el caso que sean checkbox, se fija a cero el atributo "checked" para quela caja de selección se quede desmarcada.

El ejemplo no tiene más misterio. Se puede ver en marcha en una página aparte. 

Page 46: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 46/71

 

Un ejemplo sobre como se puede enviar un formulario por POST al pulsar un enlace,

utilizando JavascriptPor 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 deuna página web. El formulario no se verá en la página, lo único que veremos es un enlace yal 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 paraenviarlo 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 laque queremos enviar los datos y el método de envío POST.

<form action="pagina_destino.php" method=post name="formulario1">

<input type="hidden" name="campo1" value="valor"><input type="hidden" name="campo2" value="otroValor">

</form>

Como no queremos que se vea el formulario, 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()}

</script>

Si nos fijamos, la función tiene una única sentencia que submite el formulario. Para ello seaccede primero al formulario por el nombre que le hemos dado en el atributo name de la

etiqueta <FORM> en el código HTML. El nombre del formulario era "formulario1". Así que esa instrucción hace un submit() del formulario1, que a su vez es una propiedad del

objeto document de la página.

Enlace para enviar los datos por POST 

Page 47: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 47/71

 

Ahora, el objetivo del artículo es enviar unos datos por post al hacer clic en un enlace. Así 

que simplemente, enviando el formulario haremos llegar esos datos por post al destino. Portanto, tenemos que construir un enlace que llame a la función javascript anterior.

<a href="javascript:enviar_formulario()">Enviar formulario</a>

Esto es muy sencillo. Simplemente se indica con javascript: que se debe ejecutar un código

 javascript al pulsar el enlace. El código javascript es una simple llamada a la funciónenviar_formulario().

El código completo de este ejemplo se puede ver aquí:

<html>

<head><title>Enviar formulario al pulsar un enlace</title>

<script>

function enviar_formulario(){document.formulario1.submit()}

</script></head>

<body>

<form action="pagina_destino.php" method=post name="formulario1"><input type="hidden" name="campo1" value="valor">

<input type="hidden" name="campo2" value="otroValor"></form>

<a href="javascript:enviar_formulario()">Enviar formulario</a>

</body></html>

Veremos varios ejemplos de scripts JavaScript aplicables a formularios que aumentarán lafuncionalidad 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 

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

 

Enviar 

Page 48: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 48/71

 

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

{

Page 49: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 49/71

 

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"><fontcolor="#800000">marrón</font><br>

Page 50: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 50/71

 

<input type="radio" name="color" value="#FF00FF"onClick="opener.document.ejemplo8.campo1.value=colores.color[1].value"><fontcolor="#FF00FF">fucsia</font><br><a href="javascript:window.close()"><b>x cerrar ventana</b></a></form>

Por favor, introduce el código correspondiente al colorCódigo color: Ver Paleta

Enviar 

5. Comprueba que el valor ingresado en dos campos no sea el mismo 

<script languaje="javascritp">function validarCampos1(form){

if(form.campo1.value == form.campo2.value){alert("La contraseña no puede ser igual al nombre de usuario");form.campo2.value = ""; form.campo2.focus(); return true;

}form.submit()}</script>

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

Usuario:

Contraseña:

6. Comprueba que el valor ingresado en dos campos sea igual  

<script languaje="javascritp">function validarCampos2(form){

if(form.campo2.value == form.campo1.value){ form.submit(); }else{alert("La repetición de la contraseña no coincide.");form.campo2.value = ""; form.campo2.focus(); return true;}

}</script>

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

Page 51: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 51/71

 

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

 

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;

Page 52: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 52/71

 

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

Enviar 

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;

}

Page 53: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 53/71

 

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)">Invertirselecció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

Enviar 

10. Cuenta la cantidad de checkbox o radio que hay seleccionados 

<script languaje="javascript">function ContarCasillas(form){var total = 0;var maximo = form.casilla1.length;

for(i = 0; i < maximo; i++)

if (form.casilla1[i].checked == true){ total +=1; }

alert("Se han seleccionado " + total + " opciones")}</script>

<form name="ejemplo14" 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>

Page 54: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 54/71

 

<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.

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");}

}</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">

Page 55: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 55/71

 

<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: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"; }

}</script>

<form name="ejemplo17" method="POST" action="pagina.htm" target="_blank">Nombre: <input type="text" name="nombre" size="20"onKeyUp="esconde(this.form)"><br>

Apellido: <input type="text" name="apellido" size="20"onKeyUp="esconde(this.form)"><br><input type="submit" name="enviar" value="Enviar" style="visibility: hidden"></form>

Nombre:

Apellido:

Enviar 

14. Habilita o deshabilita el 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>

Page 56: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 56/71

 

 <form name="ejemplo18" method="POST" action="pagina.htm" target="_blank">Nombre: <input type="text" name="nombre" size="20"onKeyUp="deshabilita(this.form)"><br>Apellido: <input type="text" name="apellido" size="20"onKeyUp="deshabilita(this.form)"><br><input type="submit" name="enviar" value="Enviar" disabled>

</form>

Nombre:

Apellido:

Enviar 

15. Mensaje de 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:

Page 57: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 57/71

 

 

Hacemos un script Javascript para controlar que un textarea de un formulario tenga máscaracteres 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 eltamañ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 quehay 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 loconseguiremos 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 sellegue al límite de caracteres permitidos se pondrá en rojo el campo de texto que cuenta loscaracteres 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:

<form action="#" method="post">

<table><tr>

<td>Texto:</td>

<td><textarea cols="40" rows="5" name="texto" onKeyDown="valida_longitud()"onKeyUp="valida_longitud()"></textarea></td>

</tr><tr>

<td>Caracteres:</td>

Page 58: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 58/71

 

<td><input type="text" name=caracteres size=4></td>

</tr></table>

</form>

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 seencargará de hacer todo el trabajo.

Veamos ahora el Javascript:

<script>contenido_textarea = ""

num_caracteres_permitidos = 10

function valida_longitud(){num_caracteres = document.forms[0].texto.value.length

if (num_caracteres > num_caracteres_permitidos){

document.forms[0].texto.value = contenido_textarea}else{

contenido_textarea = document.forms[0].texto.value}

if (num_caracteres >= num_caracteres_permitidos){

document.forms[0].caracteres.style.color="#ff0000";

}else{document.forms[0].caracteres.style.color="#000000";}

cuenta()

}function cuenta(){

document.forms[0].caracteres.value=document.forms[0].texto.value.length}

</script>

Primero se definen dos variables:

contenido_textarea = ""

num_caracteres_permitidos = 10

La variable contenido_textarea almacena el contenido del campo textarea. Al principio estáinicializada a la cadena vacía, porque el textarea suponemos que está vacío.

Page 59: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 59/71

 

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 averiguarla 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 sonmenores 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 todova 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 untamañ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 variablecontenido_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 eltextarea llegue a la longitud máxima permitida el campo de texto que lleva la cuenta de loscaracteres 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.colordel 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 delcampo. 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:

Page 60: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 60/71

 

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 detexto 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 permitanmeter 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;

Page 61: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 61/71

 

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:

<input type="text" name="txtImporte" onkeypress="fieldNumber(this)">

Si tenéis algun problema no dudéis en consultármelo mandándome un mail [email protected] 

Page 62: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 62/71

 

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 

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

 

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;}</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)">

Page 63: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 63/71

 

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

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;}</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:

Page 64: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 64/71

 

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"><fontcolor="#800000">marrón</font><br><input type="radio" name="color" value="#FF00FF"onClick="opener.document.ejemplo8.campo1.value=colores.color[1].value"><fontcolor="#FF00FF">fucsia</font><br><a href="javascript:window.close()"><b>x cerrar ventana</b></a>

</form>

Por favor, introduce el código correspondiente al color

Código color: Ver Paleta

 

Enviar 

5. Comprueba que el valor ingresado en dos campos no sea el mismo 

<script languaje="javascritp">function validarCampos1(form){

if(form.campo1.value == form.campo2.value){alert("La contraseña no puede ser igual al nombre de usuario");form.campo2.value = ""; form.campo2.focus(); return true;}

form.submit()}</script>

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

Usuario:

Contraseña:

6. Comprueba que el valor ingresado en dos campos sea igual  

<script languaje="javascritp">function validarCampos2(form){

Page 65: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 65/71

 

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

Page 66: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 66/71

 

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;

}</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 3Opción 4

Opción 5

Enviar 

9. Selecciona todos los checkbox con un solo click o los deselecciona o invierte la selección  

Page 67: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 67/71

 

<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)">Invertirselecció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

Enviar 

10. Cuenta la cantidad de checkbox o radio que hay seleccionados 

<script languaje="javascript">

Page 68: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 68/71

 

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.

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");

}}</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--;"

Page 69: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 69/71

 

validaCantidad(this.form)></form>

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

 

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: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"; }

}</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>

Page 70: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 70/71

 

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; }

}</script>

<form name="ejemplo18" method="POST" action="pagina.htm" target="_blank">

Nombre: <input type="text" name="nombre" size="20"onKeyUp="deshabilita(this.form)"><br>Apellido: <input type="text" name="apellido" size="20"onKeyUp="deshabilita(this.form)"><br><input type="submit" name="enviar" value="Enviar" disabled></form>

Nombre:

Apellido:

Enviar 

15. Mensaje de 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 

Page 71: Formularios Javascript

5/8/2018 Formularios Javascript - slidepdf.com

http://slidepdf.com/reader/full/formularios-javascript-559abfb3ba979 71/71

 

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