UI Dialog form+plusieurs "pages"

**mfredok** · 21/10/2010, 22h12

Bonsoir à tous,

Je suis en train de m'escrimer avec UI DIALOG form pour juste remplacer le contenu de la DIV par une autre DIV par validation du bouton submit par défaut..
tout ceci sur 5 "pages".

j'ai essayé plusieurs methodes, cela fonctionne a peu pres avec des scripts de pagination mais bien loin de ce que je souhaite. car impossible de me servir du boutn "submit" par défaut(appelé ici "continuer")
en bref , pouvoir remplacer chaque div precedante par une nouvelle en validant le formulaire de la boite de dialog.

Merci à tous pour votre aide.

**Arnaud F.** · 21/10/2010, 22h17

Bonjour,

avez-vous un bout de code en exemple nous montrant ce que vous souhaitez faire?

**mfredok** · 21/10/2010, 22h29

Merci de cette réponse rapide, vous aviez aussi trouvé la solution à mon pb de ce matin...
voici le code qui est totalement inspiré de jensbits.com..
J'ai pû afficher une deuxieme boite en detruisant la premiere mais je prefere eviter ce fonctionnement pour les suivantes

le traitement devrait, je pense se faire apres mon test :

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
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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
 
if($("input[class='q1_case']:checked").val() !== undefined && $("input[class='q2_case']:checked").val() !== undefined){
 
//$( this ).dialog( "close" );
												//$.post("process_survey.php", $("#popup_survey").serialize());
 
 
-----------------------------------------------------------------
 
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.7.2.custom.css">
 
 
<script language="javascript"  type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script language="javascript"  type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
 
 
 
 
 
<script type="text/javascript" charset="utf-8">
$().ready( function () {
 
 
$(function() {
 
		$( "#survey_pres" ).dialog({
			resizable: false,
		    width: 700,
			modal: false,
			buttons: {
				"Je ne participe pas": function() {
					$( this ).dialog( "close" );
					//window.close();
				},
				"Je participe": function() {
					   //$( this ).dialog( "close" );
						$('#survey_pres').dialog('close');
 
					   //Boite dialogue FORM
						$(function() {		
									$( "#survey" ).dialog({
										resizable: false,
										width: 700,
										modal: true,
										buttons: {
											Continuer: function() {
											if($("input[class='q1_case']:checked").val() !== undefined && $("input[class='q2_case']:checked").val() !== undefined){
 
//$( this ).dialog( "close" );
												//$.post("process_survey.php", $("#popup_survey").serialize());
 
 
 
												}//FIN if
												else{
													$("#error_message").html("Merci de cocher au moins une case par question");
													}
 
											}
										  }
										});
 
 
									});	
					   //FIN Boite dialogue FORM
 
				}//FIN Bouton JE PARTICIPE 
			}//FIN Boutons 
 
		});//FIN dialog
	});	//FIN function 
});//FIN document.ready 
 
 
 
</script>
<!--if you copy source, please delete the Google Analytics tracking code before posting on your server.	-->
 
 
</head>
 
<body>
<h1>y'a BI ici</h1>
 
<div id="survey_pres" title="Enquête de satisfaction Bouygues-Immobilier">
 
 
 
						<p>Bonjour,</p>
						<p>Vous venez de visiter notre site web www.bouygues-immobilier.com.</p>
						<p>Afin de toujours mieux répondre à vos attentes, nous lançons une enquête de satisfaction. 
						Donnez-nous votre avis et aidez-nous à améliorer notre service et la présentation de nos produits !
						Cela vous prendra moins de 5 minutes. Pour répondre, cliquez sur «*Je participe*».</p>
 
 
 
						<p>Merci de votre contribution !</p>
 
</div>
 
<div id="survey" title="Enquête de satisfaction Bouygues-Immobilier" style="display:none;">	
	      <span id="error_message"></span> <span id="q_page">1/5</span>
 
			<form id="popup_survey" name="popup_survey" method="post">
				<input type="hidden" name="iduser">
				<input type="hidden" name="ip" value="<?php echo $_SERVER['REMOTE_ADDR']; ?>">
 
 
 
					<div class="q_container">
 
 
					        <h4>Comment avez-vous connu le site <a href="http://www.bouygues-immobilier.com" target="_blank">www.bouygues-immobilier.com</a> ? <span class="q_texte">(Plusieurs réponses possibles)</span></h4>
 
	                        <div class="q_reponse"><input type="checkbox" class="q1_case" name="q1_reponse1"  id="q1_reponse1" value ="1"/><label for="q1_reponse1">Je connaissais l'entreprise et l'adresse du site</label></div>	
							<div class="q_reponse"><input type="checkbox" class="q1_case" name="q1_reponse2"  id="q1_reponse2" value ="1"/><label for="q1_reponse2">Par un e-mail que j'ai reçu</label></div>	
							<div class="q_reponse"><input type="checkbox" class="q1_case" name="q1_reponse3"  id="q1_reponse3" value ="1"/><label for="q1_reponse3">Par le conseil d'un proche</label></div>	
						    <div class="q_reponse"><input type="checkbox" class="q1_case" name="q1_reponse4"  id="q1_reponse4" value ="1"/><label for="q1_reponse4">Par une publicité TV/radio/presse/affichage</label></div>
						    <div class="q_reponse"><input type="checkbox" class="q1_case" name="q1_reponse5"  id="q1_reponse5" value ="1"/><label for="q1_reponse5">Par internet</label></div>
 
							<div class="q1_show"><div class="q_reponse"><input type="checkbox" class="q1_case" name="q1_reponse51" id="q1_reponse51" value ="1"/><label for="q1_reponse3">Par un moteur de recherche</label></div></div>	
							<div class="q1_show"><div class="q_reponse"><input type="checkbox" class="q1_case" name="q1_reponse52" id="q1_reponse52" value ="1"/><label for="q1_reponse3">Par un lien sur un autre site. <span class="q_texte">Merci de préciser :</span> </label><input type="text" class="q_texte" name="q1_preciser52" size="35"/></div></div>	
							<div class="q1_show"><div class="q_reponse"><input type="checkbox" class="q1_case" name="q1_reponse53" id="q1_reponse53" value ="1"/><label for="q1_reponse3">Par une bannière publicitaire</label></div></div>	
 
							<div class="q_reponse"><input type="checkbox" class="q1_case"  name="q1_reponse54" id="q1_reponse54" value ="1"/><label for="q1_reponse54">Par un reseau social. <span class="q_texte">Merci de préciser :</span> </label><input type="text" class="q_texte" name="q1_preciser54" size="50"/></div>
							<div class="q_reponse"><input type="checkbox" class="q1_case"  name="q1_reponse6"  id="q1_reponse6" value ="1"/><label for="q1_reponse6">Autre. <span class="q_texte">Merci de préciser :</span> </label><input type="text" class="q_texte" name="q1_autre" size="50"/></div>	
 
 
 
 
							<h4>Pour quelles raisons êtes-vous venu(e) aujourd'hui sur le site <a href="http://www.bouygues-immobilier.com" target="_blank">www.bouygues-immobilier.com</a> ? <span class="q_texte">(Plusieurs réponses possibles)</span></h4>
 
							<div class="q_reponse"><input type="checkbox"  class="q2_case" name="q2_reponse1" id="q2_reponse1"/><label for="q2_reponse1">Pour trouver des informations sur l'entreprise</label></div>	 						
							<div class="q_reponse"><input type="checkbox"  class="q2_case" name="q2_reponse2" id="q2_reponse2"/><label for="q2_reponse2">Pour rechercher un logement</label></div>  								
						    <div class="q_reponse"><input type="checkbox"  class="q2_case" name="q2_reponse3" id="q2_reponse3"/><label for="q2_reponse3">Pour connaître les différentes aides de financement</label></div> 			
							<div class="q_reponse"><input type="checkbox"  class="q2_case" name="q2_reponse4" id="q2_reponse4"/><label for="q2_reponse4">Pour avoir des conseils sur l'acquisition de mon logement</label></div> 	
						    <div class="q_reponse"><input type="checkbox"  class="q2_case" name="q2_reponse5" id="q2_reponse5"/><label for="q2_reponse5">Pour utiliser les outils (simulateurs)</label></div> 						
							<div class="q_reponse"><input type="checkbox"  class="q2_case" name="q2_reponse6" id="q2_reponse6"/><label for="q2_reponse6">Pour m'inscrire à la newsletter</label></div>  							
							<div class="q_reponse"><input type="checkbox"  class="q2_case" name="q2_reponse7" id="q2_reponse7"/><label for="q2_reponse7">Pour entrer en contact avec Bouygues Immobilier</label></div> 			
						    <div class="q_reponse"><input type="checkbox"  class="q2_case" name="q2_reponse8" id="q2_reponse8"/><label for="q2_reponse8">Par hasard ou simple curiosité</label></div> 							
						    <div class="q_reponse"><input type="checkbox"  class="q2_case" name="q2_reponse9" id="q2_reponse9"/><label for="q2_reponse9">Autre. <span class="q_texte">Merci de préciser :</span> </label><input type="text" name="q2_autre" size="50"/></div> 
 
					</div>
		<div class="q_container2" style="display:none;">
 
 
					        <h4>p2 <span class="q_texte">(Plusieurs réponses possibles)</span></h4>
 
	                        <div class="q_reponse"><input type="checkbox" class="q1_case" name="q1_reponse1"  id="q1_reponse1" value ="1"/><label for="q1_reponse1">Je connaissais l'entreprise et l'adresse du site</label></div>	
							<div class="q_reponse"><input type="checkbox" class="q1_case" name="q1_reponse2"  id="q1_reponse2" value ="1"/><label for="q1_reponse2">Par un e-mail que j'ai reçu</label></div>	
							<div class="q_reponse"><input type="checkbox" class="q1_case" name="q1_reponse3"  id="q1_reponse3" value ="1"/><label for="q1_reponse3">Par le conseil d'un proche</label></div>	
						    <div class="q_reponse"><input type="checkbox" class="q1_case" name="q1_reponse4"  id="q1_reponse4" value ="1"/><label for="q1_reponse4">Par une publicité TV/radio/presse/affichage</label></div>
						    <div class="q_reponse"><input type="checkbox" class="q1_case" name="q1_reponse5"  id="q1_reponse5" value ="1"/><label for="q1_reponse5">Par internet</label></div>
 
							<div class="q1_show"><div class="q_reponse"><input type="checkbox" class="q1_case" name="q1_reponse51" id="q1_reponse51" value ="1"/><label for="q1_reponse3">Par un moteur de recherche</label></div></div>	
							<div class="q1_show"><div class="q_reponse"><input type="checkbox" class="q1_case" name="q1_reponse52" id="q1_reponse52" value ="1"/><label for="q1_reponse3">Par un lien sur un autre site. <span class="q_texte">Merci de préciser :</span> </label><input type="text" class="q_texte" name="q1_preciser52" size="35"/></div></div>	
							<div class="q1_show"><div class="q_reponse"><input type="checkbox" class="q1_case" name="q1_reponse53" id="q1_reponse53" value ="1"/><label for="q1_reponse3">Par une bannière publicitaire</label></div></div>	
 
							<div class="q_reponse"><input type="checkbox" class="q1_case"  name="q1_reponse54" id="q1_reponse54" value ="1"/><label for="q1_reponse54">Par un reseau social. <span class="q_texte">Merci de préciser :</span> </label><input type="text" class="q_texte" name="q1_preciser54" size="50"/></div>
							<div class="q_reponse"><input type="checkbox" class="q1_case"  name="q1_reponse6"  id="q1_reponse6" value ="1"/><label for="q1_reponse6">Autre. <span class="q_texte">Merci de préciser :</span> </label><input type="text" class="q_texte" name="q1_autre" size="50"/></div>	
 
 
 
 
							<h4>P2 <span class="q_texte">(Plusieurs réponses possibles)</span></h4>
 
							<div class="q_reponse"><input type="checkbox"  class="q2_case" name="q2_reponse1" id="q2_reponse1"/><label for="q2_reponse1">Pour trouver des informations sur l'entreprise</label></div>	 						
							<div class="q_reponse"><input type="checkbox"  class="q2_case" name="q2_reponse2" id="q2_reponse2"/><label for="q2_reponse2">Pour rechercher un logement</label></div>  								
						    <div class="q_reponse"><input type="checkbox"  class="q2_case" name="q2_reponse3" id="q2_reponse3"/><label for="q2_reponse3">Pour connaître les différentes aides de financement</label></div> 			
							<div class="q_reponse"><input type="checkbox"  class="q2_case" name="q2_reponse4" id="q2_reponse4"/><label for="q2_reponse4">Pour avoir des conseils sur l'acquisition de mon logement</label></div> 	
						    <div class="q_reponse"><input type="checkbox"  class="q2_case" name="q2_reponse5" id="q2_reponse5"/><label for="q2_reponse5">Pour utiliser les outils (simulateurs)</label></div> 						
							<div class="q_reponse"><input type="checkbox"  class="q2_case" name="q2_reponse6" id="q2_reponse6"/><label for="q2_reponse6">Pour m'inscrire à la newsletter</label></div>  							
							<div class="q_reponse"><input type="checkbox"  class="q2_case" name="q2_reponse7" id="q2_reponse7"/><label for="q2_reponse7">Pour entrer en contact avec Bouygues Immobilier</label></div> 			
						    <div class="q_reponse"><input type="checkbox"  class="q2_case" name="q2_reponse8" id="q2_reponse8"/><label for="q2_reponse8">Par hasard ou simple curiosité</label></div> 							
						    <div class="q_reponse"><input type="checkbox"  class="q2_case" name="q2_reponse9" id="q2_reponse9"/><label for="q2_reponse9">Autre. <span class="q_texte">Merci de préciser :</span> </label><input type="text" name="q2_autre" size="50"/></div> 
 
					</div>
			</form>
 
</div>
<script>

**mfredok** · 22/10/2010, 18h24

Merci, j'ai gardé la solution de fermer la boite de dialogue precedante et ouvrir la suivante

UI Dialog form+plusieurs "pages"

jQuery

Vue hybride

Discussions similaires

Partager

Partager