formulaire avec choix liste déroulante

**christophe_s46** · 11/05/2009, 09h59

bonjour,
je n'arrive pas à faire un formulaire avec une liste déroulante ou on peut choisir un chiffre entre 1,2,3 ou 4
si on choisit 1, il faudrait qu'en dessous s'affiche par exemple les champs nom1 prenom1 adresse1 etc...
si on choisit 2, il faudrait qu'en dessous s'affiche les champs nom1 prenom1 adresse1 et nom2 prenom2 adresse2 etc...
si on choisit 3, il faudrait qu'en dessous s'affiche par exemple nom1 prenom1 adresse1, nom2 prenom2 adresse2 et nom3 prenom3 adresse3 etc...
afin de choisir dans la liste déroulante le nombre de personne à inscrire et donc afficher en dessous les champs en fonction du nombre de personne à inscrire
Si quelqu'un peut m'aider,
merci

**emmanuel.remy** · 11/05/2009, 10h13

C'est une base, en espérant que cela te convienne, et il reste à compléter avec tes champs:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  </head>
  <body>
  <script type="text/javascript">
  function montrerPersonnes(n) {
     for (var i=1; i<=4; i++) {
         if (i<=n) {
            document.getElementById("personne"+i).style.display="block";
         } else {
            document.getElementById("personne"+i).style.display="none";
         }
     }
  }
  </script>
 
  <form>
 
  <select name="nb" onchange=" montrerPersonnes(this.value);">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
  <div style="display:block" id="personne1">
    Nom 1: <input type="text" name="nom1" />  
  </div>
  <div style="display:none" id="personne2">
    Nom 2: <input type="text" name="nom2" />  
  </div>
  <div style="display:none" id="personne3">
    Nom 3: <input type="text" name="nom3" />  
  </div>
  <div style="display:none" id="personne4">
    Nom 4: <input type="text" name="nom4" />  
  </div>
 
  </form>
  </body>
</html>

bon dev,

ERE

**andry.aime** · 11/05/2009, 10h15

Salut,
Utilise AJAX.

**franculo_caoulene** · 11/05/2009, 10h20

Envoyé par andry.aime

Salut,
Utilise AJAX.

Pourquoi?

**emmanuel.remy** · 11/05/2009, 10h22

@andry.aime: c'est uniquement un souci d'interface côté client et il n'y a rien à faire sur le server...

Donc il n'a pas besoin d'AJAX.

ERE

**christophe_s46** · 11/05/2009, 17h37

Bonjour,
merci ca marche très bien ! merci Emmanuel
C'est plus facile ou plus compliqué avec AJAX ?
Emmanuel, je pourrais te demander encore quelques infos ?

- Serait il possible de mettre en commentaire pour chaque ligne du script et l'action sur le formulaire pour que je puisse mieux comprendre?
- Je voudrais réécrire dans un champs le nombre qu'on indique dans la liste déroulante comme un copier collé du champ vers un autre
- et enfin

est il possible de récupérer cette meme valeur (de la liste déroulante) et la stocker dans une variable pour la manipuler dans une opération comme multiplication ou autre ?

Merci

**emmanuel.remy** · 11/05/2009, 20h22

Envoyé par christophe_s46

Bonjour,
merci ca marche très bien ! merci Emmanuel
C'est plus facile ou plus compliqué avec AJAX ?

Ajax est une autre techno qui permet d'interroger le server sans recharger la page côté client; tu n'en as pas besoin ici.

Emmanuel, je pourrais te demander encore quelques infos ?

- Serait il possible de mettre en commentaire pour chaque ligne du script et l'action sur le formulaire pour que je puisse mieux comprendre?

Attention, le code en rouge et le code en vert sont liés à tes questions suivantes

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  </head>
  <body>
  <script type="text/javascript">
  //le nombre de zones affichées
  var nbZones=1;
  /* la fonction chargée de montrer les zones de saisie
   * l'idée est que les zones sont initialement cachées et on les montre
   * quand c'est nécessaire
   * paramètre n: le nombre de zones à montrer
   */ 
  function montrerPersonnes(n) {
    //pour chacune des 4 zones 
    for (var i=1; i<=4; i++) {
     //si on doit montrer cette zone    
     //(son indice i est inférieur au nombre de zones à afficher)
     if (i<=n) {
            //on change le style CSS du display pour montrer
            //la ieme zone de saisie
            document.getElementById("personne"+i).style.display="block";
         } 
     //si non change le style CSS du display pour cacher
     //la ieme zone de saisie
     else {
            document.getElementById("personne"+i).style.display="none";
         }
     }
     //le nombre de champs
    document.getElementById("nb_champs").value = n;
    //ou:
    //document.formulaire.elements['nb_champs'].value = n;


   //on convertit la valeur chaine n en valeur entière
   nbZones = parseInt(n);
  }
  </script>
  
  <form name="formulaire">
  <input type="hidden" name="nb_champs" value="1" id="nb_champs" />
  <select name="nb" onchange=" montrerPersonnes(this.value);">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
  <div style="display:block" id="personne1">
    Nom 1: <input type="text" name="nom1" />  
  </div>
  <div style="display:none" id="personne2">
    Nom 2: <input type="text" name="nom2" />  
  </div>
  <div style="display:none" id="personne3">
    Nom 3: <input type="text" name="nom3" />  
  </div>
  <div style="display:none" id="personne4">
    Nom 4: <input type="text" name="nom4" />  
  </div>
 
  </form>
  </body>
</html>

- Je voudrais réécrire dans un champs le nombre qu'on indique dans la liste déroulante comme un copier collé du champ vers un autre

voir le code en rouge ci-dessus

- et enfin

est il possible de récupérer cette meme valeur (de la liste déroulante) et la stocker dans une variable pour la manipuler dans une opération comme multiplication ou autre ?

Tu peux y accéder par l'intermédiaire du champ du formulaire, mais sinon tu peux effectivement créer une variable associée: voir code en vert

Merci

Bon dev,

ERE

**christophe_s46** · 14/05/2009, 09h46

Bonjour,
Un autre petit renseignement, comment je dois faire pour afficher à l'écran la valeur de "nbZones" ? et peut on récupérer cette varialble de javascript vers PHP ?
Encore merci

**emmanuel.remy** · 14/05/2009, 13h02

Envoyé par christophe_s46

Bonjour,
Un autre petit renseignement, comment je dois faire pour afficher à l'écran la valeur de "nbZones" ? et peut on récupérer cette varialble de javascript vers PHP ?
Encore merci

Actuellement cette variable Javascript nbZones correspond aussi à celle-ci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

  <input type="hidden" name="nb_champs" value="1" id="nb_champs" />

Donc tu récupères côté PHP la "variable" nb_champs . Et si souhaites la voir afficher, change le type d'input en mettant une text ou crée une nouvelle balise (SPAN, DIV, ...) que tu remplis via un innerHTML. Par exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<div id="nbZones"></div>
 
...
 
//code javascript
function montrerPersonnes(n) {
...
document.getElementById("nb_champs").value = n;
document.getElementById("nbZones").innerHTML = n;
...
}

ERE

formulaire avec choix liste déroulante

JavaScript

Vue hybride

Discussions similaires

Partager

Partager