Formulaire dynamique

(Article rédigé par un groupe d’étudiants DUT dans le cadre d’un projet tutoré)

En remplissant des formulaires sur le web, vous avez dû remarquer que certains vérifiaient le contenu de vos champs pendant que vous les remplissiez.

Ce petit tour de magie est principalement issu du JavaScript, mais y inclure de l’Ajax peut le rendre bien plus intéressant.

Pour ce tutorial nous allons construire un formulaire qui détecte si le pseudonyme demandé n’est pas déjà pris, et comme nous aimons la difficulté, nous allons le faire avec un fichier XML 🙂

Contenu de “login.xml” :

 

<?xml version=”1.0″ ?>

<root>

<login>nico</login>

<login>pierre</login>

<login>sylvain</login>

<login>damien</login>

</root>

 

Nous avons donc quatre inscrits. Chacun des pseudonymes se trouve dans une balise “login”. Maintenant, rédigeons notre mini-formulaire dans une page html, “inscription.html” :

 

<html>

<head>

<!– On inclut notre future fichier JavaScript –>

<script type=”text/JavaScript” src=”/ajax/inscription.js”></script>

</head>

<body>

<!–

Notre formulaire ne lance pas de script, il s’agit juste d’une démonstration de la gestion dynamique du formulaire.

–>

<form action=”JavaScript:alert(‘Pas de script d\’inscription, la démo concerne juste la gestion dynamique du formulaire !’)”>

<!—-

Notre balise de login.

–>

Login : <input type=”text” onKeyUp=”JavaScript:verifierlogin(this)” /> <span id=”logintext”></span><br />

<!—-

Notre submit qui ne sert strictement à rien dans l’exemple.

–>

<input type=”submit” value=”Inscription” />

</form>

</body>

</html>

 

Explications :

Vous avez certainement remarqué un étrange attribut possédé par le champ : “onKeyUp”. Il s’agit d’un évènement qui se déclenche dès qu’une touche est relâchée, si le curseur est dans le champ. On associe à cet évènement le code la fonction “verifierlogin(this)” qui sera la présente dans notre super fichier JavaScript inclus en en-tête. Elle vérifiera si le login du champs actuel (nous passons “this” en argument) est bon, et enverra le résultat dans la balise <span id=”logintext”></span> présente juste après le champ.

Passons d’ailleurs tout de suite à la rédaction de ce script, “inscription.js” :

 

/*

Fonction qui crée un objet XHR, rébarbative mais indispensable…

Cette fonction initialisera la valeur dans la variable globale “requete”

*/

var requete = null; /* On crée une variable qui contiendra l’objet XHR */

function creerRequete() {

try {

requete = new XMLHttpRequest(); /* On essaye de créer un objet XmlHTTPRequest */

} catch (microsoft) {

/* Si cela ne marche pas, on a peut-être affaire à un navigateur de Microsoft. On tente alors de créer un objet ActiveX */

try {

requete = new ActiveXObject(‘Msxml2.XMLHTTP’);

} catch(autremicrosoft) {

/* Autre méthode si la première n’a pas marché */

try {

requete = new ActiveXObject(‘Microsoft.XMLHTTP’);

} catch(echec) {

/* Si aucune méthode ne fonctionne, on laisse l’objet vide*/

requete = null;

}

}

}

if(requete == null) {

alert(‘Votre navigateur ne semble pas supporter les objets XMLHttpRequest.’);

}

}

/*************************************************/

/*

Notre fabuleuse fonction de vérification du login

*/

function verifierlogin(src) {

/* On crée notre super objet XHR global */

creerRequete();

/* On édite les propriété de l’objet : type de paramètre, url et une option autorisant une réponse du serveur */

requete.open(‘GET’, ‘login.xml’, true);

/* On initialise la fonction de renvoi d’information */

requete.onreadystatechange = function() {

if(requete.readyState == 4) {

if(requete.status == 200) {

/* On récupère le contenu de notre fichier */

var xml = requete.responseXML;

/* On regarde chaque entrée du fichier XML jusqu’à soit trouver un login identique, soit arriver à la fin */

var temp=”;

for( i=0 ; temp.toUpperCase()!=src.value.toUpperCase() && xml.getElementsByTagName(‘login’).item(i)!=null ; i++ )

temp = xml.getElementsByTagName(‘login’).item(i).firstChild.data;

/* Si la boucle précédente a trouvée un pseudo identique, on écrit dans “logintext” que ce le pseudo n’est pas disponible, sinon l’inverse ! */

if( temp.toUpperCase() == src.value.toUpperCase() )

document.getElementById(‘logintext’).innerHTML = src.value+’ <font color=\’#ff0000\’>est déjà pris</font>’;

else

document.getElementById(‘logintext’).innerHTML = src.value+’ <font color=\’#00cc66\’>est disponible</font>’;

/* Si le champs est vide, effacer “logintext” */

if(src.value==”)

document.getElementById(‘logintext’).innerHTML = ”;

}

}

}

/* C’est partit ! On envoi la requête XHR au serveur */

requete.send(null);

}

Note : La méthode “toUpperCase()” permet de mettre en majuscule la chaîne de caractère sur laquelle elle est appliquée. Grâce à cette méthode notre comparaison est insensible à la casse (tout est forcé en majuscule).

La seule véritable difficulté du script est de comprendre comment explorer le fichier XML avec les fonctions JavaScript qui vont bien. Petit mémo :

requete.responseXML : Récupére le contenu du fichier XML en cours.

xml.getElementsByTagName(‘monSuperTag’) : Renvoi la liste des balises <monSuperTag>contenu</monSuperTag>.

xml.getElementsByTagName(‘monSuperTag’).item(X) : Renvoi la Xième balise ‘monSuperTag’.

xml.getElementsByTagName(‘login’).item(i).firstChild.data : Renvoi le contenu de la Xième balise ‘monSuperTag’.

Et voilà ! Le script fouille dans le fichier XML et compare avec la valeur du champ. Une variante pour faire moins d’appel au serveur consiste à mettre “onChange” au lieu de “onKeyUp” dans le fichier HTML : La vérification ne se fera pas à chaque appuie de touche mais à chaque fois que le curseur quittera le champ après l’avoir modifié. Utile si vous avez beaucoup d’inscrits !

This entry was posted in Programming. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.