Récupérer un formulaire en Javascript Les paramètres GET de la requête HTTP par Django (Oznog) Blais, Trucsweb (24 Avril 2001)
Les données d’un formulaire peuvent être envoyées avec la méthode « GET » en d’autres mots, directement dans la requête HTTP. Vous avez sûrement déjà remarqué ces caractères bizarres visibles au bout d’une adresse (URL) dans un navigateur. Le URL et la chaîne de caractères sont déterminés par le paramètre « ACTION » et les paramètres « NAME » d’un formulaire. Saviez-vous que le Javascript permet de récupérer ces données ? La méthode « search » retourne une chaîne de caractères contenant tous les paramètres. Il suffit ensuite de les extraire pour pouvoir les utiliser. Ce tutoriel vous permet d’isoler les paramètres pour éventuellement les utiliser.
Bref rappel du fonctionnement d'un formulaire
Dans la déclaration d'un formulaire, il faut indiquer l'action (la page ou le script qui récupère l'information) et la méthode (comment l'information est envoyée). Ensuite chaque champ de saisie doit avoir un nom pour l'identifier. À l'aide de ce nom, vous pouvez récupérer la valeur entrée par l'usager dans la page HTML définie par l'action. Exemple : <form method="get" action="page.htm"> On note ici l'utilisation de la méthode " GET " obligatoire pour le bon fonctionnement du script. Et l'action qui contient le nom de la page qui récupère les valeurs. Les champs de saisies doivent être identifiés par un nom pour y référer lors de la récupération. <input type="text" name="nom" />
<input type="text" name="prenom" />
<input type="text" name="email" /> Et ne pas oublier le bouton pour envoyer le formulaire. La valeur de ce bouton est ce qui est affiché sur le bouton. <input type="submit" name="envoyer" value="Soumettre" /> Donc dans une page " saisie.htm " vous aurez quelque chose comme ça : Page : Saisie.htm <form method="get" action="recupere.htm">
<p>Nom : <input type="text" name="nom" /></p>
<p>Prénom : <input type="text" name="prenom" /><</p>
<p>Courriel : <input type="text" name="email" /></p>
<p><input type="submit" name="Submit" value="Soumettre" /></p>
</form> Une fois que le visiteur aura cliqué sur le bouton " envoyé " les données seront envoyées à la page " recupere.htm " La récupération.
Pour récupérer les données ou les valeurs de chaque champ du formulaire, il faut utiliser le méthode Javascript " search " comme ceci : nReq = location.search - nReq égal donc " ?nom=valeur&prenom=valeur&email=valeur " Puisque la chaîne récupérée contient le symbole inutile " ? ", il faut s'en débarrasser, alors pourquoi ne pas le faire en même temps. J'utilise la méthode " substring " pour isoler le premier caractère, le " ? " et ne garder que le reste de la chaîne, soit sa longueur " length ". nReq = location.search.substring(1,location.search.length) - nReq égal donc " nom=valeur&prenom=valeur&email=valeur " La méthode " split " permet de diviser une chaîne de caractères, selon un séparateur, dans un tableau (array). Et le séparateur est éliminé du même coup. Le séparateur en question est le symbole " & " qui sépare les paramètres. nReq = nReq.split("&"); nReq égale maintenant :
- nReq[0] = " nom=valeur "
- nReq[1] = " prenom=valeur "
- nReq[2] = " email=valeur "
Il ne reste qu'à isoler le nom du paramètre ou de la variable avec sa valeur. Pour ce faire il faut utiliser la méthode " substring " jumelé avec la méthode " indexOf " qui permet de donner la position d'un caractère dans une chaîne de caractères. Dans ce cas précis le symbole " = ". Donc pour extraire le nom du paramètre il faut un " substring " de 1 à la position du " = ". MaVariable = nReq[i].substring(0, nReq[i].indexOf("=")) Pour extraire la valeur il faut partir de la position du " = " + 1 à la longueur totale de la chaîne soit " length ". MaValeur = nReq[i].substring(param[i].indexOf("=")+1, nReq[i].length) Voilà, vos paramètres sont récupérés. Mais, pour automatiser quelque peu cette technique, j'ai fait un petit script qui permet d'extraire automatiquement un nombre inconnu de paramètres avec une fonction qui les transférer dans une variable associée. Voici un exemple de ce script qui fonctionne tout seul. L'exemple utilise trois paramètres mais vous n'avez qu'à ajuster le formulaire et la section du script " À MODIFIER " (en rouge dans le code suivant) pour ajouter d'autres paramètres. Vous pouvez télécharger ce script ici. ATTENTION: Modification du 1er aôut 2002
Le résultat retourné doit être décodé, en effet tous les caractères spéciaux comme les accents doivent être décodé. La fonction Javascript unescape le fait très bien à l'exception de l'espace représenté par le symbole (+). Il faut donc le faire manuellement. La nouvelle fonction est dans le code complet suivant, c'est decode(chaîne). Page : page.htm
<script type="text/javascript" language="javascript">
<!-- Début
// ********************************************
// Récupération de paramètre d'une requête HTTP
// ou récupération des données d'un formulaire.
// Auteur : Oznog (www.trucsweb.com)
// ********************************************
// NE PAS MODIFIER CE CODE
var paramOk = true;
function FaitTableau(n) {
// Création d'un tableau (array)
// aux dimensions du nombre de paramètres.
this.length = n;
for (var i = 0; i <= n; i++) {
this[i] = 0
}
return this
}
function ParamValeur(nValeur) {
// Récupération de la valeur d'une variable
// Pour créer la variable en Javascript.
var nTemp = "";
for (var i=0;i<(param.length+1);i++) {
if (param[i].substring(0,param[i].indexOf("=")) == nValeur)
nTemp = param[i].substring(param[i].indexOf("=")+1,param[i].length)
}
return Decode(nTemp)
}
// Extraction des paramètres de la requête HTTP
// et initialise la variable "paramOk" à false
// s'il n'y a aucun paramètre.
if (!location.search) {
paramOk = false;
}
else {
// Éliminer le "?"
nReq = location.search.substring(1,location.search.length)
// Extrait les différents paramètres avec leur valeur.
nReq = nReq.split("&");
param = new FaitTableau(nReq.length-1)
for (var i=0;i<(nReq.length);i++) {
param[i] = nReq[i]
}
}
// Décoder la requête HTTP
// manuellement pour le signe (+)
function Decode(tChaine) {
while (true) {
var i = tChaine.indexOf('+');
if (i < 0) break;
tChaine = tChaine.substring(0,i) + '%20' + tChaine.substring(i + 1, tChaine.length);
}
return unescape(tChaine)
}
// End -->
</script>
<script type="text/javascript" language="javascript">
<!-- Début
// ***************************************
// À MODIFIER - AJOUTER DES PARAMÈTRES ICI
// ***************************************
// Créer les variables avec leur contenu
// basé sur la requête:
// ?nom=...&prenom=...&email=...
if (paramOk) {
nom = ParamValeur("nom");
prenom = ParamValeur("prenom");
email = ParamValeur("email");
}
// End -->
</script>
</head>
<body>
<form method="get" action="page.htm">
<p>Nom : <input type="text" name="nom" /></p>
<p>Prénom : <input type="text" name="prenom" /></p>
<p>Courriel : <input type="text" name="email" /></p>
<p><input type="submit" name="Submit" value="Soumettre" /></p>
</form>
<script type="text/javascript" language="javascript">
<!-- Début
// ***************************************
// POUR L'EXEMPLE, AFFICHAGE DES VARIABLE
// ***************************************
if (paramOk) {
document.write(nom);
document.write(" ");
document.write(prenom);
document.write(", ");
document.write(email);
}
// End -->
</script>
</body>
</html>
| 
