Browse Source

Finished form generation

Brendan Abolivier 8 years ago
parent
commit
6e4c6277c2
1 changed files with 50 additions and 16 deletions
  1. 50
    16
      form.js

+ 50
- 16
form.js View File

2
     var el = document.getElementById(id);
2
     var el = document.getElementById(id);
3
     
3
     
4
     var input = {
4
     var input = {
5
-        name: getField('form_name', 'Your name', false), // TODO: configurable prefix
6
-        addr: getField('form_addr', 'Your e-mail address', true),
7
-        subj: getField('form_subj', 'Your mail\'s subject', false),
8
-        text: {}
5
+        name: getField('form_name', 'Your name', false, 'input'), // TODO: configurable prefix
6
+        addr: getField('form_addr', 'Your e-mail address', true, 'input'),
7
+        subj: getField('form_subj', 'Your message\'s subject', false, 'input'),
8
+        text: getField('form_text', 'Your message', false, 'textarea')
9
     };
9
     };
10
     
10
     
11
     // Adding nodes to document
11
     // Adding nodes to document
13
     el.appendChild(input.name);
13
     el.appendChild(input.name);
14
     el.appendChild(input.addr);
14
     el.appendChild(input.addr);
15
     el.appendChild(input.subj);
15
     el.appendChild(input.subj);
16
+    el.appendChild(input.text);
17
+    
18
+    // Adding submit button
19
+    
20
+    el.appendChild(getSubmitButton('form_subm', 'Send the mail'));
16
 }
21
 }
17
 
22
 
18
 
23
 
20
 // id: field HTML identifier
25
 // id: field HTML identifier
21
 // placeholder: placeholder text
26
 // placeholder: placeholder text
22
 // email: boolean: is it an email field?
27
 // email: boolean: is it an email field?
28
+// type: 'input' or 'textarea'
23
 // return: a div node containing a label and an input text field
29
 // return: a div node containing a label and an input text field
24
-function getField(id, placeholder, email) {
30
+function getField(id, placeholder, email, type) {
25
     var field = document.createElement('div');
31
     var field = document.createElement('div');
26
     
32
     
27
     field.setAttribute('id', id); // TODO: configurable prefix
33
     field.setAttribute('id', id); // TODO: configurable prefix
28
-    field.appendChild(getLabel(id, placeholder));
29
-    field.appendChild(getInputField(id, placeholder, email));
34
+    field.appendChild(getLabel(id, placeholder, type));
35
+    field.appendChild(getInputField(id, placeholder, email, type));
30
     
36
     
31
     return field;
37
     return field;
32
 }
38
 }
35
 // Returns a label
41
 // Returns a label
36
 // id: field HTML identifier
42
 // id: field HTML identifier
37
 // content: label's inner content
43
 // content: label's inner content
44
+// type: 'input' or 'textarea'
38
 // return: a label node the field's description
45
 // return: a label node the field's description
39
-function getLabel(id, content) {
46
+function getLabel(id, content, type) {
40
     var label = document.createElement('label');
47
     var label = document.createElement('label');
41
     
48
     
42
-    label.setAttribute('for', id + '_input');
49
+    label.setAttribute('for', id + '_' + type);
43
     label.innerHTML = content;
50
     label.innerHTML = content;
44
     
51
     
45
     return label;
52
     return label;
50
 // id: field HTML identifier
57
 // id: field HTML identifier
51
 // placeholder: placeholder text, field description
58
 // placeholder: placeholder text, field description
52
 // email: boolean: is it an email field?
59
 // email: boolean: is it an email field?
60
+// type: 'input' or 'textarea'
53
 // return: an input text or email field (depending on "email"'s value') with an
61
 // return: an input text or email field (depending on "email"'s value') with an
54
 //         HTML id and a placeholder text
62
 //         HTML id and a placeholder text
55
-function getInputField(id, placeholder, email) {
56
-    var input = document.createElement('input');
63
+function getInputField(id, placeholder, email, type) {
64
+    var input = document.createElement(type);
57
     
65
     
58
-    if(email) {
59
-        input.setAttribute('type', 'mail');
60
-    } else {
61
-        input.setAttribute('type', 'text');
66
+    if(!type.localeCompare('input')) { // Set input type if input
67
+        if(email) {
68
+            input.setAttribute('type', 'mail');
69
+        } else {
70
+            input.setAttribute('type', 'text');
71
+        }
62
     }
72
     }
63
     
73
     
64
     input.setAttribute('required', 'required');
74
     input.setAttribute('required', 'required');
65
     input.setAttribute('placeholder', placeholder);
75
     input.setAttribute('placeholder', placeholder);
66
-    input.setAttribute('id', id + '_input');
76
+    input.setAttribute('id', id + '_' + type);
67
     
77
     
68
     return input;
78
     return input;
79
+}
80
+
81
+
82
+// Returns a submit button
83
+// id: button HTML identifier
84
+// text: button text
85
+// return: a div node containing the button
86
+function getSubmitButton(id, text) {
87
+    var submit = document.createElement('div');
88
+    
89
+    submit.setAttribute('id', id);
90
+    
91
+    var button = document.createElement('button');
92
+    
93
+    button.setAttribute('type', 'submit');
94
+    button.setAttribute('id', id);
95
+    // Disable button's default action
96
+    button.setAttribute('onSubmit', 'return false;');
97
+    
98
+    button.innerHTML = text;
99
+    
100
+    submit.appendChild(button);
101
+    
102
+    return submit;
69
 }
103
 }