-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·252 lines (236 loc) · 11.4 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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
<!--
author : Liu Zhemin (U1621997K)
Project for CZ3006 Net Centric Computing Nanyang Technological University.
Project was done as part of a coursework requirement for CZ3006 in AY17/18 Semester 1.
html includes both css and javascript codes as the instruction was to create a HTML document
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CheckOut Form</title>
<!-- Icon for Web -->
<link rel="shortcut icon" href="img/appleicon.png" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Relevant custom css -->
<style type="text/css">
div.row.form {
border: 1px solid;
padding-top: 1rem;
padding-bottom: 1rem;
}
div img {
height: 200px;
width: 100%;
}
</style>
<!-- Relevant JavaScript functions -->
<script type="text/javascript">
/* Check if input is integer
*
* @name which is the ID of the text box
* @remarks to clear the total cost for a fruit
*
* execute getTotalCost() to find the total cost of all fruits if input is an integer
*/
function isInteger(name, remark) {
var i;
var inputChar = document.getElementById(name).value;
//loop through all string
for (i = 0; i < inputChar.length; i++) {
var oneChar = inputChar.charAt(i);
if (isNaN(oneChar)) //check for character whether is a digit
{
document.getElementById(remark).innerHTML = "";
alert("Invalid digits! Please enter only numeric characters");
document.getElementById(name).value = "";
document.getElementById("totalCostId").value = "NaN";
} else {
getTotalCost();
}
}
}
/* Perform calculation of total cost of all fruits
*
* Print out to the total cost text box straight
*/
function getTotalCost() {
var appleVal = document.getElementById("appleValID").value;
var orangeVal = document.getElementById("orangeValID").value;
var bananaVal = document.getElementById("bananaValID").value;
var totalCost = Math.round((0.69 * appleVal + 0.59 * orangeVal + 0.39 * bananaVal) * 100) / 100;
document.getElementById("totalCostId").value = totalCost;
document.getElementById("applesRemark").innerHTML = appleVal + " apples will cost $" + Math.round((0.69 * appleVal) * 100) / 100;
document.getElementById("orangesRemark").innerHTML = orangeVal + " oranges will cost $" + Math.round((0.59 * orangeVal) * 100) / 100;
document.getElementById("bananasRemark").innerHTML = bananaVal + " bananas will cost $" + Math.round((0.39 * bananaVal) * 100) / 100;
}
/* Does form validation of the entire form
*
* @form input form to be validated
*
* return true if validated
*/
function validateForm(form) {
var userName = form.userName.value;
var appleVal = form.appleVal.value;
var orangeVal = form.orangeVal.value;
var bananaVal = form.bananaVal.value;
var success = 1;
var flag = 0;
//check the radiobutton status
if (document.getElementById("visaID").checked === true ||
document.getElementById("masterID").checked === true ||
document.getElementById("discoverID").checked === true) {
flag = 1;
}
//detect the username
if (!userName) {
document.getElementById("usernamePopup").style.display = "block";
form.userName.style.backgroundColor = "yellow";
form.userName.style.border = "3px red solid";
success = 0;
} else {
form.userName.style.backgroundColor = "";
form.userName.style.border = "";
document.getElementById("usernamePopup").style.display = "none";
}
//detect the apple value
if (!appleVal) {
document.getElementById("applePopup").style.display = "block";
form.appleVal.style.backgroundColor = "yellow";
form.appleVal.style.border = "3px red solid";
success = 0;
} else {
form.appleVal.style.backgroundColor = "";
form.appleVal.style.border = "";
document.getElementById("applePopup").style.display = "none";
}
//detect the banana value
if (!bananaVal) {
document.getElementById("bananaPopup").style.display = "block";
form.bananaVal.style.backgroundColor = "yellow";
form.bananaVal.style.border = "3px red solid";
success = 0;
} else {
form.bananaVal.style.backgroundColor = "";
form.bananaVal.style.border = "";
document.getElementById("bananaPopup").style.display = "none";
}
//detect the orange value
if (!orangeVal) {
document.getElementById("orangePopup").style.display = "block";
form.orangeVal.style.backgroundColor = "yellow";
form.orangeVal.style.border = "3px red solid";
success = 0;
} else {
form.orangeVal.style.backgroundColor = "";
form.orangeVal.style.border = "";
document.getElementById("orangePopup").style.display = "none";
}
if (flag !== 1) {
document.getElementById("payPopup").style.display = "block";
success = 0;
} else {
document.getElementById("payPopup").style.display = "none";
}
if (!success) {
alert("The form is incomplete. Please read the error message(s).");
return false;
} else {
alert("The form was submitted successfully!");
return true;
}
}
</script>
</head>
<body>
<div class="container">
<h1 class="h1"><b>Fruit Shop</b></h1>
<br>
<h2 class="h2"><b>Order Form</b></h2>
<br>
<!-- onSubmit returns a value to the form's submit event and prevent submission if false-->
<form action="receipt.php" method="post" onSubmit="return validateForm(this);">
<label class="control-label" for="userNameID">Name:</label>
<input type="text" name="userName" id="userNameID" class="form-control" placeholder="Please Enter Your Name">
<br>
<div id="usernamePopup" style="display:none;">
<span style="color:red;">Please fill in your username.</span>
</div>
<br>
<div class="row form">
<h4 class="h4 col-sm-12"><u><strong>Please enter the amount of fruits you want to order:</strong></u></h4>
<br>
<br>
<br>
<div class="col-sm-4">
<label for="appleValID">Apple(69¢ each):</label>
<input type="text" name="appleVal" id="appleValID" class="form-control" placeholder="Enter amount of apples" onblur="getTotalCost();" onKeyup="isInteger('appleValID', 'applesRemark');getTotalCost();">
<br>
<article id="applesRemark"></article>
<div id="applePopup" style="display:none;">
<span style="color:red;">Please enter the number of apple.</span>
</div>
<br>
<img src="img/apple.png" class="img-responsive center-block" alt="apple">
</div>
<div class="col-sm-4">
<label for="orangeValID">Orange(59¢ each):</label>
<input type="text" name="orangeVal" id="orangeValID" class="form-control" placeholder="Enter amount of oranges" onblur="getTotalCost();" onKeyup="isInteger('orangeValID','orangesRemark');getTotalCost();">
<br>
<article id="orangesRemark"></article>
<div id="orangePopup" style="display:none;">
<span style="color:red;">Please enter the number of orange.</span>
</div>
<br>
<img src="img/orange.jpeg" class="img-responsive center-block" alt="orange">
</div>
<div class="col-sm-4">
<label for="bananaValID">Banana(39¢ each):</label>
<input type="text" name="bananaVal" id="bananaValID" class="form-control" placeholder="Enter amount of bananas" onblur="getTotalCost();" onKeyup="isInteger('bananaValID', 'bananasRemark');getTotalCost();">
<br>
<article id="bananasRemark"></article>
<div id="bananaPopup" style="display:none;">
<span style="color:red;">Please enter the number of banana.</span>
</div>
<br>
<img src="img/banana.jpeg" class="img-responsive center-block" alt="banana">
</div>
<br>
<br>
<br>
<div class="col-sm-12">
<br>
<label for="totalCostId">Total Cost:</label>
<input type="text" name="totalCost" class="form-control" id="totalCostId" onfocus="this.blur();">
<br>
<h4 class="h4"><u><b>Payment Methods:</b></u></h4>
<div class="col-sm-4">
<label for="visaID">
<input type="radio" name="paymentMethod" id="visaID" value="Visa" /> Visa
<br>
<img src="img/visa.png" class="img-responsive center-block" alt="visa"></label>
</div>
<div class="col-sm-4">
<label for="masterID">
<input type="radio" name="paymentMethod" id="masterID" value="Master" /> Master
<img src="img/master.png" class="img-responsive center-block" alt="master"></label>
</div>
<div class="col-sm-4">
<label for="discoverID">
<input type="radio" name="paymentMethod" id="discoverID" value="Discover" /> Discover
<img src="img/discover.jpg" class="img-responsive center-block" alt="discover"></label>
</div>
<div id="payPopup" style="display:none;">
<span style="color:red;">Kindly select the type of payment.</span>
</div>
<br>
<input type="submit" class="btn btn-primary" value="Submit Form">
<input type="reset" class="btn btn-default" value="Reset Form">
</div>
</div>
</form>
</div>
</body>
</html>