|
@@ -105,7 +105,8 @@ function generateForm(id) {
|
105
|
105
|
var status = document.createElement('p');
|
106
|
106
|
status.setAttribute('id', 'form_status');
|
107
|
107
|
el.appendChild(status);
|
108
|
|
-
|
|
108
|
+
|
|
109
|
+ // Default fields
|
109
|
110
|
DOMFields = {
|
110
|
111
|
name: getField({
|
111
|
112
|
name: items.name,
|
|
@@ -130,35 +131,36 @@ function generateForm(id) {
|
130
|
131
|
};
|
131
|
132
|
|
132
|
133
|
// Adding custom fields
|
133
|
|
-
|
134
|
134
|
for(let fieldName in customFields) {
|
135
|
135
|
let field = customFields[fieldName];
|
136
|
136
|
DOMFields[fieldName] = getField(field, NOT_REQUIRED);
|
137
|
137
|
}
|
138
|
138
|
|
139
|
|
- // Adding nodes to document
|
140
|
|
-
|
|
139
|
+ // Adding all nodes to document
|
141
|
140
|
for(let field in DOMFields) {
|
142
|
141
|
el.appendChild(DOMFields[field]);
|
143
|
142
|
}
|
144
|
143
|
|
145
|
144
|
// Adding submit button
|
146
|
|
-
|
147
|
145
|
el.appendChild(getSubmitButton('form_subm', lang.form_subm_label));
|
148
|
146
|
|
149
|
147
|
// Retrieve the token from the server
|
150
|
|
-
|
151
|
148
|
getToken();
|
152
|
149
|
}
|
153
|
150
|
|
154
|
151
|
|
|
152
|
+// Get the HTML element for a given field
|
|
153
|
+// fieldInfos: object describing the field
|
|
154
|
+// required: boolean on whether the field is required or optional
|
|
155
|
+// return: a block containing the field and a label describing it (if enabled)
|
155
|
156
|
function getField(fieldInfos, required) {
|
156
|
157
|
var block = document.createElement('div');
|
157
|
|
-
|
158
|
158
|
block.setAttribute('id', fieldInfos.name);
|
159
|
|
-
|
|
159
|
+
|
|
160
|
+ // Declare the variable first
|
160
|
161
|
let field = {};
|
161
|
|
-
|
|
162
|
+
|
|
163
|
+ // Easily add new supported input types
|
162
|
164
|
switch(fieldInfos.type) {
|
163
|
165
|
case 'text': field = getTextField(fieldInfos, required);
|
164
|
166
|
break;
|
|
@@ -170,12 +172,14 @@ function getField(fieldInfos, required) {
|
170
|
172
|
break;
|
171
|
173
|
}
|
172
|
174
|
|
|
175
|
+ // We need the input field's ID to bind it to the label, so we generate the
|
|
176
|
+ // field first
|
173
|
177
|
if(labels) {
|
174
|
178
|
block.appendChild(getLabel(fieldInfos.label, field.id));
|
175
|
179
|
}
|
176
|
|
-
|
177
|
|
- block.appendChild(field);
|
178
|
180
|
|
|
181
|
+ // Assemble the block and return it
|
|
182
|
+ block.appendChild(field);
|
179
|
183
|
return block;
|
180
|
184
|
}
|
181
|
185
|
|
|
@@ -194,9 +198,14 @@ function getLabel(content, id) {
|
194
|
198
|
}
|
195
|
199
|
|
196
|
200
|
|
|
201
|
+// Returns a <select> HTML element
|
|
202
|
+// fieldInfos: object describing the field
|
|
203
|
+// required: boolean on whether the field is required or optional
|
|
204
|
+// return: a <select> element corresponding to the info passed as input
|
197
|
205
|
function getSelectField(fieldInfos, required) {
|
198
|
206
|
let field = document.createElement('select');
|
199
|
207
|
|
|
208
|
+ // Set attributes when necessary
|
200
|
209
|
if(required) {
|
201
|
210
|
field.setAttribute('required', 'required');
|
202
|
211
|
}
|
|
@@ -207,9 +216,12 @@ function getSelectField(fieldInfos, required) {
|
207
|
216
|
// Add all options to select
|
208
|
217
|
for(let choice of fieldInfos.options) {
|
209
|
218
|
let option = document.createElement('option');
|
|
219
|
+ // Options' values are incremental numeric indexes
|
210
|
220
|
option.setAttribute('value', index);
|
|
221
|
+ // Set the value defined by the user
|
211
|
222
|
option.innerHTML = choice;
|
212
|
223
|
field.appendChild(option);
|
|
224
|
+ // Increment the index
|
213
|
225
|
index++;
|
214
|
226
|
}
|
215
|
227
|
|
|
@@ -217,16 +229,29 @@ function getSelectField(fieldInfos, required) {
|
217
|
229
|
}
|
218
|
230
|
|
219
|
231
|
|
|
232
|
+// Returns a <input> HTML element with 'text' type
|
|
233
|
+// fieldInfos: object describing the field
|
|
234
|
+// required: boolean on whether the field is required or optional
|
|
235
|
+// return: a <input> HTML element corresponding to the info passed as input
|
220
|
236
|
function getTextField(fieldInfos, required) {
|
221
|
237
|
return getBaseInputField(fieldInfos, required, 'text');
|
222
|
238
|
}
|
223
|
239
|
|
224
|
240
|
|
|
241
|
+// Returns a <input> HTML element with 'email' type
|
|
242
|
+// fieldInfos: object describing the field
|
|
243
|
+// required: boolean on whether the field is required or optional
|
|
244
|
+// return: a <input> HTML element corresponding to the info passed as input
|
225
|
245
|
function getEmailField(fieldInfos, required) {
|
226
|
246
|
return getBaseInputField(fieldInfos, required, 'email');
|
227
|
247
|
}
|
228
|
248
|
|
229
|
249
|
|
|
250
|
+// Returns a basic <input> HTML element with generic info to be processed by
|
|
251
|
+// functions at higher level
|
|
252
|
+// fieldInfos: object describing the field
|
|
253
|
+// required: boolean on whether the field is required or optional
|
|
254
|
+// return: a basic <input> HTML element with generic info
|
230
|
255
|
function getBaseInputField(fieldInfos, required, type) {
|
231
|
256
|
let field = getBaseField(fieldInfos, required, 'input')
|
232
|
257
|
field.setAttribute('type', type);
|
|
@@ -234,11 +259,21 @@ function getBaseInputField(fieldInfos, required, type) {
|
234
|
259
|
}
|
235
|
260
|
|
236
|
261
|
|
|
262
|
+// Returns a <textarea> HTML element
|
|
263
|
+// fieldInfos: object describing the field
|
|
264
|
+// required: boolean on whether the field is required or optional
|
|
265
|
+// return: a <textarea> element corresponding to the info passed as input
|
237
|
266
|
function getTextarea(fieldInfos, required) {
|
238
|
267
|
return getBaseField(fieldInfos, required, 'textarea');
|
239
|
268
|
}
|
240
|
269
|
|
241
|
270
|
|
|
271
|
+// Returns a base HTML element with generic info to be processed by functions at
|
|
272
|
+// higher level
|
|
273
|
+// fieldInfos: object describing the field
|
|
274
|
+// required: boolean on whether the field is required or optional
|
|
275
|
+// tag: the HTML tag the field element must have
|
|
276
|
+// return: a HTML element of the given tag with basic info given as input
|
242
|
277
|
function getBaseField(fieldInfos, required, tag) {
|
243
|
278
|
let field = document.createElement(tag);
|
244
|
279
|
|