formulaire avec choix liste déroulante

Version imprimable

11/05/2009, 09h59
christophe_s46

formulaire avec choix liste déroulante

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

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

Code:

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

11/05/2009, 10h15
andry.aime

Salut,
Utilise AJAX.
11/05/2009, 10h20
franculo_caoulene

Citation:

Envoyé par andry.aime

Salut,
Utilise AJAX.

Pourquoi?
11/05/2009, 10h22
emmanuel.remy

@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
11/05/2009, 17h37
christophe_s46

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

Citation:

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.

Citation:

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:

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>
Citation:

- 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

Citation:

- 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 ;)

Citation:

Merci

Bon dev,

ERE

14/05/2009, 09h46
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

Citation:

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:

<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:

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

15/05/2009, 16h34
christophe_s46
Bonjour,
J'ai quelques soucis 8O
J'essai de récupérer la valeur du champs en php, j'ai essayé ca:
Code:

1 2 3 4 5 <?php $valeur_champs = "<script>document.getElementById('nb').value = n;</script>"; echo $valeur_champs ; ?>
Mais je ne fais pas comme il faut
Merci
15/05/2009, 21h07
emmanuel.remy
Citation:
Envoyé par christophe_s46

Bonjour,
J'ai quelques soucis 8O
J'essai de récupérer la valeur du champs en php, j'ai essayé ca:

Code:

1 2 3 4 5 <?php $valeur_champs = "<script>document.getElementById('nb').value = n;</script>"; echo $valeur_champs ; ?>

Mais je ne fais pas comme il faut
Merci
Un conseil: un passage par une lecture de quelques minutes d'un petit tutoriel PHP ne serait pas de trop et te rendrait de grands services :roll:
Code:

1 2 3 4 5 6 7 8 9 <?php $a = $_POST["nom_du_champ_du_formulaire"]; //ou si method="GET" pour le formulaire //$a = $_GET["nom_du_champ_du_formulaire"]; echo $a ; ?>
ERE