-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
152 lines (145 loc) · 5.12 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CZ3006 Assignment 2</title>
</head>
<body>
<h1>Hello,</h1>
<form id="form" action="submit.php" method="post">
<table>
<tbody>
<tr>
<td><label for="name">Name: </label></td>
<td><input id="name" type="text" name="name"></td>
</tr>
<tr>
<td><label for="apples">Number of apples (¢69 each): </label></td>
<td><input type="text" id="apples" name="apples"></td>
</tr>
<tr>
<td><label for="oranges">Number of oranges (¢59 each): </label></td>
<td><input type="text" id="oranges" name="oranges"></td>
</tr>
<tr>
<td><label for="bananas">Number of bananas (¢39 each): </label></td>
<td><input type="text" id="bananas" name="bananas"></td>
</tr>
<tr>
<td>Total:</td>
<td><input type="text" id="total" name="total"></td>
</tr>
<tr>
<td>Payment method:</td>
<td>
<label>
<input type="radio" name="payment" value="Visa"> Visa
</label>
<label>
<input type="radio" name="payment" value="Mastercard"> Mastercard
</label>
<label>
<input type="radio" name="payment" value="Discover"> Discover
</label>
</td>
</tr>
<tr>
<td colspan="2">
<input id="submit" type="submit" value="Submit">
</td>
</tr>
</tbody>
</table>
</form>
<script>
document.addEventListener("DOMContentLoaded", function() {
function isValid(input) {
// valid if input is:
// 1. its length is zero
// 2. a number (not NaN)
// 3. a finite number
// 4. an integer (parse input as integer and the value stays the same;
// if a decimal number is inputed, this condition will fail)
return input.length === 0 ||
(!isNaN(input) &&
isFinite(input) &&
(input == parseInt(input, 10)));
}
function handler(e) {
var val = e.target.value;
if (!isValid(val)) {
// invalid input alert + focus element
alert("Invalid input, please input again");
e.target.focus();
}
// calculate total money payable
document.getElementById("total").value =
0.69 * document.getElementById("apples").value +
0.59 * document.getElementById("oranges").value +
0.39 * document.getElementById("bananas").value;
}
// attach "handler" to these three elems
document.getElementById("apples").addEventListener("keyup", handler, false);
document.getElementById("oranges").addEventListener("keyup", handler, false);
document.getElementById("bananas").addEventListener("keyup", handler, false);
// init
document.getElementById("apples").value = "";
document.getElementById("oranges").value = "";
document.getElementById("bananas").value = "";
// make illusion that "total" is uneditable
document.getElementById("total").addEventListener("focus", function (e) {
e.target.blur();
}, false);
function handleSubmit(e) {
// validators
// for each condition,
// if "checker" is true, some invalidity has occurred
// hence, "msg" alert is shown; and "selector" is focused
var check = [{
selector: "#name",
checker: (document.getElementById("name").value.length === 0),
msg: "Please enter a name"
}, {
selector: "#apples",
checker: (document.getElementById("apples").value.length === 0),
msg: "Please input number of apples"
}, {
selector: "#oranges",
checker: (document.getElementById("oranges").value.length === 0),
msg: "Please input number of oranges"
}, {
selector: "#bananas",
checker: (document.getElementById("bananas").value.length === 0),
msg: "Please input number of bananas"
}, {
selector: 'input[name="payment"]',
checker: !document.querySelector('input[name="payment"]:checked'),
msg: "Please select a payment method"
}, {
selector: "#apples",
checker: !isValid(document.getElementById("apples").value),
msg: "Invalid input on number of apples, please check your input again"
}, {
selector: "#oranges",
checker: !isValid(document.getElementById("oranges").value),
msg: "Invalid input on number of oranges, please check your input again"
}, {
selector: "#bananas",
checker: !isValid(document.getElementById("bananas").value),
msg: "Invalid input on number of bananas, please check your input again"
}];
// check all those validators defined above
for (var i = 0; i < check.length; i++) {
if (check[i].checker) {
alert(check[i].msg);
document.querySelector(check[i].selector).focus();
e.preventDefault();
return false;
}
}
}
document.getElementById("form").addEventListener("submit", handleSubmit, false);
}, false);
</script>
</body>
</html>