Formulaire dynamique ?

**kevdanone** · 01/02/2013, 09h37

Bonjour après avoir chercher sur le forum (vous me dirai surement que je n'ai pas assez chercher et pourtant) je sollicite directement votre aide. Je découvre a peine JavaScript donc je suis au niveau 0 on peux dire et on me demande de faire un formulaire dynamique.

Je précise, l'utilisateur sélectionne un élément dans une liste déroulante et suivant le choix un formulaire différent apparaît a l’écran, il fini en validant et les info sont envoyer a la bdd (ça je pense m'en occuper avec du php sauf si on peux faire des requêtes sql avec js ^^").

Donc si quelqu'un peux m'aider a faire ça avec une petite explication que je comprenne ce qu'il ce passe (j'en demande peux être trop mais j'aimerai apprendre au passage et non juste copier coller sans rien en retenir

) je vous remercie d'avance

(ps: je précise que si je n'ai pas pris le temps de suivre plusieurs tuto pour apprendre js c'est parce que je suis en stage et que ça viens de me tomber dessus d'un coup et je suis pris voir très pris par le temps

)

**Golgotha** · 01/02/2013, 10h02

Bonjour,

Une petite réponse en relation avec jQuery, tu aura peut être d'autre réponse en js pure.

Une liste, plusieurs Div qui contiendrons tes formulaires : En fonction du choix dans la liste on change la div qui est affiché, et donc le formulaire.

HTML

Code :

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

1
2
3
4
5
6
7
8
9
<select name="drop1" id="Select1">
    <option value="1">choix 1</option>
    <option value="2">choix 2</option>
    <option value="3">choix 3</option>
</select>
 
<div class="div" id="d1">Formulaire 1</div>
<div class="div" id="d2">Formulaire 2</div>
<div class="div" id="d3">Formulaire 3</div>

JS

Code :

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

1
2
3
4
5
6
7
8
9
10
$(".div").hide();
 
$("#Select1").change(function (select) {
 
    var index = $(this).val();
 
    $(".div").hide();
    $("#d" + index).show();
 
});

Exemple sur jsfiddle.

**kevdanone** · 01/02/2013, 10h07

merci

. je fais mes formulaire dans des pages différente en html avec cette méthode et ils sont appeler dynamiquement sans recharger la page ?

**kevdanone** · 01/02/2013, 10h14

je viens de regarder comment ça marche et ça semble être bon je vous retiens au courant après avoir tester encore merci

**kevdanone** · 01/02/2013, 14h38

je viens d’intégrer ce que tu ma donner a mon code et j'ai un problème la liste déroulante est bien la mais formulaire1, formulaire2 .... tout apparais en dessous de la liste et non en fonction du choix (je ne sais pas si ce que je viens de dire est très clair)
voici mon code si tu vois l'erreur:

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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<?php
session_start(); // On démarre la session AVANT toute chose
?>
<!DOCTYPE html>
<html>
<head>
	<!-- entête de la page --> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
	<title>nom de l'entreprise</title>
 
 
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection"/>		
	<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>	
	<script type="text/javascript" language="javascript" src="js/jquery.dropdownPlain.js"></script>
	<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
	<script type="text/javascript" language="javascript" src ="js/jquery.formulaire.js"></script>
	</head>
	<div id="global">
 
    	<div id="header">
        <img src="images/logo-entreprise.png" />
        	<h1 id="logo">Intranet <span class="bleu">nom</span><span class="noir">entreprise</span> medical</h1>
 
		</div><!-- fin div header-->
 
		<!-- création du menu déroulant -->
 
    	<div  id="menu">
                <ul class="dropdown">
 
                <!-- premier menu déroulant-->
                <li><a href="indexNomEntreprise.php" class="alignCenter">ACCEUIL</a></li>
				<li><a href="#" class="alignCenter">PRODUCTION</a>
 
                    <ul class="sub_menu">
                         <li><a href="Chrono_lot.php">Chrono lot</a></li>
 
                         <!-- création d'un sous menu  -->
                         <li>
                            <a href="creer_lot">Créer</a>
                            <ul>
                                <li><a href="#">un lot</a></li>
                                <li><a href="#">des étiquettes</a></li>
                            </ul>
                         </li>
                         <!-- fin du sous menu -->
 
                         <li>
                            <a href="#">Chrono</a>
                            <ul>
                                <li><a href="#">Chirurgiens</a></li>
                                <li><a href="#">Radiologues</a></li>
                                <li><a href="#">Matériel imagerie</a></li>
                                <li><a href="#">Clients</a></li>
                                <li><a href="#">Implants</a></li>
                                <li><a href="#">Fournisseurs</a></li>
                                <li><a href="#">Proto</a></li>
                            </ul>
                        </li>
                         <li><a href="#">à venir</a></li>
                         <li><a href="#">à venir</a></li>
                    </ul>
                </li>
                <!-- fin du premier menu -->
 
                <!-- deuxième menu déroulant -->
                <li><a href="#" class="alignCenter">PROJETS</a>
                    <ul class="sub_menu">
                        <li>
                            <a href="#">Redmine</a>
                            <ul>
                                <li><a href="#">Gestion des projets</a></li>
                                <li><a href="#">Gestion des DMP</a></li>
                                <li><a href="#">Gestion des MM</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <!-- fin du deuxième menu -->
 
                <!-- troisième menu déroulant -->
                <li><a href="#" class="alignCenter">SMQ</a>
                    <ul class="sub_menu">
                        <li>
                            <a href="#">CAPA</a>
                            <ul>
                                <li><a href="#">Chrono</a></li>
                                <li><a href="#">Créer une fiche</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">RC</a>
                            <ul>
                                <li><a href="#">Chrono</a></li>
                                <li><a href="#">Créer une fiche</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
				<li><a href="deconnexion.php" class="alignCenter">DECONNEXION [<?php echo $_SESSION['login'] ?>]</a></li>
                <!-- fin du troisième menu -->		
 
                </ul>
           </div>	
 
		<!-- fin des menu déroulant -->
 
		<div id="contenu02">
 
        	<div id="colonne_gauche">
            	        <center>
				<form method="post" action="#">
 
					<select name="drop1" id="Select1">
					<option value="1">employé</option>
					<option value="2">chirurgien</option>
					<option value="3">radiologue</option>
					<option value="4">contact fournisseur</option>
					<option value="5">contact fabricant</option>
					<option value="6">autre contact</option>
					</select>
 
					<div class="div" id="d1">Formulaire 1</div>
					<div class="div" id="d2">Formulaire 2</div>
					<div class="div" id="d3">Formulaire 3</div>
					<div class="div" id="d4">Formulaire 4</div>
					<div class="div" id="d5">Formulaire 5</div>
					<div class="div" id="d6">Formulaire 6</div>
 
					<tr align="center">
					<td></td>
					<td colspan="2" ><input type="submit" value="Création de la personne" /></td> <!-- bouton qui envoi vers le code de test -->
					</tr>
 
 
				</form>				
			</center> 
 
          	</div><!-- fin div colonne_gauche-->
		</div>
<body>
</body>
</html>