15 Feb

Form en javascript formas de selección objeto propiedades y métodos

Formas de selección del objeto Form.

Dentro de un documento tendremos varias formas de selección de un formulario.

Si partimos del siguiente ejemplo:
<div id=”menulateral”>
<form id=”contactar” name=”contactar” action=”…”>…</form>
</div>

Tendremos los siguientes métodos de selección del objeto Form en el documento:

Método 1

A través del método getElementById() del DOM, nos permite acceder a un objeto a través de su atributo ID. Tendremos que tener la precaución de asignar id únicos a nuestros objetos, para evitar que tengamos objetos con id repetidos.

Ejemplo:

var formulario=document.getElementById(“contactar”);

Método 2

A través del método getElementsByTagName() del DOM, el cuál nos permite acceder a un objeto a través de la etiqueta HTML que queramos. Por ejemplo para acceder a los objetos con etiqueta form haremos:

var formularios = document.getElementsByTagName(“form”);
var primerFormulario = formularios[0]; // primer formulario del documento

o también todo en una única línea:

var primerFormulario = document.getElementsByTagName(“form”)[0] ;

Otra posibilidad interesante que te permite el método anterior, es la de buscar objetos con un padre determinado, por ejemplo:

var menu=document.getElementById(“menulateral”);
var formularios=menu.getElementsByTagName(“form”); // formularios contenidos en el menu lateral
var primerFormulario= formularios[0]; // primer formulario en el menú lateral

Método 3

Otro método puede ser a través de la colección forms[] del objeto document. Esta colección es un array, que contiene la referencia a todos los formularios que tenemos en nuestro documento.

Por ejemplo:

var formularios = document.forms; // la referencia a todos los formularios del documento
var miformulario = formularios[0]; // primer formulario del documento

o bien:

var miformulario = document.forms[0]; // primer formulario del documento

o bien:

var miformulario = formularios[“contactar”]; // referenciamos al formulario con name “contactar”

El formulario como objeto y contenedor.

Debido a que el DOM ha ido evolucionando con las nuevas versiones de JavaScript, nos encontramos con que el objeto Form está dentro de dos árboles al mismo tiempo. En las nuevas definiciones del DOM, se especifica que Form es el padre de todos sus nodos hijos, incluidos objetos y textos, mientras que en las versiones antiguas Form sólo era padre de sus objetos (input, select, button y elementos textarea).

Jerarquía de nivel 0 del DOM para formularios y controles:

Un ejemplo cómo sería el árbol de nivel 2 del DOM para un formulario típico:

Partimos del siguiente código de ejemplo:

<form action=”buscar.php” name=”elFormulario” id=”miFormulario” method=”post”> por
<p>
<label for=”busqueda”>Buscar por:</label>
<input id=”busqueda” name=”busqueda” type=”text” value=””>
<input id=”submit” type=”submit” value=”Buscar”>
</p>
</form>

Árbol de nivel 0 para el mismo formulario:

Los dos árboles que te mostré anteriormente pueden ser útiles para diferentes propósitos. El árbol del DOM de nivel 2, se puede utilizar para leer y escribir en todo el documento con un nivel muy fino de granuralidad. El árbol del DOM de nivel 0, hace muchísimo más fácil leer y escribir los controles del formulario.

Tienes que darte cuenta que, aunque utilices las técnicas del DOM 0 o DOM 2, los objetos siguen siendo los mismos. Por ejemplo:


var elFormulario = document.getElementById(“miFormulario”);
var control = elFormulario.busqueda;

Acceso a propiedades y métodos del formulario.

Los formularios pueden ser creados a través de las etiquetas HTML, o utilizando JavaScript y métodos del DOM. En cualquier caso se pueden asignar atributos como name, action, target y enctype. Cada uno de estos atributos es una propiedad del objeto Form, a las que podemos acceder utilizando su nombre en minúsculas, por ejemplo:

var paginaDestino = objetoFormulario.action;

Para modificar una de estas propiedades lo haremos mediante asignaciones, por ejemplo:

objetoFormulario.action = “http://solucioneswebriskoo.com/recepcion.php”;
Estas dos instrucciones las podemos recomponer usando referencias a objetos:
var paginaDestino = document.getElementByid(“id”).action;
document.forms[0].action = “http://solucioneswebriskoo/recepcion.php”;

Propiedades del objeto Form

acceptCharset Ajusta o devuelve el valor del atributo accept-charset en un formulario. 

action  Ajusta o devuelve el valor del atributo action en un formulario. 
enctype Ajusta o devuelve el valor del atributo enctype en un formulario.
length Devuelve el número de elementos en un formulario.
method Ajusta o devuelve el valor del atributo method en un formulario. 
name Ajusta o devuelve el valor del atributo name en un formulario.
target Ajusta o devuelve el valor del atributo target en un formulario.

Métodos del objeto 

reset() Resetea un formulario.
submit() Envía un formulario.

Propiedad form.elements[]
La propiedad elements[] de un formulario es una colección, que contiene todos los objetos input dentro de un formulario. Esta propiedad es otro array, con todos los campos input en el orden en el cual aparecen en el código fuente del documento.

Generalmente, es mucho más eficaz y rápido referenciar a un elemento individual usando su ID, pero a veces, los scripts necesitan recorrer cada elemento del formulario, para comprobar que se han introducido sus valores correctamente.

Por ejemplo, empleando la propiedad elements[], podemos hacer un bucle que recorra un formulario y si los campos son de tipo texto, pues que los ponga en blanco:


var miFormulario = document.getElementById(“contactar”);  // guardamos la referencia del formulario en una variable.

if (! miFormulario) return false; // Si no existe ese formulario devuelve false.

for (var i=0; i< miFormulario.elements.length; i++)
{
if (miFormulario.elements[i].type == “text”)
{
miFormulario.elements[i].value = “”;
}
}

Share this

Leave a reply