Trucsweb.com

Trucsweb.com

Javascript

Récupérer un formulaire en Javascript

RDFFav

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 » 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 »...formulaire, paramètres, Get URL Variables, requête http, url, request, location.search, querystring, encodeURIRé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’);

EXEMPLE 3 optimisé de Andy Earnshaw
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
Encodage du URL

Le URL et particulièrement les paramètres doivent être encodés avant d’être transmises. La fonction encodeURI() permet de convertir tous les caractères spéciaux à l’exception de : , / ? : @ & = + $ # (Utiliser encodeURIComponent() pour encoder tout les caractères.)

Example :

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

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

Par contre, sachez que le navigateur s’en charge automatiquement. La chaine « search » est déjà décodée.

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>

Django (Oznog) Blais
Dernière mise à jour :

Commentaires

  • Attention aux quelques fautes de frappe au debut de la page...
    64x64
    Borie
    Date (GMT) : 2015-07-08 7:6:27 (UTC +0000)
    • Salut, Merci pour le commentaire, je suis loin d'être un expert en orthographe mais je fais toujours de mon mieux. Malheureusement je ne trouve aucun problème en début de texte. Seulement un « Aôut pour Août » mais à la fin du tutoriel? Merci.
      64x64
      oznog
      Date (GMT) : 2015-07-08 12:39:44 (UTC +0000)


    • j'ai testé votre script . Es normal que cela ne s'écrive pas sur la page de réception ? Car c'est cela que je recherche c'est pour un blog .merci d'avance de votre aide.
      64x64
      max
      Date (GMT) : 2017-03-14 7:13:4 (UTC +0000)
      • Bonjour, Il y avait une coquille due à LA DERNIÈRE MODIFICATION, la conversion automatique du caractère « ' » en « ’ ». J'ai plutôt utilisé le double guillemet. ICI => var i = tChaine.indexOf("+"); if (i < 0) break; ICI => tChaine = tChaine.substring(0,i) + "%20" + tChaine.substring(i + 1, tChaine.length); ... Ça fonctionne très bien encore aujourd'hui et avec Chrome qui n'existait pas à l'époque. Salut
        64x64
        oznog
        Date (GMT) : 2017-03-14 11:39:42 (UTC +0000)
        • votre script marche bien. mais serait il possible d'avoir un complément de source?
          64x64
          maxxou
          Date (GMT) : 2017-03-16 7:44:11 (UTC +0000)
          • Salut, Un complément? Ça va me prendre un complément d’information pour vous répondre. Qu'est-ce que vous voulez faire? Ce script récupère des valeurs d'une page Web à l'autre, sans plus.
            64x64
            oznog
            Date (GMT) : 2017-03-16 10:10:6 (UTC +0000)




      • merci
        64x64
        rojo
        Date (GMT) : 2018-03-23 10:42:44 (UTC +0000)
        Date local : Fri Mar 23 2018 13:45:11 GMT+0300 (Russie TZ 2)

        Ajouter un commentaire
        Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
        Votre évaluation du tutoriel

               Visites : 90778 - Pages vues : 176887
        X

        Trucsweb.com Connexion

        Connexion

        X

        Trucsweb.com Mot de passe perdu

        Connexion

        X

        Trucsweb.com Conditions générales

        Conditions

        Responsabilité

        La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

        Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

        Droit applicable et juridiction compétente

        Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

        X

        Trucsweb.com Trucsweb

        X

        Trucsweb.com Glossaire

        X

        Trucsweb.com Trucsweb

        X

        Trucsweb.com Trucsweb

        Conditions

        Aucun message!

        Merci.

        X
        Aucun message!
        X

        Trucsweb.com Créer un compte

        Créer un compte

        .
        @