|
@@ -7,11 +7,6 @@ var items = {
|
7
|
7
|
|
8
|
8
|
var server = getServer();
|
9
|
9
|
var xhrSend = new XMLHttpRequest();
|
10
|
|
-xhrSend.onreadystatechange = function() {
|
11
|
|
- if (xhrSend.readyState == XMLHttpRequest.DONE) {
|
12
|
|
- console.log(xhrSend.response);
|
13
|
|
- }
|
14
|
|
-};
|
15
|
10
|
|
16
|
11
|
|
17
|
12
|
// Returns the server's base URI based on the user's script tag
|
|
@@ -42,6 +37,11 @@ function generateForm(id) {
|
42
|
37
|
// Set the form's behaviour
|
43
|
38
|
el.setAttribute('onsubmit', 'sendForm(); return false;');
|
44
|
39
|
|
|
40
|
+ // Add an empty paragraph for status
|
|
41
|
+ var status = document.createElement('p');
|
|
42
|
+ status.setAttribute('id', 'form_status');
|
|
43
|
+ el.appendChild(status);
|
|
44
|
+
|
45
|
45
|
var input = {
|
46
|
46
|
name: getField(items.name, 'Your name', false, 'input'), // TODO: configurable prefix
|
47
|
47
|
addr: getField(items.addr, 'Your e-mail address', true, 'input'),
|
|
@@ -59,6 +59,23 @@ function generateForm(id) {
|
59
|
59
|
// Adding submit button
|
60
|
60
|
|
61
|
61
|
el.appendChild(getSubmitButton('form_subm', 'Send the mail'));
|
|
62
|
+
|
|
63
|
+ // Setting the XHR callback
|
|
64
|
+
|
|
65
|
+ xhrSend.onreadystatechange = function() {
|
|
66
|
+ if(xhrSend.readyState == XMLHttpRequest.DONE) {
|
|
67
|
+ let status = document.getElementById('form_status');
|
|
68
|
+ status.setAttribute('class', '');
|
|
69
|
+ if(xhrSend.status === 200) {
|
|
70
|
+ cleanForm();
|
|
71
|
+ status.setAttribute('class', 'success');
|
|
72
|
+ status.innerHTML = 'Your message has been sent.';
|
|
73
|
+ } else {
|
|
74
|
+ status.setAttribute('class', 'failure');
|
|
75
|
+ status.innerHTML = 'An error happened while sending your message, please retry later.';
|
|
76
|
+ }
|
|
77
|
+ }
|
|
78
|
+ };
|
62
|
79
|
}
|
63
|
80
|
|
64
|
81
|
|
|
@@ -147,6 +164,11 @@ function getSubmitButton(id, text) {
|
147
|
164
|
// Send form data through the XHR object
|
148
|
165
|
// return: nothing
|
149
|
166
|
function sendForm() {
|
|
167
|
+ // Clear status
|
|
168
|
+ let status = document.getElementById('form_status');
|
|
169
|
+ status.setAttribute('class', 'sending');
|
|
170
|
+ status.innerHTML = 'Sending the e-mail';
|
|
171
|
+
|
150
|
172
|
xhrSend.open('POST', server + '/send');
|
151
|
173
|
xhrSend.setRequestHeader('Content-Type', 'application/json');
|
152
|
174
|
xhrSend.send(JSON.stringify(getFormData()));
|
|
@@ -162,4 +184,14 @@ function getFormData() {
|
162
|
184
|
subj: document.getElementById(items.subj + '_input').value,
|
163
|
185
|
text: document.getElementById(items.text + '_textarea').value
|
164
|
186
|
}
|
|
187
|
+}
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+// Empties the form fields
|
|
191
|
+// return: nothing
|
|
192
|
+function cleanForm() {
|
|
193
|
+ document.getElementById(items.name + '_input').value = '';
|
|
194
|
+ document.getElementById(items.addr + '_input').value = '';
|
|
195
|
+ document.getElementById(items.subj + '_input').value = '';
|
|
196
|
+ document.getElementById(items.text + '_textarea').value = '';
|
165
|
197
|
}
|