FriendFinder/test1.html at master · kbrowngithub/FriendFinder · 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
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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.jquery.min.js"></script>
</head>

<body>

    <div class="card">
        <div class="card-header">
            Test Form
        </div>
        <div class="card-body">
            <form role="form">
                <div class="form-group">
                    <h3><strong>Question 1</strong></h3>
                    <h4>Your mind is always buzzing with unexplored ideas and plans.</h4>
                    <select class="chosen-select" id="q1" style="display: none;">
                        <option value=""></option>
                        <option value="1">1 (Strongly Disagree)</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5 (Strongly Agree)</option>
                    </select>
                    <div class="chosen-container chosen-container-single" style="width: 157px;" title="" id="q1_chosen"><a
                        class="chosen-single chosen-default"><span>Select an Option</span>
                        <div><b></b></div>
                    </a>
                    <div class="chosen-drop">
                        <div class="chosen-search"><input type="text" autocomplete="off"></div>
                        <ul class="chosen-results"></ul>
                    </div>
                </div>
                </div>
                <div class="form-group">
                    <label for="reserve-phone">Question 2</label>
                    <input type="text" class="form-control" id="q2_chosen">
                </div>
                <div class="form-group">
                    <label for="reserve-email">Question 3</label>
                    <input type="text" class="form-control" id="q3_chosen">
                </div>
                <div class="form-group">
                    <label for="reserve-unique-id">Question 4</label>
                    <input type="text" class="form-control" id="q4_chosen">
                </div>
                <button type="submit" class="btn btn-primary submit">Submit</button>
            </form>
        </div>
    </div>


</body>

</html>

<script type="text/javascript">
    // Chosen CSS
    var config = {
        ".chosen-select": {},
        ".chosen-select-deselect": {
            allow_single_deselect: true
        },
        ".chosen-select-no-single": {
            disable_search_threshold: 10
        },
        ".chosen-select-no-results": {
            no_results_text: "Oops, nothing found!"
        },
        ".chosen-select-width": {
            width: "95%"
        }
    };

    for (var selector in config) {
        $(selector).chosen(config[selector]);
    }

    // In this code below we create the Front-end JavaScript which "POSTS" our form data to our express server.
    // In essence, when the user hits submit, jQuery grabs all of the fields then sends a post request to our api
    // Our api recognizes the route (/api/tables)... and then runs the associated code (found in api-routes.js).
    // In this case the associated code "saves" the data to the table-data.js file or waitinglist-data.js file

    $(".submit").on("click", function (event) {
        event.preventDefault();

        // Here we grab the form elements
        var newData = {
            question1: $("#q1_chosen").val().trim(),
            question2: $("#q2_chosen").val().trim(),
            question3: $("#q3_chosen").val().trim(),
            question4: $("#q4_chosen").val().trim()
        };

        console.log(`Data: ${JSON.stringify(newData)}`);

        // This line is the magic. It"s very similar to the standard ajax function we used.
        // Essentially we give it a URL, we give it the object we want to send, then we have a "callback".
        // The callback is the response of the server. In our case, we set up code in api-routes that "returns" true or false
        // depending on if a tables is available or not.

        $.post("/api/test", newData,
            function (data) {

                // If a table is available... tell user they are booked.
                if (data) {
                    alert(`True case: Received response back from server: ${JSON.stringify(data)}`);
                }

                // If a table is available... tell user they on the waiting list.
                else {
                    alert(`False case: Received response back from server: ${JSON.stringify(data)}`);
                }

                // Clear the form when submitting
                $("#reserve-name").val("");
                $("#reserve-phone").val("");
                $("#reserve-email").val("");
                $("#reserve-unique-id").val("");

            });

    });


</script>