forked from thecodemine/formwizard
/
example_19_summary_page.html
219 lines (199 loc) · 8.56 KB
/
example_19_summary_page.html
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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JQuery Form Wizard</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" ></meta>
<link rel="stylesheet" type="text/css" href="./css/ui-lightness/jquery-ui-1.8.2.custom.css" />
<style type="text/css">
#demoWrapper {
padding : 1em;
width : 500px;
border-style: solid;
}
#demoNavigation {
margin-top : 0.5em;
margin-right : 1em;
text-align: right;
}
#data {
font-size : 0.7em;
}
input {
margin-right: 0.1em;
margin-bottom: 0.5em;
}
.input_field_25em {
width: 2.5em;
}
.input_field_3em {
width: 3em;
}
.input_field_35em {
width: 3.5em;
}
.input_field_12em {
width: 12em;
}
label {
margin-bottom: 0.2em;
font-weight: bold;
font-size: 0.8em;
}
.step span {
float: right;
font-weight: bold;
padding-right: 0.8em;
}
label.error {
color: red;
font-size: 0.8em;
margin-left : 0.5em;
}
.navigation_button {
width : 70px;
}
#data {
overflow : auto;
}
</style>
</head>
<body>
<div id="demoWrapper">
<h3>Example of a branching wizard with common summary page</h3>
<ul>
<li>Branching wizard with five steps.</li>
<li>Branching is decided depending on which country is selected.</li>
<li>The content (input and labels) of the steps are wrapped with div:s. The div:s have a class="input" set.</li>
<li>When the summary page is shown, the divs with class="input" are shown in the div with id="summaryContainer".</li>
<li>When moving back from the summary page, the div:s with class="input" are added back into their normal step.</li>
</ul>
<hr />
<h5 id="status"></h5>
<form id="demoForm" method="post" action="json.html" class="bbq">
<div id="fieldWrapper">
<div class="step" id="first">
<span class="font_normal_07em_black">Common first step - Name and Country</span><br />
<div class="input">
<label for="firstname">First name</label><br />
<input class="input_field_12em" name="firstname" id="firstname"><br />
<label for="surname">Surname</label><br />
<input class="input_field_12em" name="surname" id="surname"><br />
<label for="country">Country</label><br />
<select class="input_field_12em link required" name="country" id="country">
<option value=""></option>
<option value="sweden">Sweden</option>
<option value="finland">Finland</option>
</select><br />
</div>
</div>
<div id="sweden" class="step">
<span class="font_normal_07em_black">Swedish last step - Information</span><br />
<div class="input">
<label for="day_se">Social Security Number</label><br />
<input class="input_field_25em" name="day" id="day_se" value="DD">
<input class="input_field_25em" name="month" id="month_se" value="MM">
<input class="input_field_3em" name="year" id="year_se" value="YYYY"> -
<input class="input_field_3em" name="lastFour" id="lastFour_se" value="XXXX"><br />
<label for="countryPrefix_se">Phone number</label><br />
<input class="input_field_35em" name="countryPrefix" id="countryPrefix_se" value="+358"> -
<input class="input_field_3em" name="areaCode" id="areaCode_se"> -
<input class="input_field_12em" name="phoneNumber" id="phoneNumber_se"><br />
<label for="email_se">*Email</label><br />
<input class="input_field_12em required email" name="email" id="email_se"><br />
<label for="username_se">User name</label><br />
<input class="input_field_12em" name="username" id="username_se"><br />
<label for="password_se">Password</label><br />
<input class="input_field_12em" name="password" id="password_se" type="password"><br />
<label for="retypePassword_se">Retype password</label><br />
<input class="input_field_12em" name="retypePassword" id="retypePassword_se" type="password"><br />
<input type="hidden" class="link" value="summary" />
</div>
</div>
<div id="finland" class="step">
<span class="font_normal_07em_black">Finnish Step 2 - Personal information</span><br />
<div class="input">
<label for="day_fi">Social Security Number</label><br />
<input class="input_field_25em" name="day" id="day_fi" value="DD">
<input class="input_field_25em" name="month" id="month_fi" value="MM">
<input class="input_field_3em" name="year" id="year_fi" value="YYYY"> -
<input class="input_field_3em" name="lastFour" id="lastFour_fi" value="XXXX"><br />
<label for="countryPrefix_fi">Phone number</label><br />
<input class="input_field_35em" name="countryPrefix" id="countryPrefix_fi" value="+358"> -
<input class="input_field_3em" name="areaCode" id="areaCode_fi"> -
<input class="input_field_12em" name="phoneNumber" id="phoneNumber_fi"><br />
<label for="email_fi">*Email</label><br />
<input class="input_field_12em" name="email" id="email_fi"><br />
</div>
</div>
<div id="confirmation" class="step">
<span class="font_normal_07em_black">Finnish last step - Username</span><br />
<div class="input">
<label for="username">User name</label><br />
<input class="input_field_12em" name="username" id="username"><br />
<label for="password">Password</label><br />
<input class="input_field_12em" name="password" id="password" type="password"><br />
<label for="retypePassword">Retype password</label><br />
<input class="input_field_12em" name="retypePassword" id="retypePassword" type="password"><br />
</div>
</div>
<div id="summary" class="step">
<span class="font_normal_07em_black">Summary page</span><br />
<p>Please verify your information below.</p>
<div id="summaryContainer"></div>
</div>
</div>
<div id="demoNavigation">
<input class="navigation_button" id="back" value="Back" type="reset" />
<input class="navigation_button" id="next" value="Next" type="submit" />
</div>
</form>
<hr />
<p id="data"></p>
</div>
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../js/jquery.form.js"></script>
<script type="text/javascript" src="../js/jquery.validate.js"></script>
<script type="text/javascript" src="../js/bbq.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.8.5.custom.min.js"></script>
<script type="text/javascript" src="../js/jquery.form.wizard-3.0.4.js"></script>
<script type="text/javascript">
var cache = {}; // caching inputs for the visited steps
$("#demoForm").bind("step_shown", function(event,data){
if(data.isLastStep){ // if this is the last step...then
$("#summaryContainer").empty(); // empty the container holding the
$.each(data.activatedSteps, function(i, id){ // for each of the activated steps...do
if(id === "summary") return; // if it is the summary page then just return
cache[id] = $("#" + id).find(".input"); // else, find the div:s with class="input" and cache them with a key equal to the current step id
cache[id].detach().appendTo('#summaryContainer').show().find(":input").removeAttr("disabled"); // detach the cached inputs and append them to the summary container, also show and enable them
});
}else if(data.previousStep === "summary"){ // if we are movin back from the summary page
$.each(cache, function(id, inputs){ // for each of the keys in the cache...do
var i = inputs.detach().appendTo("#" + id).find(":input"); // put the input divs back into their normal step
if(id === data.currentStep){ // (we are moving back from the summary page so...) if enable inputs on the current step
i.removeAttr("disabled");
}else{ // disable the inputs on the rest of the steps
i.attr("disabled","disabled");
}
});
cache = {}; // empty the cache again
}
})
$(function(){
$("#demoForm").formwizard({
formPluginEnabled: true,
validationEnabled: true,
focusFirstInput : true,
formOptions :{
success: function(data){$("#status").fadeTo(500,1,function(){ $(this).html("You are now registered!").fadeTo(5000, 0); })},
beforeSubmit: function(data){$("#data").html("data sent to the server: " + $.param(data));},
dataType: 'json',
resetForm: true
}
}
);
});
</script>
</body>
</html>