Comment réaliser un bouton qui affichera un formulaire

Version imprimable

02/04/2015, 14h42
geeka

Comment réaliser un bouton qui affichera un formulaire

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
02/04/2015, 15h55
-Rpass-

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
02/04/2015, 16h08
geeka

Merci beaucoup pour votre réponse!

Citation:

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.

Citation:

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 :D
02/04/2015, 16h23
geeka

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

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

Merci Tiramus.
Voici le code du formulaire :

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

02/04/2015, 17h18
Christophe P.
Citation:
Envoyé par geeka

Merci Tiramus.
Voici le code du formulaire :

Code:

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.

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:

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>

03/04/2015, 09h18
geeka

@christophe
Justement, je l'ai laissé comme ça parce que je n'ai aucune idée de comment faire ^^
@ TiranusKBX
Merci beaucoup !! Je vais l'essayer :D
07/04/2015, 13h11
geeka

@Tiranus
J'ai un problème avec votre solution, c'est que le bouton ajouter ne marche pas :(
Après, il faut enlever les commentaires à la ligne 108.
07/04/2015, 13h51
TiranusKBX

oui il faudrait coller la ligne 109 à la fin de la 108 je dirait
il faut croire que c'est mal passé sur le forum de mettre un tel bloc