Comment réaliser un bouton qui affichera un formulaire

**geeka** · 02/04/2015, 14h42

Bonjour,
J'ai un formulaire classique d'inscription, contenant un nom, prénom ...etc. Et, je souhaiterais ajouter à ce formulaire un bouton "Ajouter" qui va dérouler les champs du formulaire afin d'inscrire une nouvelle personne. Dans ce cas, je pourrais inscrire autant de personne que je souhaite dans le formulaire en cliquant simplement sur le bouton "ajouter" qui va me permettre d'écrire dans les champs.
Le problème c'est que je ne sais pas quel langage utiliser, si ça peut se faire avec du javascript ou autre ?
Peut-être avez-vous une meilleure idée

Merci

**-Rpass-** · 02/04/2015, 15h55

Le JavaScript va te permettre de modifier dynamiquement l'affichage, c'est à dire dans ton cas :

-> Afficher les champs du formulaire au clique sur le bouton "Ajouter"

Ensuite ça dépend, est-ce que tu veux afficher plusieurs formulaire, par exemple les un en dessous des autres, et au clique sur valider ça enregistre tous les personnes et recharge la page ? Dans ce cas c'est un traitement PHP basique.

Sinon si tu veux que lorsque l'utilisateur clique sur ajouter et valide le formulaire la personne soit enregistrée en BDD sans recharger la page, donc de façon dynamique, alors tu dois te tourner vers l'AJAX

En espérant avoir été assez clair

**geeka** · 02/04/2015, 16h08

Merci beaucoup pour votre réponse!

Ensuite ça dépend, est-ce que tu veux afficher plusieurs formulaire, par exemple les un en dessous des autres, et au clique sur valider ça enregistre tous les personnes et recharge la page ? Dans ce cas c'est un traitement PHP basique.

Au fait, dans le formulaire, tous les champs seront initialement affichés pour l'ajout d'une seule personne. Et, pour ajouter une 2ème..Nième personnes
il faudra cliquer sur "ajouter"et un nouveau formulaire s'affiche en dessous. Et tout sera validé en même temps comme l'avez mentionné ici.

Sinon si tu veux que lorsque l'utilisateur clique sur ajouter et valide le formulaire la personne soit enregistrée en BDD sans recharger la page, donc de façon dynamique, alors tu dois te tourner vers l'AJAX

Merci pour cette proposition

**geeka** · 02/04/2015, 16h23

Mais si ça peut se faire en PHP, comment ?
est-ce que c'est le même processus que pour l'ajout de commentaires ?

**TiranusKBX** · 02/04/2015, 16h46

Pour t'aider pourrais tu nous donner une partie de ton code que nous puissions te faire un exemple pour que tu comprenne ?

**geeka** · 02/04/2015, 16h57

Merci Tiramus.
Voici le code du formulaire :

Code html :

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<div class="body">
    <form action="traitement_formulaire2.php" method="post" id="sky-form" class="sky-form">
	<header>Formulaire de saisie de la personne</header>
 
		<!--id struct-->
			<fieldset>
	                     <div class="row">
				<section class="col col-6">
					<label class="input">
					    <i class="icon-append fa fa-user"></i>
					    <input type="text" name="id_struct" id="id_struct" VALUE="<?php echo $donnees['typologie']; }?>" disabled="disabled">
					</label>
				</section>
			</div>
		</fieldset>
 
 
<!---------------Contact 1------------------------->					
		<fieldset>
			<div class="row">
					<!--Nom contact 1-->
						<section class="col col-6">
							<label class="input">
							      <i class="icon-append fa fa-user"></i>
							      <input type="text" name="nom_pers" id="nom_pers" placeholder="Nom ">
							</label>
						</section>
 
 
					<!--Prénom contact 1-->
						<section class="col col-6">
						     <label class="input">
							  <i class="icon-append fa fa-user"></i>
							   <input type="text" name="prenom_pers" id="prenom_pers" placeholder="Prénom ">
						      </label>
						</section>
			</div>
 
					<!--Fonction 1-->	
						<section>
							<label class="input">
								<input type="text" name="fct_pers" id="fct_pers" placeholder="Fonction ">
							</label>
							<i></i>
						</section>	
 
					<div class="row">
						<!--N° Mobile-->
							<section class="col col-6">
								<label class="input">
									<i class="icon-append fa fa-phone"></i>
									<input type="tel" name="tel_m" id="tel_m" placeholder="Téléphone mobile">
								</label>
							</section>
 
						<!--N° Domicile-->
							<section class="col col-6">
								<label class="input">
									<i class="icon-append fa fa-phone"></i>
									<input type="tel" name="tel_d" id="tel_d" placeholder="Téléphone domicile">
								</label>
							</section>
 
			                    </div>
			<div class="row">
						<!--N° Pro-->
							<section class="col col-6">
								<label class="input">
									<i class="icon-append fa fa-phone"></i>
										<input type="tel" name="tel_p" id="tel_p" placeholder="Téléphone bureau">
								</label>
							</section>
 
				</div>	
 
					<div class="row">
						<!--Mail-->
							<section class="col col-6">
								<label class="input">
									<i class="icon-append fa fa-envelope-o"></i>
										<input type="email" name="mail_pers" id="mail_pers" placeholder="Mail">
								</label>
							</section>
 
						<!--Fax-->
							<section class="col col-6">
								<label class="input">
									<i class="icon-append fa fa-phone"></i>
									<input type="tel" name="fax_pers" id="fax_pers" placeholder="Fax">
								</label>
							</section>	
					</div>
 
				<!--Description-->	
							<section>
							<label class="label">Description du contact</label>
							<label class="textarea">
								<i class="icon-append fa fa-comment"></i>
								<textarea rows="4" name="desc_pers" id="desc_pers"></textarea>
							</label>
						</section>		
				</fieldset>
			<fieldset>
<!---------------------Ajout d'un nouveau contact ----------------->
			<a href="">Ajouter</a>
			</fieldset>
			<footer>
					<button type="submit" class="button" name="valider">Valider</button></a>
					<a href="rlf2.php" class="button button-primary">Rechercher</a>
			</footer>

J'ai mis le lien "Ajouter" à la ligne 105 qui pour l'instant ne fait rien.

**Christophe P.** · 02/04/2015, 17h18

Envoyé par geeka

Merci Tiramus.
Voici le code du formulaire :

Code html :

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

1
2
3
...
			<a href="">Ajouter</a>
...

J'ai mis le lien "Ajouter" à la ligne 105 qui pour l'instant ne fait rien.

Il est normal que le lien ne fasse rien, c'est ce que vous lui avez demandé de faire.

**TiranusKBX** · 02/04/2015, 17h24

Côté client je verrais bien ce qui suit(même si c'est un peut bourrin ^^) mais à toi de faire la prise en compte pour les multiples contacts côté serveur

Code Html :

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<div class="body">
    <form action="traitement_formulaire2.php" method="post" id="sky-form" class="sky-form">
	<header>Formulaire de saisie de la personne</header>
 
		<!--id struct-->
			<fieldset>
	                     <div class="row">
				<section class="col col-6">
					<label class="input">
					    <i class="icon-append fa fa-user"></i>
					    <input type="text" name="id_struct" id="id_struct" VALUE="<?php echo $donnees['typologie']; }?>" disabled="disabled">
					</label>
				</section>
			</div>
		</fieldset>
 
 
<!---------------Contact 1------------------------->					
		<fieldset>
			<div class="row">
					<!--Nom contact 1-->
						<section class="col col-6">
							<label class="input">
							      <i class="icon-append fa fa-user"></i>
							      <input type="text" name="nom_pers_1" id="nom_pers_1" placeholder="Nom ">
							</label>
						</section>
 
 
					<!--Prénom contact 1-->
						<section class="col col-6">
						     <label class="input">
							  <i class="icon-append fa fa-user"></i>
							   <input type="text" name="prenom_pers_1" id="prenom_pers_1" placeholder="Prénom ">
						      </label>
						</section>
			</div>
 
					<!--Fonction 1-->	
						<section>
							<label class="input">
								<input type="text" name="fct_pers_1" id="fct_pers_1" placeholder="Fonction ">
							</label>
							<i></i>
						</section>	
 
					<div class="row">
						<!--N° Mobile-->
							<section class="col col-6">
								<label class="input">
									<i class="icon-append fa fa-phone"></i>
									<input type="tel" name="tel_m_1" id="tel_m_1" placeholder="Téléphone mobile">
								</label>
							</section>
 
						<!--N° Domicile-->
							<section class="col col-6">
								<label class="input">
									<i class="icon-append fa fa-phone"></i>
									<input type="tel" name="tel_d_1" id="tel_d_1" placeholder="Téléphone domicile">
								</label>
							</section>
 
			                    </div>
			<div class="row">
						<!--N° Pro-->
							<section class="col col-6">
								<label class="input">
									<i class="icon-append fa fa-phone"></i>
										<input type="tel" name="tel_p_1" id="tel_p_1" placeholder="Téléphone bureau">
								</label>
							</section>
 
				</div>	
 
					<div class="row">
						<!--Mail-->
							<section class="col col-6">
								<label class="input">
									<i class="icon-append fa fa-envelope-o"></i>
										<input type="email" name="mail_pers_1" id="mail_pers_1" placeholder="Mail">
								</label>
							</section>
 
						<!--Fax-->
							<section class="col col-6">
								<label class="input">
									<i class="icon-append fa fa-phone"></i>
									<input type="tel" name="fax_pers_1" id="fax_pers_1" placeholder="Fax">
								</label>
							</section>	
					</div>
 
				<!--Description-->	
							<section>
							<label class="label">Description du contact</label>
							<label class="textarea">
								<i class="icon-append fa fa-comment"></i>
								<textarea rows="4" name="desc_pers_1" id="desc_pers_1"></textarea>
							</label>
						</section>		
				</fieldset>
			<fieldset>
<!---------------------Ajout d'un nouveau contact ----------------->
			<input type="hidden" name="nb_contacts" id="nb_contacts" value="1">
			<div id="new_contacts_div"></div>
			<script>
                                var fieldTemplate = '<div class="row"><!--Nom contact 1--><section class="col col-6"><label class="input"><i class="icon-append fa fa-user"></i><input type="text" name="nom_pers_<X>" id="nom_pers_<X>" placeholder="Nom "></label></section><!--Prénom contact 1--><section class="col col-6"><label class="input"><i class="icon-append fa fa-user"></i><input type="text" name="prenom_pers_<X>" id="prenom_pers_<X>" placeholder="Prénom "></label></section></div><!--Fonction 1-->     <section><label class="input"><input type="text" name="fct_pers_<X>" id="fct_pers_<X>" placeholder="Fonction "></label><i></i></section>          <div class="row"><!--N° Mobile--><section class="col col-6"><label class="input"><i class="icon-append fa fa-phone"></i><input type="tel" name="tel_m_1" id="tel_m_1" placeholder="Téléphone mobile"></label></section><!--N° Domicile--><section class="col col-6"><label class="input"><i class="icon-append fa fa-phone"></i><input type="tel" name="tel_d_1" id="tel_d_1" placeholder="Téléphone domicile"></label></section></div><div class="row"><!--N° Pro--><section class="col col-6"><label class="input"><i class="icon-append fa fa-phone"></i><input type="tel" name="tel_p_1" id="tel_p_1" placeholder="Téléphone bureau"></label></section></div>      <div class="row"><!--Mail--><section class="col col-6"><label class="input"><i class="icon-append fa fa-envelope-o"></i><input type="email" name="mail_pers_<X>" id="mail_pers_<X>" placeholder="Mail"></label></section><!--Fax--><section class="col col-6"><label class="input"><i class="icon-append fa fa-phone"></i><input type="tel" name="fax_pers_<X>" id="fax_pers_<X>" placeholder="Fax"></label></section>        </div><!--Description-->        <section><label class="label">Description du contact</label><label class="textarea"><i class="icon-append fa fa-comment"></i><textarea rows="4" name="desc_pers_<X>" id="desc_pers_<X>"></textarea></label></section>';
                                var nbContacts = 1;
                                function newContact()
                                        {
                                        fieldset = document.createElement('fieldset');
                                        nbContacts = nbContacts + 1;
                                        fieldset.innerHTML = fieldTemplate.replace(nex RegExp('\<X\>','g'), nbContacts);
                                        document.getElementById('new_contacts_div').appendChild(fieldset);
                                        document.getElementById('nb_contacts').value=nbContacts;
                                        }
                        </script>
			<a onclick="newContact();">Ajouter</a>
			</fieldset>
			<footer>
					<button type="submit" class="button" name="valider">Valider</button></a>
					<a href="rlf2.php" class="button button-primary">Rechercher</a>
			</footer>