This repository has been archived by the owner on Nov 19, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 39
/
demo.html
158 lines (124 loc) · 6.2 KB
/
demo.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
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>ajax-form demo</title>
<script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="ajax-form.html">
<!--For nicer-looking dialogs - only used by the demo-->
<script src="demo_resources/alertify.min.js"></script>
<link rel="stylesheet" href="demo_resources/alertify.core.css" />
<link rel="stylesheet" href="demo_resources/alertify.default.css" />
<!--This is only used for mocking the HTTP requests since this demo does not have a server to handle requests.-->
<script src="demo_resources/sinon-server-1.10.2.js"></script>
<style>
.hidden {
display: none;
}
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
#pleaseWait {
text-align: center;
-webkit-animation: fadein 1s ease-in alternate infinite;
-moz-animation: fadein 1s ease-in alternate infinite;
animation: fadein 1s ease-in alternate infinite;
}
</style>
</head>
<body>
<h1><code>ajax-form</code> in action:</h1>
<p>See the code for this demo in the <a href="https://github.com/rnicholus/ajax-form/tree/gh-pages/components/ajax-form/demo.html">demo.html file</a>
of the <a href="https://github.com/rnicholus/ajax-form">ajax-form GitHub repository</a>.</p>
<h1 id="pleaseWait" class="hidden">Sending your data...</h1>
<div id="content">
<form is="ajax-form" action="test" method="post" enctype="multipart/form-data">
<div>
<label>Full Name: <input type="text" name="name" required></label>
</div>
<div>
<label>Address: <input type="text" name="address" required></label>
</div>
<div>
<label>Favorite color: <input type="text" name="color"></label>
</div>
<div>
<b>Receive periodic email updates from us?</b>
<input type="radio" name="emailCommunication" value="yes" checked>yes
<input type="radio" name="emailCommunication" value="no">no
<input type="checkbox" name="testcheck" value="testval">testcheck
</div>
<input type="submit">
</form>
<h3>Summary</h3>
<p>The above code includes a simple HTML form that identifies itself as an `ajax-form`.
As you can see, there are some standard form elements included that collect the user's
name, address, favorite color, and ask them if they'd like to be added to a mailing list.
The name and address fields are required for submission.</p>
<h3>Server Handling</h3>
<p>This form will result in a POST request with a URL-encoded payload to the "test" endpoint.</p>
<h3>Validation</h3>
<p>If required fields are not filled out when the user clicks "submit", an "invalid" event will
be triggered on the form (passing the invalid elements as event detail), and an alert will be
displayed to the user. Some browsers (not Safari) will also outline the offending fields in red.</p>
<p>If the form is able to be submitted and passes validation checks, a "submitted" event
will be triggered on the form, the form will be hidden, and a large "Sending your data..."
message will appear and fade in and out continuously until the form has been submitted.</p>
<p>Once the server has processed and responded to the form submit, a "submitted" event
will be triggered on the form and the "Sending your data..." message will disappear.
If submission was successful, a message will replace the form. If a problem
occurred, the form will re-appear and an alert will be displayed to the user.
In each case, the underlying `XMLHttpRequest` instance will be passed to the
"submitted" event handler as event detail.</p>
</div>
</body>
<script>
(function() {
var form = document.querySelectorAll('form')[0],
content = document.getElementById('content');
form.addEventListener('invalid', function() {
alertify.error('Some form fields are invalid!');
});
form.addEventListener('submitting', function(event) {
document.getElementById('pleaseWait').className = '';
content.className = 'hidden';
event.detail.raytest = 'foobar';
event.detail.color = 'blue';
});
form.addEventListener('submitted', function(event) {
document.getElementById('pleaseWait').className = 'hidden';
content.className = '';
if (event.detail.status > 299) {
alertify.error('Submission failed! Please try again.')
}
else {
content.innerHTML = 'Thanks! Your choices have been submitted!';
}
});
}());
</script>
<script>
// This code is only used to mock/intercept HTTP requests associated
// with the form submit. This is needed since the demo doesn't have
// a server to handle these requests.
(function() {
sinon.FakeXMLHttpRequest.useFilters = true;
sinon.FakeXMLHttpRequest.addFilter(function (method, url) {
return !(/test/).test(url);
});
var server = sinon.fakeServer.create();
server.respondWith([200, {}, '']);
server.autoRespond = true;
server.autoRespondAfter = 5000;
}());
</script>
</html>