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