Sub-propiedades del objeto form y eventos

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

2.1 Sub-propiedades del objeto form


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

 

sub-propiedad descripción

index

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

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

 

2.1.1 Sintaxis básica

 

document.forms[index]

donde index es el número correspondiente al formulario: document.forms[0] indica el primer formulario y

 

document.forms.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 primer formulario es: ' +  document.forms[0].name)">

 

Los resultados...

Presiona el botón para saber el nombre del primer formulario:


2.3 Los eventos que admite el objeto form


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

En la siguiente lista veremos los más utilizados:

 

evento descripción

onSubmit

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

onReset

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

 

2.3.1 Sintaxis básica

 

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

 

2.4 Ejemplos de aplicación


Aquí veremos un ejemplo en el que se enviará un mensaje de alerta al usuario cuando envía el formulario o cuando lo restablece.

El código...

<form name="formulario" method="post" action="ejemplos/procesar.asp" target="_blank" onSubmit="alert('Se enviará el formulario')" onReset="alert('Se borrarán todos los datos insertados')">

Escribe tu nombre: <input type="text" name="nombre"><br>

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

<input type="reset" value="Borrar">

</form>

 

Los resultados....

Escribe tu nombre:

Autor

Eugenia Bahit

Analista Programadora LAMP y Scrum Coach

Compartir

Comentarios

Victor

03/3/2008
para saber el numero de campos de un formulario

podemos hacer document.forms[index].lenght

donde index es el indice del formulario

Sergio Valle Morales

07/6/2009
Agradecimiento
Vaya, te esmeraste creando este manual, no sabes como me ha ayudado, gracias.

Agusalc

17/9/2013
Problemas con el acceso a objetos
La verdad es que estoy teniendo muchos problemas con el acceso a objetos, asi que probe a copiar el código fuente de la página, para verificar mediante una ventana de alert, el ejemplo 2.2 que infoma de que 3 son los fomularios para ello he añadido en el codigo fuente, entre la ultima </script> y <meta>, lo siguiente:

<script type="text/javascript">

alert("Hay" + document.forms.length + " formularios en esta página");

</script>

es decir, el mismo codigo que en el ejemplo 2.2, document.forms.length, el mensaje que me muestra en la ventana de alert es 0, y en el input del 2.2 es de 3, como es posible?