Biblioscript.com : Comment modifier le contenu d'une liste en fonction d'une saisie

	<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

Modifier une liste suivant une saisie

	Fonction

		Le but de ce script est générer une liste d'options renseignée par le visiteur lui-même.

	Principe

		Cela se passe en plusieures étapes : on place les données saisies par le visiteur dans des variables, on attribue ces variables à une liste d'options, on place ces options dans la liste 'personnalisée'. On ajoutera aussi une vérification sur le remplissage au moins du premier champ. Une fonction de remise à zéro est également donnée pour laisser le visiteur recommencer l'opération plusieures fois s'il le désire.

	Le script

dans la partie <head>

// on place les données saisies dans des variables pour plus de commodité

var choix1 = document.formulaire1.choix1.value;

var choix2 = document.formulaire1.choix2.value;

var choix3 = document.formulaire1.choix3.value;

var choix4 = document.formulaire1.choix4.value;

// on prépare la suite d'options de la liste personnalisée, la première valeur est l'intitulé, la seconde la valeur qui sera transmise par le formulaire

var option0 = new Option("Votre liste est prete", "");

var option1 = new Option(choix1, choix1);

var option2 = new Option(choix2, choix2);

var option3 = new Option(choix3, choix3);

var option4 = new Option(choix4, choix4);

// ici, seul le premier champ est obligatoire

if ( choix1 || (choix1 && (choix2 || choix3 || choix4)) ) {

for (var i = 0; i < 5; i++ ) {

// on affecte les valeurs des variables à chaque option de la liste personnalisée

eval("document.formulairefinal.liste.options[i]=option" + 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);

}

else {

// si le premier champ était vide...

alert('Remplissez au moins le premier champ s\'il vous plait.')

return false;

}

// 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 ?
En premier : <input type="text" name="choix1" size="10" value="">
En second : <input type="text" name="choix2" size="10" value="">
En troisième : <input type="text" name="choix3" size="10" value="">
En quatrième : <input type="text" name="choix4" size="10" value="">
<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>

	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_modif_liste.zip
2 Ko

Script séparé :

form_modif_liste2.zip
2 Ko


	Recherche


	CSS 2


	DHTML


	HTML 4


	Références


	Aide générale


	statistiques