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

Thierry
Seunevel

Tech Corner


Home	Missions	Tech corner	Download	Resume	Contact

Home > Tech Corner > HTML2XML

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

. Principle
. Attributes
. Several forms
. Full Example
. Javascript Code

A Full Example

Several new possibilities are added in this example.
The header element has sub elements giving the date and time of the request.
The date input fields are divided in 2 parts, the day and the month and year in a listbox whose values must be computed according to the current date.
Some Javascript code is used to fill automatically the arrival cities when a two ways fly is selected.

HTML Form

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

HTML Source

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

4 Javascript functions are defined with the HTML page :
fillMthLst builds the list of month used as option values for the date fields.
InzPage includes the page initialization code.
setVilAr is used to fill the opposite city fields when the two ways option is selected in the form.
The cat function concatenates in a single string all the parameters it receives.
To make the example simpler, this different function have been included in the HTML file. In the real world, they should come from separate .js file.
To obtain the date in ddmmyy format and the time in hhmm, we use built-in functions hosted in the same file than computeXML.
A value beginning with a % character in a field value asks to use the built-in function of that name.
In the computeXML script, a function named bif return the value associated with each function.
In the XML data, the dates must be computed by concatenation of 2 fields day, and month-year. This is done using the question mark convention, and the cat function already used in a preceding example.
Modifying the departure or arrival town in the outbound travel triggers the setVilAr function which change the corresponding town in the inbound leg.

Top

Several Forms

Javascript Code