HTML2XML - un script Javascript pour générer une requete XML a partir d'un formulaire HTML

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

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

<html>
<head>


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

As in the preceding example, the _PARAMETRES form is used to define the root elements.
The header element named ENTETE contains a set of constant attributes.
All the input field being hidden, this form is not displayed.
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.
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.
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

Attributes

Full Example