Ce petit exercice est la solution proposée à l'un d'entre vous face à son problème. Son but consiste à proposer à l'utilisateur une liste de choix afin de remplir un formulaire, en plus d'une saisie libre dans une zone de texte. Il est parfois contraignant d'avoir à saisir son département ou son pays dans les champs d'un formulaire.
Première partie :
Créer la page qui propose les différents choix.
Cette page s'ouvrira dans une fenêtre grâce à la commande window.open de notre future fonction.
Une fois que l'utilisateur aura fait son choix, elle affectera la valeur choisie à la zone de texte de notre formulaire et se fermera.
<html> <head> <META NAME="Author" CONTENT="Denis Blomme - DB77"> <script language="javascript"> function choisir(truc) // on affecte la valeur (.value) dans : // window.opener : la fenêtre appelante (celle qui a fait la demande) // .document : son contenu // .forms[0] : son premier formulaire // .w_choix : son champ appelé w_choix { window.opener.document.forms[0].w_choix.value = truc.options[truc.selectedIndex].value; // on se ferme self.close(); } </script> </head> <body> <form name="toto"> <select name="choix" onChange="choisir(this)"> <option value="">Choisissez</option> <option value="Ain">Ain</option> <option value="Aisne">Aisne</option> <option value="Allier">Allier</option> <!-- etc. --> </select> </form> </body> </html>
Deuxième partie :
Définir la fonction qui permettra d'ouvrir une fenêtre proposant notre liste déroulante.
Cette fonction sera déclarée entre les balises <head> et </head> de notre page.
<script language="javascript"> function popup(fic) // on ouvre dans une fenêtre le fichier passé en paramètre. // cette ouverture peut être améliorée en passant d'autres // paramètres que la taille et la position de la fenêtre. { window.open(fic,'Choisir','width=400,height=250,top=50,left=50'); } </script>
Troisième partie :
Créer, dans le formulaire, un lien qui permettra d'appeler notre fonction. Ainsi, l'utilisateur pourra soit saisir son texte dans la zone de saisie, soit cliquer sur le lien pour aller chercher l'information.
<form name="toto"> <a href="javascript:popup('choix.htm')">Département :</a><input type="text" name="w_choix"><br> <!-- Et on pourrait le faire aussi pour le pays --> <a href="javascript:popup('pays.htm')">Pays :</a><input type="text" name="w_pays"> </form>
A vos claviers... Et amusez-vous bien avec les pop-ups...
Boutique |
Sites |
Bar |
Forum |
PhpBB |
Actu |
Glossaire |
Codes |
Tips |
Liens |
Livres |
Lettre
