Biblioscript.com : Comment afficher une information en fonction d'un choix de l'utilisateur

	<SCRIPT LANGUAGE=JavaScript> var nbre = Math.round(Math.random()10000); var chaine="<a href=http://www3.click-fr.com/clickj.cgi?a=1019-405664&b=" + nbre + " target=clickfr><img border=0 height=60 width=468 SRC=http://www3.click-fr.com/printj.cgi?a=1019-405664&b=" + nbre +" alt=\" Visitez notre Sponsor ! *\"></a>"; document.write(chaine); </SCRIPT> Membre de ClickFR, Reseau francophone Paie-Par-Click


- [ CSS : ] [ DHTML : ] [ HTML : ] [ JavaScript : ] [ Refs : ]

	JavaScript 1.3

Formulaires

Affichage contextuel

	Fonction

		Le but de ce script est de d'afficher dans une zone de texte des informations en fonction de ce que fait l'utilisateur dans un formulaire.

	Principe

		On créé la liste des messages pouvant s'afficher dans des variables, puis sur chaque éléments du formulaire pour lequel on souhaite afficher une information, on place la fonction d'affichage en passant l'identité de l'élément. Cela est valable pour les boutons radios. Pour les cases à cocher on est obligé d'ajouter un contrôle pour éviter que lorsqu'on décoche la case, le message en rapport avec la case ne s'affiche. Pour les 'selects', une fonction spécifique également, pour repérer l'option qui a été sélectionnée.

	Le script

dans la partie <head>

// on créé les explications qui s'afficheront dans la zone de texte pour les boutons radio et les cases à cocher
var vide = '';
var choix1 = 'Explication pour le premier choix';
var choix2 = 'Texte concernant le second bouton';
var choix3 = 'Troisieme possibilite de texte';
var coche1 = 'Quand on coche cette case...';

function affichage(champ) {

// on affecte à la zone de texte la variable passée par la fonction appelée sur le bouton radio

document.formulaire.explication.value = champ;

}

// fonction pour éviter que lorsqu'on décoche une case, le message de cette case ne s'affiche
function verif(element,champ) {

// si la case est 'cochée', on lance la fonction d'affichage normale,

if ( element.status ) {

affichage(champ);

}

// sinon on nettoie la zone de texte

else {

affichage(vide);

}

// fonction spécifique aux 'selects'
function affichageliste(element) {

// on créé les explications qui s'afficheront dans la zone de texte pour tous les 'selects'

// le nom des variables doit se composer du nom de la liste suivi du numéro de l'option dans la liste (on commence à 0, pas à 1)
var liste1_1 = 'Tout sur le html 4.0';
var liste1_2 = 'Un peu de feuilles de style';
var liste1_3 = 'Dynamisez vos pages !';
var liste2_1 = 'Un peu de gastronomie ';
var liste2_2 = 'Il est temps de tondre le gazon';
var liste2_3 = 'Ne vous faites pas mal !! ';

selection = element.options[element.options.selectedIndex].index;

// si le choix est le premier (Choisissez), on nettoie la zone de texte

if ( selection == '0' ) {

affichage(vide);

}

else {

// si le choix n'est pas le premier, on lance l'affichage du choix

sel = element.name;

optionchoisie = eval(sel + selection)

affichage(optionchoisie);

}

}
</script>

dans la partie <body>

<form name="formulaire">
<input type="radio" name="choix" OnClick="affichage(choix1);"> Choix 1
<input type="radio" name="choix" OnClick="affichage(choix2);"> Choix 2
<input type="radio" name="choix" OnClick="affichage(choix3);"> Choix 3

<input type="checkbox" name="case1" OnClick="verif(case1,coche1);"> Case à cocher...
<select name="liste1_" OnChange="affichageliste(liste1_);">

<option>Choisissez

<option>HTML

<option>CSS

<option>JavaScript

</select>

<select name="liste2_" OnChange="affichageliste(liste2_);">

<option>Choisissez

<option>Cuisine

<option>Jardinage

<option>Bricolage

</select>

<textarea name="explication" cols="25" rows="5" wrap="virtual"></textarea>
</form>

	Démonstration

	Téléchargement

Ce script est disponible en deux versions :

le script est intégré à la page où il agit,

le script est dans un fichier séparé de la page où il agit (fichier.js et fichier.html).

L'intérêt d'un script dans un fichier séparé est de pouvoir le partager entre plusieurs pages html.
Cela permet aussi de le rendre inaccessible à toute personne qui souhaiterai l'enregistrer pour une autre utilisation.

Script intégré :

form_context.zip
2 Ko

Script séparé :

form_context2.zip
2 Ko


	Recherche


	CSS 2


	DHTML


	HTML 4


	Références


	Aide générale


	statistiques