瀏覽代碼

Finished form generation

Brendan Abolivier 8 年之前
父節點
當前提交
6e4c6277c2
共有 1 個檔案被更改,包括 50 行新增16 行删除
  1. 50
    16
      form.js

+ 50
- 16
form.js 查看文件

@@ -2,10 +2,10 @@ function generateForm(id) {
2 2
     var el = document.getElementById(id);
3 3
     
4 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 11
     // Adding nodes to document
@@ -13,6 +13,11 @@ function generateForm(id) {
13 13
     el.appendChild(input.name);
14 14
     el.appendChild(input.addr);
15 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,13 +25,14 @@ function generateForm(id) {
20 25
 // id: field HTML identifier
21 26
 // placeholder: placeholder text
22 27
 // email: boolean: is it an email field?
28
+// type: 'input' or 'textarea'
23 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 31
     var field = document.createElement('div');
26 32
     
27 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 37
     return field;
32 38
 }
@@ -35,11 +41,12 @@ function getField(id, placeholder, email) {
35 41
 // Returns a label
36 42
 // id: field HTML identifier
37 43
 // content: label's inner content
44
+// type: 'input' or 'textarea'
38 45
 // return: a label node the field's description
39
-function getLabel(id, content) {
46
+function getLabel(id, content, type) {
40 47
     var label = document.createElement('label');
41 48
     
42
-    label.setAttribute('for', id + '_input');
49
+    label.setAttribute('for', id + '_' + type);
43 50
     label.innerHTML = content;
44 51
     
45 52
     return label;
@@ -50,20 +57,47 @@ function getLabel(id, content) {
50 57
 // id: field HTML identifier
51 58
 // placeholder: placeholder text, field description
52 59
 // email: boolean: is it an email field?
60
+// type: 'input' or 'textarea'
53 61
 // return: an input text or email field (depending on "email"'s value') with an
54 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 74
     input.setAttribute('required', 'required');
65 75
     input.setAttribute('placeholder', placeholder);
66
-    input.setAttribute('id', id + '_input');
76
+    input.setAttribute('id', id + '_' + type);
67 77
     
68 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
 }