JavaScript sin dolor usando Prototype (2da parte) - Manejando Formularios

Los objetos Form y Field prevén un número de funciones simples pero convenientes para trabajar con formularios y campos “input”, así como el código que soporta la puesta en práctica de Ajax con Prototype.

El objeto Form

Generalmente, los métodos del objeto Form toman una ID o una referencia del objeto a un elemento:

// disables the form making all elements read only
Form.disable(form)
// enables a form again
Form.enable(form)
// clears values from all form elements
Form.reset(form)
// returns an array of all form fields in the form
Form.getElements(form)
// focuses on the first form field
Form.focusFirstElement(form)

El objeto Field

El objeto Field trata con elementos individuales del formulario y sus métodos típicamente toman un ID o una referencia del objeto a un elemento de un modo muy similar al objeto Form:

// clears the field, will accept any number of arguments
Field.clear(field)
// returns true if all given fields have a value
Field.clear(field, anotherField)
// gives focus to the field
Field.focus(field)
// selects any text in the field
Field.select(field)

La Serialización del Formulario

En términos de Prototype, serializar un formulario significa leer todos los elementos del formulario y convertirlos en un string URL-codificado (casi) idéntico a la que sería enviada si usted aceptara el formulario. Por ejemplo, considere este formulario:

<form id="search" action="search.php" method="post">
<input type="text" name="query" value="thing" />
<select name="field">
<option value="artistname">Artist Name</option>
<option value="title" selected="selected">Title</option>
</select>
<input type="submit" name="submit" value="Search" />
</form>

// query=thing&field=title&submit=Search
Form.serialize($("search"))

Note que Form.serialize ingeniosamente deja de lado las diferentes maneras en que los elementos del formulario son accesados, de modo que inputs, selects, checkboxes y los radio buttons son manejados correctamente. Form.serialize es útil para varias tareas, pero es el mejor cuando trabajamos con Ajax, como lo veremos dentro de poco.

Form.serialize muestra un comportamiento extraño que vale la pena mencionar aquí. Usted recordará que dije el string URL-codificado que Form.serialize produce son muy parecidos a los que serían enviados si usted aceptara el formulario. Bien, es "casi idéntico" porque Form.serialize no trata el botón submit o el image inputs correctamente. Esto incluye todos los botones submit en el string, independientemente de haber sido presionados e ignorando completamente los “image and button inputs”. Mientras sea consciente de esto, puede codificarlo.

Form Observers

Form.Observer y Form.Element.Observer le permiten observar un formulario (o simplemente, un elemento del formulario) y enviar “callbacks” cuando los datos cambien. Estos son actualmente dos versiones de cada “observer” que verifican el valor actualizado. El primero es un observador periódico, que trabaja así:

new Form.Observer($("myform"), 1, myCallBackFunction);
new Form.Element.Observer($("myfield"), 1, myCallBackFunction);

Estos “observadores” comprueban cada segundo si los datos se han modificado y, si esto es así, llamará a myCallBackFunction.

El segundo tipo de “observador” esta basado en los eventos y sólo realizará la comprobación cuando se produzca la modificación o un clic-evento para los elementos. Usted puede usarlo con algo como esto:

new Form.EventObserver($("myform"), myCallBackFunction);
new Form.Element.EventObserver($("myfield", myCallbackFunction);

Si en todos los campos del formulario se colocan “observadores”, tendremos una manera mucho más eficiente de observar el formulario. Pero, si usted quiere “observar” los cambios de elementos que no soportan estos eventos, use los observadores periódicos.