-
-
Notifications
You must be signed in to change notification settings - Fork 111
Expand file tree
/
Copy pathform.html
More file actions
63 lines (59 loc) · 1.67 KB
/
form.html
File metadata and controls
63 lines (59 loc) · 1.67 KB
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
<!doctype html>
<html>
<head>
<title>hyperHTML Basic Form Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body { }
input { display: block; margin: 8px 0; }
form { padding: 8px; }
</style>
</head>
<body></body>
<script src="../min.js"></script>
<script>
function update(render, state, evt) {
render`
<form action="?" method="GET" onsubmit="${evt.onsubmit}">
<input name="time" value="${(new Date).toLocaleString()}" disabled>
<input name="message" oninput="${evt.oninput}" autocomplete="off">
<input type="submit" disabled>
${state.message}
</form>
`;
}
var
// bind hyperHTML once
render = hyperHTML.bind(document.body),
// the current state
state = {
message: ''
},
// the handler helper
evt = {
// when the input changes
// update the state message
// and update the view
oninput: function (event) {
var el = event.target;
state.message = el.value.trim();
// set the submit state
el.nextElementSibling.disabled =
!state.message.length;
// update the view
update(render, state, evt);
},
// on submit enable the time so it'll be sent
// and update the input with the trimmed message
onsubmit: function () {
document.querySelector('input[name=time]').disabled = false;
document.querySelector('input[name=message]').value = state.message;
}
}
;
// show it
update(render, state, evt);
// and update the time
setInterval(update, 1000, render, state, evt);
</script>
</html>