CZ3006-Net-Centric-Computing-Assignment-2-Web-applications-using-JavaScript-and-PHP/index.html at master · Cheejyg/CZ3006-Net-Centric-Computing-Assignment-2-Web-applications-using-JavaScript-and-PHP · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CZ3006 Net Centric Computing Assignment 2: Web applications using JavaScript and PHP</title>
<script>

	var validInput = /\d+/im;

	function validate() {
		var apples = document.getElementById("apples").value;
		var oranges = document.getElementById("oranges").value;
		var bananas = document.getElementById("bananas").value;

		if(!validInput.test(apples) || !validInput.test(oranges) || !validInput.test(bananas) || isNaN(apples) || isNaN(oranges) || isNaN(bananas) || apples < 0 || oranges < 0 || bananas < 0) {
			document.getElementById("textbox").value = "NaN";
			document.getElementById("total").value = "NaN";

			if(!validInput.test(bananas) || isNaN(bananas) || bananas < 0) { document.getElementById("bananas").focus(); }
			if(!validInput.test(oranges) || isNaN(oranges) || oranges < 0) { document.getElementById("oranges").focus(); }
			if(!validInput.test(apples) || isNaN(apples) || apples < 0) { document.getElementById("apples").focus(); }

			alert("input(s) is/are not valid, input again");

			return false;
		}
		else {
			document.getElementById("textbox").value = "Total number of apples: " + apples + "\nTotal number of oranges: " + oranges + "\nTotal number of bananas: " + bananas + "\n\nTotal cost: " + ((apples * 69 + oranges * 59 + bananas * 39) > 0 && (apples * 69 + oranges * 59 + bananas * 39) < 100 ? (apples * 69 + oranges * 59 + bananas * 39) + '\u00A2' : '\u0024' + ((apples * 69 + oranges * 59 + bananas * 39)/100).toFixed(2));
			document.getElementById("total").value = ((apples * 69 + oranges * 59 + bananas * 39) > 0 && (apples * 69 + oranges * 59 + bananas * 39) < 100 ? (apples * 69 + oranges * 59 + bananas * 39) + '\u00A2' : '\u0024' + ((apples * 69 + oranges * 59 + bananas * 39)/100).toFixed(2));

			return apples == 0 && oranges == 0 && bananas == 0 ? false : true;
		}
	}

</script>
</head>
<body>
<form action="index.html" method="post" name="form" onSubmit="return validate();">
	<table>
		<tr>
			<td><label for="name">Name: </label></td>
			<td><input name="name" type="text" id="name" tabindex="1"></td>
		</tr>
		<tr>
			<td colspan="2">&nbsp;</td>
		</tr>
		<tr>
			<td><label for="apples">Apple(s): </label></td>
			<td><input name="apples" type="text" id="apples" tabindex="2" onChange="return validate();" value="0" size="14"> &#215; 69&#162;</td>
		</tr>
		<tr>
			<td><label for="oranges">Orange(s): </label></td>
			<td><input name="oranges" type="text" id="oranges" tabindex="3" onChange="return validate();" value="0" size="14"> &#215; 59&#162;</td>
		</tr>
		<tr>
			<td><label for="bananas">Banana(s): </label></td>
			<td><input name="bananas" type="text" id="bananas" tabindex="4" onChange="return validate();" value="0" size="14"> &#215; 39&#162;</td>
		</tr>
		<tr>
			<td colspan="2">&nbsp;</td>
		</tr>
		<tr>
			<td colspan="2"><textarea name="textbox" cols="38" rows="6" readonly style="cursor: default;" id="textbox" onFocus="this.blur();"></textarea></td>
		</tr>
		<tr>
			<td><strong>Total: </strong></td>
			<td><input name="total" type="text" readonly style="cursor: default; font-weight: bold; text-align: center;" id="total" onFocus="this.blur();"></td>
		</tr>
		<tr>
			<td colspan="2">&nbsp;</td>
		</tr>
		<tr>
			<td style="vertical-align: top;">Payment method: </td>
			<td><input name="payment" type="radio" id="Visa" tabindex="5" value="Visa" checked>
				<label for="Visa">Visa</label>
				<br>
				<input name="payment" type="radio" id="MasterCard" tabindex="5" value="MasterCard">
				<label for="MasterCard">MasterCard</label>
				<br>
				<input name="payment" type="radio" id="Discover" tabindex="5" value="Discover">
				<label for="Discover">Discover</label></td>
		</tr>
		<tr>
			<td colspan="2">&nbsp;</td>
		</tr>
		<tr>
			<td><input name="submit" type="submit" style="cursor: pointer;" id="submit" tabindex="6" onClick="return validate();" value="Submit"></td>
			<td><input name="reset" type="reset" style="cursor: pointer;" id="reset" value="Reset"></td>
		</tr>
	</table>
</form>
</body>
</html>