Thierry Seunevel Thierry 
Seunevel 
 Tech Corner    
  Home   Missions Tech corner Download Resume Contact
Home > Tech Corner > HTML2XML Version US
XML generation from the content of HTML forms fields

XSL style sheets allow to convert from XML to HTML.
But if you have to send an XML request to a server from an HTML input form, what translation tool are available ?
The script described here offers a way to manage this translation and can be used as it in many situations.
. Principle
. Attributes
. Several forms
. Full Example
. Javascript Code
Principle
The principle of the script is to use the form and input names as XML element names.
The script iterates through the different fields of the different forms and builds the XML string.
Names beginning with an underscore character are bypassed.
A first simple example is shown below.

HTML form Resulting XML
Example 1
Passenger number AdultsChildren
Dates Departure Return
Towns From To
<?xml version='1.0'?>
<REQUETE>
<DEMANDE_DISPO>
<DISPONIBILITE>
<NBPASSADLT>2</NBPASSADLT>
<NBPASSENFT>1</NBPASSENFT>
<DATE_ALLER>170703</DATE_ALLER>
<DATE_RETOUR>240703</DATE_RETOUR>
<VILLE_DEP>PARIS</VILLE_DEP>
<VILLE_ARRIVEE>TUNIS</VILLE_ARRIVEE>
</DISPONIBILITE>
</DEMANDE_DISPO>
</REQUETE>


HTML Source










1





2























3
<html>
<head>
<!-- Page HTML exemple 1 pour routines computeForms -->
<!-- Auteur : Thierry SEUNEVEL - 12/07/2003 -->
<Script src="computeForms.js"></Script>
<title>Simulateur de requete XML demande de dispo</title>
</head>
<body >
<!-- formulaire contenant paramètres necessaires a la constitution du document XML -->
<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>
<Table width = "400" border=1 cellpadding=1 cellspacing=1>
<!-- Formulaire affiché et dans lequel les données sont saisies -->
<Form name="DISPONIBILITE">
<tr><td colspan="3" align="center"><strong >Exemple 1</strong></td></tr>
<tr align="center" ><td rowspan="2" >Nombre passagers</td>
<td bgcolor="Silver">Adultes</td>
<td bgcolor="Silver">Enfants</td></tr>
<tr align="center" >
<td ><input name="NBPASSADLT" size="5" value="2"/></td>
<td ><input name="NBPASSENFT" size="5" value="1"/></td></tr>
<tr align="center" >
<td rowspan="2" >Dates</td>
<td bgcolor="Silver">Aller</td>
<td bgcolor="Silver">Retour</td></tr>
<tr align="center" >
<td ><input name="DATE_ALLER" size="10" value="170703"/></td>
<td ><input name="DATE_RETOUR" size="10" value="240703"/></td></tr>
<tr align="center" >
<td rowspan="2" >Villes</td>
<td bgcolor="Silver">Départ</td>
<td bgcolor="Silver">Arrivée</td></tr>
<tr align="center" >
<td ><input name="VILLE_DEP" size="10" value="PARIS"/></td>
<td ><input name="VILLE_ARRIVEE" size="10" value="TUNIS"/></td></tr>
</form>
</table>
<!-- Formulaire reel destiné à envoyer les données saisies -->
<Form name="_FormFin">
<input type="Button" name="_FormFin" value="Execute" onclick="computeXML()"/>
<textarea name="xml" rows="10" cols="80"></textarea>
</form>
</body>
</html>


  1. The script extracts the outermost XML elements from a specific form that has to be named _PARAMETRE.
    As its name begins with underscore, it will not be used in the XML generation, but its hidden input fields XMLVersion and ELEMENT are used to build the document root.

  2. The form named DISPONIBILITE is transformed in an element of the same name, and each of its field (NBPASSADLT, NBPASSENFT…) becomes an XML sub-element.

  3. The form named _FormFin is the only form submitted to the server. It calls the computeXML function to compute the xml field. In a real file, this field would be sent in the posted data. For our samples, it is displayed as a textarea field.
    Top  Top    | Attributes Next


©  Thierry Seunevel (2004) www.seusoft.com