Formulaire nombres de champs variables

**Al4n62** · 07/05/2009, 09h50

Bonjour, je souhaite créer un formulaire aux nombres de champs variables, après un travail de recherche j'obtiens ceci :

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<html>
   <head>
      <title>Utilisation du dom</title>
      <script type="text/javascript">
         var compteur = 0;
         function ajouter(value){
            // On récupère le fieldset
            var conteneur   = document.getElementById('fichiers');
            /**
            * Création des éléments dont on a besoin :
            * Un div dans lequel on mettra notre champ file et une case à cocher
            * qui nous servira à enlever ensuite le div.
            *
            * En utilisant un div ça sera plus facile car sinon
            * on aurais du enlever le champ file et la case à cocher séparément.
            */
            var undiv      = document.createElement('div');
            var fich      = document.createElement('input');
            var check      = document.createElement('input');
 
            fich.name   = 'mesfichiers_'+compteur;
            fich.type   = 'text';
			fich.value = value; //valeur par defaut dans les champs
 
            check.type   = 'checkbox';
 
            // On enlève sur le click de la checkbox
            check.onclick = function(){
               // Elément à enlever
               lediv      = this.parentNode;
               // Elément auquel on enlève
               lefieldset   = lediv.parentNode;
               // On enlève !
               lefieldset.removeChild(lediv);
            }
 
            /**
            * Ajout des éléments au div grace a appendChild
            * qui ajoute à la fin.
            * On utilise aussi createTextNode pour ajouter du texte apres la case
            */
            undiv.appendChild(fich);
            undiv.appendChild(check);
            undiv.appendChild(document.createTextNode("Supp"));
 
            // Ajout du div :
            conteneur.appendChild(undiv);
			compteur++;
			document.getElementById('hidden_field').value = compteur;
         }
 
		 function init(){
		     //onsubmit="init()"
		//	var compteur = <?php if (isset($_POST['compteur'])) {echo $_POST['compteur'];} else {echo "0";}?>;
		//	alert(compteur);
			/*var compteur = <?php if (isset($_POST['compteur'])){echo $_POST['compteur'];} else { echo "0"; }?>;
			<?php $cpt = 0; ?>
			for (var i = 0; i <  compteur ; i++){
				//ajouter(<?php echo $_POST['mesfichiers_'.$cpt]; ?>);
				alert(compteur);
				<?php $cpt++; ?>
			}*/
		 }
      </script>
   </head>
   <body>
 
      <form action='./nous-contacter' method='post' enctype='multipart/form-data' >
         <fieldset id='fichiers'>
            <legend>Fichiers</legend>
			<?php if(isset($_POST['compteur'])){
                    for($i=0;$i<$_POST['compteur'];$i++){
                                //appeler la fonction JS avec comme parametre les valeurs des fichiers déjà passé en post  (mesfichiers_0, mesfichiers_1...)
                                }
                        }
                        ?>
            <input type='button' value='Ajouter un fichier' onclick='ajouter("")' /><br />
			<input type="hidden" name="compteur" value="0" id="hidden_field" />			
         </fieldset>
		 <input id="bouton_envoyer" type="submit" value="Envoyer" />
	  </form>
 
   </body>
</html>

DU point de vue utilisateur je voudrais qu'on puisse remplir entre 1-50 champs (de façon dynamique), les supprimer, puis après validation (je vais check les données) pouvoir modifier, ajouter ou supprimer des champs puis re-valider (re-check..) jusqu'au clic sur un bouton envoyer.

Merci pour votre aide !

Alan