Assigment_3/index.html at main · Hemang0710/Assigment_3 · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Confirmation Page</title>
    <link rel="stylesheet" href="./CSS/index.css">
</head>
<body>
    <h1>Your details have been submitted successfully</h1>
    <div id="details"></div>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            // Function to get query parameter value by name
            function getParameterByName(name, url) {
                if (!url) url = window.location.href;
                name = name.replace(/[\[\]]/g, '\\$&');
                var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
                    results = regex.exec(url);
                if (!results) return null;
                if (!results[2]) return '';
                return decodeURIComponent(results[2].replace(/\+/g, ' '));
            }

            // Get form data from query parameters
            var arrivalDate = getParameterByName('arrivalDate');
            var numNights = getParameterByName('numNights');
            var adults = getParameterByName('adults');
            var children = getParameterByName('children');
            var roomType = getParameterByName('roomType');
            var bedType = getParameterByName('bedType');
            var name = getParameterByName('name');
            var email = getParameterByName('email');
            var phone = getParameterByName('phone');

            // Create and populate HTML table with form data
            var table = document.createElement('table');
            var tbody = table.createTBody();
            tbody.innerHTML = `
                <tr><th>Field</th><th>Value</th></tr>
                <tr><td>Arrival Date</td><td>${arrivalDate}</td></tr>
                <tr><td>Nights</td><td>${numNights}</td></tr>
                <tr><td>Adults</td><td>${adults}</td></tr>
                <tr><td>Children</td><td>${children}</td></tr>
                <tr><td>Room Type</td><td>${roomType}</td></tr>
                <tr><td>Bed Type</td><td>${bedType}</td></tr>
                <tr><td>Name</td><td>${name}</td></tr>
                <tr><td>Email</td><td>${email}</td></tr>
                <tr><td>Phone</td><td>${phone}</td></tr>
            `;

            // Append the table to the details div
            document.getElementById('details').appendChild(table);
        });
    </script>
</body>
</html>