 |
 Modifier une liste suivant un choix |
|
|
|
|
|
Le but de ce script est générer une liste d'options suivant un choix
effectué précédemment par le visiteur. |
|
|
|
|
|
Cela se passe en plusieures étapes :
- on place le choix effectué par le visiteur dans des variables,
- on détermine quel choix a été effectué,
- on affecte la liste d'options correspondant au choix de l'utilisateur,
- on place ces options dans la liste 'personnalisée'.
On ajoutera aussi une vérification au cas ou le visiteur ne sélectionnerai aucune option.
Une fonction de remise à zéro est également donnée pour laisser le visiteur changer son choix
s'il le désire. |
|
|
|
|
|
dans la partie <head>
 |
|
 |
|
<script language="JavaScript">
function alimentation() {
// on place la sélection du visiteur dans des variables (s'il a coche une case, la variable sera a 'true')
var choix1 = document.formulaire1.choix[0].status;
var choix2 = document.formulaire1.choix[1].status;
var choix3 = document.formulaire1.choix[2].status;
// on détermine quelle case le visiteur a coché et on affecte la donnée correspondante au 'domaine'
if ( choix1 ) {
var domaine = 'sport';
}
if ( choix2 ) {
var domaine = 'info';
}
if ( choix3 ) {
var domaine = 'cook';
}
// On vérifie que l'un des choix a bien été sélectionné
if (( choix1 || choix2 || choix3) != true) {
window.alert('Selectionnez un domaine !');
return false;
}
// on prépare la suite d'options de la liste, la première valeur est l'intitule, la seconde la valeur qui sera transmise par le formulaire
var optionsport0 = new Option("Voici la liste sport", "");
var optionsport1 = new Option("Football", "football");
var optionsport2 = new Option("Tennis", "tennis");
var optionsport3 = new Option("Ski", "ski");
var optionsport4 = new Option("Petanque", "petanque");
var optioninfo0 = new Option("Voici la liste informatique", "");
var optioninfo1 = new Option("HTML", "html");
var optioninfo2 = new Option("Cobol", "cobol");
var optioninfo3 = new Option("C++", "c++");
var optioninfo4 = new Option("Assembleur", "assembleur");
var optioncook0 = new Option("Voici la liste cuisine", "");
var optioncook1 = new Option("Gastronomique", "gastronomique");
var optioncook2 = new Option("Chinois", "chinois");
var optioncook3 = new Option("Indien", "indien");
var optioncook4 = new Option("Japonais", "japonais");
for (var i = 0; i < 5; i++ ) {
// on affecte les valeurs des variables à chaque option de la liste personnalisée en fonction du domaine choisi
eval("document.formulairefinal.liste.options[i]=option" + domaine + i);
if (i == 0 ) {
document.formulairefinal.liste.options[i].selected = true;
}
}
// on recharge la page pour la prise en compte des changements
history.go(0);
}
// la fonction pour remettre le formulaire totalement vide
function effacer() {
var vide = new Option("", "");
for (var i = 0; i < 5; i++ ) {
eval("document.formulairefinal.liste.options[i]=vide");
document.formulaire1.reset();
}
history.go(0);
}
</script>
|
|
|
 |
|
 |
dans la partie <body>
|
|
|
|
<form name="formulaire1">
Que voulez-vous mettre dans la liste ?
Du sport : <input type="radio" name="choix" value="sport">
De l'informatique : <input type="radio" name="choix" value="info">
De la cuisine : <input type="radio" name="choix" value="cook">
<input type="button" value="Construire votre liste" OnClick="alimentation();"> <input type="reset" value="Effacer"></form>
<form name="formulairefinal" action="mailto:biblioscript@club-internet.fr" enctype="text/plain">
Voici votre liste : <select name="liste"></select>
<input type="button" value="Recommencer" OnClick="effacer();">
</form>
|
|
|
|
|
|
|
|
|
|
|
|
|
