Donnerstag, Juli 21, 2005

AJAX and Forms

The good old HTML form element is used by many web pages for the communication of the data from forms. This mechanism was developed to work without any JavaScript or XML and long before AJAX.

It’s a typical scenario in web applications that they have some more or less static forms with input fields for displaying and editing data values. Therefore a concept to handle form situations is also needed in a AJAX engine.

This part is about the programming we need on the client. It’s implemented in JavaScript and uses intensively XML documents. Some words about the extensions in the Proxy Generator as well as the implementation on the server will follow. Some samples can already be found on the samples WebSite.

Classical approach and drawbacks

The mechanism behind form element works since the beginnings of HTML to send the data that is entered or changed by the user back to the WebServer. The format used by these postings has nothing in common with XML but uses for in many cases a URL like format defined by the mime type application/x-www.form-urlencoded. With the upcoming XHTML 2.0 definition also a XML Format and some more advanced form functionalities will be available. But all these good news are not supported by the wide spread browsers available today.

A direct access to the data inside a HTML Form in a whole does not exist in the browser nor in JavaScript. But of course the individual elements can be accessed one by one. The values that are shown to the user are normally included inside the HTML code that is sent from the server to the client. Collecting the values and sending them back to the server is hard coded to the submit action of the form that normally downloads new HTML Code and displays them in the window,

It’s obvious that this approach doesn’t fit into the processing of AJAX. The graphical elements of the form and the data is not separated properly.

Using Form Data

One way to realize an access to the data in a HTML form for AJAX applications is to use JavaScript. The include file ajaxForms.js was written to enable the developer to handle this effectively and without using long scripts in every form but to help with a collection of methods.

The goal of this approach is to distinguish between the data of the form represented as a XML document and the HTML elements that are used to display and edit the data.

To define a form on a HTML page you need a HTML Element that contains all the form elements. This encapsulating element can be a DIV tag.

All the input fields, checkboxes, textareas and select objects with a name that are inside this HTML element are considered holding data in the appropriate object properties. This data is the assembled into a XML document with a data root element by using the names of the HTML elements as the names of the inner tags.

This HTML code ...

<div id="frm" style="margin: 2px; padding: 2px; border: solid 1px green"
  <p>F1: <input name="F1" value="one by one"></p>
  <p>F2: <input type="checkbox" name="F2"></p>
  <p>T1: <textarea name="T1" style="width: 400px; height: 80px">some
text
lines</textarea>
  <p>S1: <SELECT name="S1">
    <option value="10">ten</option>
    <option value="11">eleven</option>
    <option value="12" selected="selected">twelve</option>
    <option value="13">thirteen</option>
  </SELECT>
</div>

... corresponds to this XML document:

<data>
  <F1>one by one</F1>
  <F2>false</F2>
  <T1>some
text
lines</T1>
  <S1>12</S1>
</data>

The data of a form is now available as a single value and therefore fits well into the existing functionalities of the AJAX engine.

In AJAX applications it is a typical that the same HTML Form is reused several times before getting and displaying new HTML code from the server so we also need methods for the reverse data flow that puts the data of an XML document back into the HTML form.

Keine Kommentare: