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>

(j'ai juste changer le nom de l'entreprise par nomdelentreprise pour ne pas donner le nom et eviter de me faire taper sur les doigts

)

**kevdanone** · 01/02/2013, 16h30

je pense être sur la bonne voix j'ai ajouter

Code :

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

.div{display: none ; }

dans mon css mais avec ca tout est cacher après peux importe le choix dans la liste déroulante

**Golgotha** · 01/02/2013, 16h36

Il est ou ton code javascript ?

**kevdanone** · 01/02/2013, 16h45

alors le javascript est dans un fichier appart que j'ai nommé jquery.formulaire.js

et dedans il y a le code que tu m'a donner:

Code :

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

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

et j'ai fais la même chose avec jquery-1.9.0

**Bovino** · 01/02/2013, 16h51

et j'ai fais la même chose avec jquery-1.9.0

Mais pourquoi vouloir charger deux versions de jQuery dont une complètement obsolète ?

**kevdanone** · 01/02/2013, 16h55

a vrai dire je ne sais pas en y reflechissant j'ai ajouter la version 1.3 car elle était fournis avec mon menu en jquery donc je pense que je peux la supprimer ^^"

**Golgotha** · 01/02/2013, 17h05

Pour commencer, comme dit Bovino, il faut garder une seule version de jQuery.

Ensuite mon code doit être englobé dans une fonction :

Code :

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

1
2
3
$( document ).ready(function() {
       //mon code ici
      });

enfin , change les classes des div qui contienne tes formulaires par "formulaire" plutôt, ça sera plus adapté.

<div class="formulaire" id="d1">Formulaire 1</div>
$(".formulaire").hide();

**Bovino** · 01/02/2013, 18h25

En fait, la version la plus souvent préconisée de

Code :

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

1
2
3
$( document ).ready(function() {
       //mon code ici
});

est plutôt

Code :

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

1
2
3
4
// Ici, $ peut être redéfini sans risque
jQuery(function($){
    // Ici, $ est réservé à la version jQuery de $
});

**kevdanone** · 04/02/2013, 09h25

je viens d'essayer ce que tu a préconisé bovino mais ça ne marche pas donc j'ai tester ce qu'a mis Golgotha et la ça fonctionne merci ^^.

Le fait que t'a méthode n'est pas fonctionner m'intrigue un peu surtout si tu dit que c'est ce qui est recommander

Formulaire dynamique ?

JavaScript

Discussions similaires

Partager

Partager