Les formulaires et un minimum de javascript

Site original : http://philippe.sarcher.org/javascript/musee/

Récupérer le contenu d'un formulaire


Nous allons voir ici comment récuperer en javascript les données qui ont été saisies dans un formulaire. Le meilleur moyen de le voir est de faire tout d'abord un petit exemple :

Soit le formulaire suivant :

Rentrez un texte :
Une petite listbox ?
Une checkbox ?
Vous aimez un peu?
beaucoup ?
passionement ?

   <input name="texte" size=25>
   <select name=choix >
   <option SELECTED VALUE="Visu">Visu
   <option value="List">List
   <option value="Modify">Modify
   <option value="Create">Create
   <option value="Delete">Delete
   <option value="Attribute">Attribute
   <option value="Rename">Rename
   </select>
   <input type=checkbox name=checkbox>
   <input type=radio name=aime value=UnPeu>
   <input type=radio name=radio value=beaucoup>
   <input type=radio name=aime value=passionement>

Les paramètres lus dans cette page sont :

L'Url complète est :

Explications

Ce résultat repose sur l'utilisation d'une fonction qui extrait les parametres. Cette fonction s'appelle de la manière suivante :

parametre = recherche(quoi);

parametre est un objet de type ' Param '. Cet objet a deux composantes, 'nom' et 'valeur' accesible donc par 'Param.nom' et 'Param.valeur'.

quoi est soit le nom du paramètre recherché, soit sont numéro.

Le script complet qui affiche le liste des paramètres comme précédemment se présente de la manière suivante :

comp = 0;
while (true)
{
	par = recherche (comp);
	if (par.nom == "") break;
	document.write (par.nom + " -> " + unescape(par.valeur) + "<br>")
	comp += 1
}
if (comp == 0)
	document.write("Il n'y en a pas pour le moment,")
	document.write(" essayez en remplissant le formulaire ci-dessus<br>");

Mais on peut aussi ne demander qu'un seul paramètre. Par exemple si on fait :

   par = recherche ("choix");
   document.write(par.valeur);

Cela donne :

Petit truc annexe :

Si vous saisissez dans un champ la phrase suivante :

je place 10$ à 5% on obtient : je+place+10%24+%E0+5%25 !!
Glooops !! En fait, comme tous les caractères des champs vont transiter par l'Url, les caractères spéciaux sont transformés en leur valeur hexa (de la forme %xx) et les espaces en +. Pour décoder cela, il y a une fonction appelée unescape. Si on fait :
  document.write(unescape("je+place+10%24+%E0+5%25"))

On obtient :

Reste le problème des espaces remplacés par des +. À ma connaissance, il n'y a pas de fonction toute faite pour corriger cela. Il faut donc en faire une à la main. On mets donc dans le <head> de la page, le code suivant :

function str_PlusToSpace()
{
	var result = new String("");
	s=this;
	for (i=0; i < s.length; i++)
	{
		if (s.charAt(i) == '+')
			result += ' ';
		else
			result += s.charAt(i);
	}
	return result;
}
String.prototype.plusToSpace = str_PlusToSpace;
Cela a pour effet de rajouter une methode aux objet de type String. Cette méthode s'appelle plusToSpace. On le met en oeuvre comme ca :

   var toto = new String("je+place+10$+à+5%");
   document.write (toto.plusToSpace());

On obtient :

Cet exemple est finalement assez complexe, étant donné ce qu'on veut gérer.

Essayez de comprendre le contenu des fonction recherche et str_PlusToSpace

Fonction Recherche Back