Finished Chapter 16 exercise 2

Drummingcoder · Drummingcoder · commit 2f967045e8e0 · 2025-02-18T00:27:20.000Z
diff --git a/ch16exercise2.html b/ch16exercise2.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Chapter 16: Exercise 2</title>
+    <style>
+        .fieldname {
+            text-align: right;
+        }
+        .submit {
+            text-align: right;
+        }
+    </style>
+</head>
+<body>
+    <form>
+        <table>
+            <tr>
+                <td class="fieldname">Username:</td>
+                <td><input type="text" id="username" /></td>
+                <td><a id="usernameAvailability" href="#">Check Availability</a></td>
+            </tr>
+            <tr>
+                <td class="fieldname">Email:</td>
+                <td><input type="text" id="email" /></td>
+                <td><a id="emailAvailability" href="#">Check Availability</a></td>
+            </tr>
+            <tr>
+                <td class="fieldname">Password:</td>
+                <td><input type="text" id="password" /></td>
+                <td />
+            </tr>
+            <tr>
+                <td class="fieldname">Verify Password:</td>
+                <td><input type="text" id="password2" /></td>
+                <td />
+            </tr>
+            <tr>
+                <td colspan="2" class="submit"><input type="submit" value="Submit" /></td>
+                <td />
+            </tr>
+        </table>
+    </form>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+    <script>
+        function check(e) {
+            e.preventDefault();
+            var userValue = $("#username").val();
+            var emailValue = $("#email").val();
+            var parms = {}
+            if (e.target.id == "usernameAvailability") {
+                if (!userValue) {
+                    alert("Please enter a user name to check!");
+                    return;
+                }
+                parms = {
+                    username: userValue
+                };
+            } else {
+                if (!emailValue) {
+                    alert("Please enter an email address to check!");
+                    return;
+                }
+                parms = {
+                    email: emailValue
+                };
+            }
+            
+            $.getJSON("ch14_formvalidator.php", parms).done(handleResponse).fail(failure);
+        }
+        function handleResponse(response) {
+            if (response.available) {
+                alert(response.searchTerm + " is available!");
+            } else {
+                alert("We're sorry, but " + response.searchTerm + " is not available.");
+            }
+        }
+        function failure() {
+            alert("Sorry, an error has occured.");
+        }
+        $("#usernameAvailability").on("click", check);
+        $("#emailAvailability").on("click", check);
+    </script>
+</body>
+</html>
