Thierry Seunevel Thierry 
Seunevel 
 Tech Corner       
  Home   Missions Tech corner Download Resume Contact
Home > Tech Corner > HTML2XML

XML generation from the content of HTML forms fields (3)

. Principle
. Attributes
. Several forms
. Full Example
. Javascript Code
Using several forms
In real life application, things are often much more complex.
In the following example, we need to send a predefined set of control data, and the input data has to be parsed in 3 elements, two of them sharing the same name, and including sub-elements and attributes.

HTML Form
Example 3 Date From (Town) To (Town)
Passenger Number Adults Children Outbound
Inbound

Resulting XML
<?xml version='1.0'?>
<REQUETE>
 <DEMANDE_DISPO>
  <ENTETE CDCLI="987654" IDSRVR="1" VERSION="V5.2.0" DEVRQ="EUR" LANGRQ="FR" IDRQ="DDISPO"/>
  <NBR_PASSAGERS PASSAD="2"/>
  <ITINERAIRE CODAR="ALLER" DATED="180903">
   <CDVILD>PARIS</CDVILD>
   <CDVILA>TUNIS</CDVILA>
  </ITINERAIRE>
  <ITINERAIRE CODAR="RETOUR" DATED="250903">
   <CDVILD>TUNIS</CDVILD>
   <CDVILA>PARIS</CDVILA>
  </ITINERAIRE>
 </DEMANDE_DISPO>
</REQUETE>

HTML Source







1


2

















3













4



5







5
<html>
<head>
<!-- Page HTML Génération XML exemple 3 -->
<!-- Auteur : Thierry SEUNEVEL - 16/08/2003 -->
<Script src="computeForms.js"></Script>
<title>Génération XML exemple 3</title>
</head>
<Form name="_PARAMETRES">
<input type="Hidden" name="XMLVersion" value="?xml version='1.0'?">
<input type="Hidden" name="ELEMENT" value="REQUETE">
<input type="Hidden" name="ELEMENT" value="DEMANDE_DISPO">
</Form>
<Form name="ENTETE">
<input type="Hidden" name="@CDCLI" value="987654">
<input type="Hidden" name="@IDSRVR" value="1">
<input type="Hidden" name="@VERSION" value="V5.2.0">
<input type="Hidden" name="@DEVRQ" value="EUR">
<input type="Hidden" name="@LANGRQ" value="FR">
<input type="Hidden" name="@IDRQ" value="DDISPO">
</Form>
<table width="100" border="1" cellpadding="1" cellspacing="1">
<tr >
<td align="center" colspan="4"><strong >Example 3</strong></td>
<td align="center" bgcolor="silver">Date</td>
<td align="center" bgcolor="silver">From (Town)</td>
<td align="center" bgcolor="silver">To (Town)</td>
</tr>
<tr >
<td rowspan="2">Passenger Number</td>
<td bgcolor="silver" align="center">Adults</td>
<td bgcolor="silver" align="center">Children</td>
<td bgcolor="silver" align="center">Outbound</td>
<form name="_SAISIE">
<td ><input type="text" name="DATED"></td>
<td ><input type="text" name="VILLEAD" ></td>
<td ><input type="text" name="VILLEAA" ></td>
</tr>
<tr >
<td align="center"><input type="text" name="NBAD"></td>
<td align="center"><input type="text" name="NBEN"></td>
<td bgcolor="silver" align="center">Inbound</td>
<td ><input type="text" name="DATER" ></td>
<td ><input type="text" name="VILLERD" ></td>
<td ><input type="text" name="VILLERA" ></td>
</tr>
</table>
</form>
<Form name="NBR_PASSAGERS">
<input type="hidden" name="@PASSAD"
    value="?document._SAISIE.NBAD.value">
<input type="hidden" name="@PASSEN"
    value="?document._SAISIE.NBEN.value">
</form>
<Form name="ITINERAIRE__A">
<input type="hidden" name="@CODAR" value="ALLER">
<input type="hidden" name="@DATED"
    value="?document._SAISIE.DATED.value">
<input type="hidden" name="CDVILD"
    value="?document._SAISIE.VILLEAD.value">
<input type="hidden" name="CDVILA"
    value="?document._SAISIE.VILLEAA.value">
</form>
<Form name="ITINERAIRE__R">
<input type="hidden" name="@CODAR" value="RETOUR">
<input type="Hidden" name="@DATED"
    value="?document._SAISIE.DATER.value">
<input type="Hidden" name="CDVILD"
    value="?document._SAISIE.VILLERD.value">
<input type="Hidden" name="CDVILA"
    value="?document._SAISIE.VILLERA.value">
</form>
<Form name="_FormFin">
<input type="Button" name="_FormFin" value="Execute" onclick="computeXML()"/><BR>
</form>
</body>
</html>

  1. As in the preceding example, the _PARAMETRES form is used to define the root elements.

  2. The header element named ENTETE contains a set of constant attributes.
    All the input field being hidden, this form is not displayed.

  3. The HTML table used to lay the input field includes a form element named _SAISIE. The name beginning with an underscore the fields of this form are not used directly by the computeXML function.

  4. The XML element NBR_PASSAGER must have attributes for the number of adults and children.passengers
    A form element named NBR_PASSAGER is defined with 2 hidden input fields whose values are in the form of ?. When the computeXML function finds a value beginning by a question mark, the remaining of the value is treated as a Javascript expression and evaluated using the Javascript eval function.
    Here the value is document._SAISIE.NBAD.value which means to get the value of the NBAB input field from the _SAISIE form.

  5. The target XML must have 2 elements named ITINERAIRE with a different CODAR attribute (ALLER or RETOUR).
    Two forms are created, ITINERAIRE__A and ITINERAIRE__B. The computeXML script discards characters preceded by 2 underscore. This make possible to generate several elements of the same name, keeping a way to distinguish them if needed.

    The other elements of this example do not require more explanation.
    Top  Top  Previous  Attributes | Full Example   Next


©  Thierry Seunevel (2004) www.seusoft.com