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

Thierry
Seunevel

Code en stock


Accueil	Réalisations	Code en stock	Téléchargement	Curriculum	Contact

Accueil > Code en stock > HTML2XML

Génération XML à partir d'un document HTML (4)

. Principe
. Eléments et attributs
. Formulaires multiples
. Exemple complet
. Le code Javascript

Un exemple complet

Dans cet exemple, on rajoute plusieurs fonctionnalités :
L'élément d'en tête doit comporter la date et l'heure de soumission du formulaire.
Les champs de date sont décomposés en deux champs de saisie, le jour d'une part, le mois et année à choisir dans une boîte déroulante d'autre part. Ces 2 champs sont concaténés dans le document XML.
Enfin, un peu de code Javascript permet le croisement automatique des villes de départ et d'arrivée quand on sélectionne un aller-retour.

Formulaire HTML

Trajet	Date (jma)	De (départ)	A (arrivée)
Aller
Retour

Source HTML

<html>
<head>


<Script src="computeforms.js"></Script>
<Script language="javascript">
var monthNm = ["janv","fev","mars","avr","mai","juin","juil","aout","sept","oct","nov","dec"]
// remplit listes de nb options pour mois année, a partir de dat
function fillMthLst(tgt,dat,nb) {
tgt.options.length = (nb == null) ? 12: nb;
cMth = dat.getMonth() + 1;
cYr = dat.getYear();
for (i=0 ; i < tgt.options.length; i++) {
if (cMth > 12) {
cMth = 1;
cYr = cYr + 1; }
tgt.options[i].text = monthNm[cMth -1] + " " + cYr;
sYr = "" + cYr;
tgt.options[i].value = "" + ((cMth <10) ? "0" : "") + cMth + sYr.substring(2);
cMth += 1;}}
// si aller-retour, garnit champ dst du formulaire frm avec contenu de vil
function setVilAr(vil,frm,dst) {
if (document.NBR_PASSAGERS._trajet[0].checked=="1") {
frm.elements(dst).value = vil.value; }}

// retourne concaténation des arguments dans une chaine
function cat() {
  str = "";
  for (k=0 ; k <cat.arguments.length ; k++) {
    str += cat.arguments[k];
  }
  return (str);
}
// fonction appelée au chargement (onLoad) pour initialiser la page)
function inzPage(rf) {
today = new Date();
dt = new Date(today.getYear(),today.getMonth(),today.getDate() + 7);
frm = document.forms["itineraire__a"];
fillMthLst(frm._mois,dt,12);
frm._jour.value=dt.getDate();
frm = document.forms["itineraire__r"];
dt2=new Date(dt.getYear(),dt.getMonth(),dt.getDate() + 7);
fillMthLst(frm._mois,dt2,12);
frm._jour.value=dt2.getDate();
}
</Script>
<title>Simulateur de requete XML demande de dispo</title>
</head>
<body onLoad="inzpage(this);">
<h1>GENERATION XML exemple 4 </h1>
<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="@DATER" value="%date">
<input type="hidden" name="@HRERQ" value="%time">
<input type="hidden" name="@idrq" value="ddispo">
</Form>
<Table width = "60%" border=1 cellpadding=1 cellspacing=1>
<Tr>
<Td align = left width="30%"> </Td>
<Td align = center width ="15%" bgcolor="silver">Adultes</td>
<Td align = center width ="15%" bgcolor="silver">Enfants</td>
<Td align ="center" width="40%" bgcolor="silver">Trajet</Td>
</Tr>
<Form name="nbr_passagers">
<Tr>
<Td align = left bgcolor="silver">Nombre de passagers</td>
<Td align = center><input type="text" name="@passad" size="5" value="1"></Td>
<Td align = center><input type="text" name="@passen" size="5"></td>
<Td align = center>
<input type="radio" name="_trajet" value="ar" checked/>Aller-retour</input>
<input type="radio" name="_trajet" value="a"/>Aller simple</input></td>
</Tr>
</form>
</Table><BR>
<Table width = "60%" border=1 cellpadding="5" cellspacing="1">
<Tr>
<Td align = center width="10%">Trajet</td>
<Td align = center width="30%" bgcolor="silver">Date (jma)</td>
<Td align = center width="30%" bgcolor="silver">De (départ)</td>
<Td align = center width="30%" bgcolor="silver">A (arrivée)</td>
</tr>
<Form name="itineraire__a">
<Tr>
<Td bgcolor="silver"><input type="hidden" name="@codar" value="aller">
Aller</Td>
<Td><input type="text" name="_jour" size="2">
<select name="_mois">
<Option value="0101">Janv 01</Option>
</select>
<input type="hidden" name="@datded"
   value="?cat(ITINERAIRE__A._jour.value,ITINERAIRE__A._mois.value)"></td>
<Td><input type="text" name="cdvild" size="20"
   onChange="setvilar(this,document.itineraire__r,'cdvila')"></td>
<Td><input type="text" name="cdvila" size="20"
   onChange="setvilar(this,document.itineraire__r,'cdvild')"></td>
</tr>
</form>
<Form name="itineraire__r">
<Tr>
<Td bgcolor="silver"><input type="hidden" name="@codar" value="retour">
Retour</Td>
<Td><input type="text" name="_jour" size="2">
<select name="_mois">
<Option value="0101">Janv 01</Option>
</select>
<input type="hidden" name="@datded"
   value="?cat(itineraire__r._jour.value,itineraire__r._mois.value)"></td>
<Td><input type="text" name="cdvild" size="20"></td>
<Td><input type="text" name="cdvila" size="20"></td>
</tr>
</form>
</table>
<Form name="_formfin">
<input type="button" name="_formfin" value="execute" onclick="computexml()"/><BR>
<textarea name="xml" rows="10" cols="65"></textarea>
</form>
</body>
</html>

Quatres fonctions Javascript sont utilisées en complément de la fonction computeXml.
fillMthLst a pour but de remplir la liste des options des champs de saisie des dates (mois et année).
inzPage est chargée d'initialiser la page est est appelée au chargement (onLoad). Elle fait appel à fillMthLst pour chacun des champs de date.
La fonction setVilAr a pour but de croiser automatiquement les villes de départ et d'arrivée quand un trajet aller-retour est sélectionné.
La fonction cat a pour but la concaténation de ses différents arguments pour créer une chaîne.
Ces scripts étant spécifiques au document, ils ont été intégrés directement dans la page HTML. fillMthLst au moins, qui constitue une fonction utilitaire, serait certainement plus à sa place dans un fichier .js externe.
Dans le formulaire d'en-tête, on veut définir la date au format jjmmaa et l'heure hhmm de la requête.
Pour obtenir les valeurs associées, on fait appel à une des fonctions intégrées définies dans le même fichier que le script de génération XML.
La convention utilisée dans le script est de faire précéder le nom de la fonction par un caractère %. Dans le script, une fonction unique bif retourne la valeur associée au nom demandé.
Dans le XML à générer, la date doit être obtenue à partir du contenu de 2 champs d'entrée distincts.
On fait appel à un eval Javascript au moyen de la convention présentée précédemment (? en premier caractère de la chaîne à évaluer).
Ici on demande l'exécution de la fonction cat évoquée plus haut.
On voit ici l'utilité de pouvoir donner des noms différents (ITINERAIRE__A et ITINERAIRE__B) à des formulaires qui doivent générer un même élément XML (ITINERAIRE). Sans cette faculté, il serait impossible d'accéder aux valeurs des champs des 2 formulaires sans ambiguité.
La modification d'une ville du trajet aller entraîne appel de la fonction setVilAr, qui modifie la ville située à l'autre extrémité du trajet retour.

Haut de page

Formulaires multiples

Code Javascript