Javascript

Récupérer un formulaire en Javascript

Récupérer un formulaire en Javascript - Les paramètres GET de la requête HTTP

Les données d’un formulaire peuvent être envoyées avec la méthode « GET » dit « querystring » ou la chaine de requête. 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 l’attribut « ACTION » et l’attribut « NAME » des éléments 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 sous forme de « [clé]=[valeur] ». 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 URL de la page qui récupère les valeurs.

Les champs de saisies doivent être identifiés par un nom (name) 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 "

Code simplifié (Mise à jour 2014)

Contrairement à l’exemple de 2001, cette mise à jour utilise un deuxième split pour récupérer les valeurs. Avec l’avantage de simplifier le code, sans vraiment changer les performances. Toutes fois, cette méthode régénère les deux matrices (array) et boucle l’ensemble des variables à chacune des variables demandées.

EXMPLE 1

Example avec le URL page.htm?cle1=Québec&cle2=Montréal

function twRequeteVariable(sVariable) {
  // Éliminer le "?"
  var sReq = window.location.search.substring(1);
  // Matrice de la requête
  var aReq = sReq.split("&");
  // Boucle les variables
  for (var i=0;i<aReq.length;i++) {
    // Matrice de la variables / valeur
    var aVar = aReq[i].split("=");
    // Retourne la valeur si la variable 
    // demandée = la variable de la boucle
    if(aVar[0] == sVariable){return aVar[1];}
  }
  // Aucune variable de trouvée.
  return(false);
}

alert(twRequeteVariable("cle1"));
alert(twRequeteVariable("cle2"));

EXMPLE 2 avec Expressions régulières

function twRequeteVariable(sNom, sUrl) {
  if (!sUrl) sUrl = window.location.href;
  sNom = sNom.replace(/[\[\]]/g, "\\$&");
  var regex = new RegExp("[?&]" + sNom + "(=([^&#]*)|&|#|$)"),
    sResults = regex.exec(sUrl);
  if (!sResults) return null;
  if (!sResults[2]) return '';
  return decodeURIComponent(sResults[2].replace(/\+/g, " "));
}

alert(twRequeteVariable(’cle1’);

var urlParams;
(window.onpopstate = function () {
    var match,
        pl     = /\+/g,  // Regex for replacing addition symbol with a space
        search = /([^&=]+)=?([^&]*)/g,
        decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
        query  = window.location.search.substring(1);

    urlParams = {};
    while (match = search.exec(query))
       urlParams[decode(match[1])] = decode(match[2]);
})();

alert(urlParams["mode"]);
// Retourne la valeur

alert("empty" in urlParams);
// Retourne vrai ou faux

Example :

encodeURI("ma page.htm?cle1=Québec&cle2=Montréal");

Résultat :
ma%20page.htm?cle1=Qu%C3%A9bec&cle2=Montr%C3%A9al

La récupération.

Pour récupérer les données ou les valeurs de chaque champ du formulaire, il faut utiliser la méthode Javascript search comme ceci location.search = ?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 (à 0) et ne garder que le reste de la chaîne.

sReq = location.search.substring(1);

sReq égal donc « nom=valeur&prenom=valeur&email=valeur »

La méthode split permet de diviser une chaîne de caractères, sur 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.

sReq = 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érait 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 août 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

<!DOCTYPE html>
<html lang="fr-CA">
<head>
<meta charset="utf-8">
<title>Récupérer un formulaire en Javascript - Les paramètres GET de la requête HTTP - Trucsweb.com</title>
<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)
  // 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>