Simple script on page #7246

f3st3r113 · 2024-06-28T16:07:29Z

f3st3r113
Jun 28, 2024

Looking to add an input box to a page that will display a users number.

Here is the code for the page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Phone Directory</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #searchBox {
            margin-bottom: 20px;
            padding: 10px;
            width: 300px;
            font-size: 16px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>

    <h2>Phone Directory</h2>
    <input type="text" id="searchBox" placeholder="Enter name">

    <table id="phoneTable">
        <thead>
            <tr>
                <th>Name</th>
                <th>Phone Number</th>
            </tr>
        </thead>
        <tbody>
            <!-- Table rows will be inserted here by JavaScript -->
        </tbody>
    </table>

    <script>
        const members = [
            { name: 'Alice', phone: '123-456-7890' },
            { name: 'Bob', phone: '234-567-8901' },
            { name: 'Charlie', phone: '345-678-9012' },
            { name: 'David', phone: '456-789-0123' },
            { name: 'Eve', phone: '567-890-1234' }
        ];

        document.getElementById('searchBox').addEventListener('input', function() {
            const input = this.value.toLowerCase();
            const tableBody = document.querySelector('#phoneTable tbody');
            tableBody.innerHTML = ''; // Clear previous results

            const filteredMembers = members.filter(member => 
                member.name.toLowerCase().includes(input)
            );

            filteredMembers.forEach(member => {
                const row = document.createElement('tr');
                const nameCell = document.createElement('td');
                const phoneCell = document.createElement('td');

                nameCell.textContent = member.name;
                phoneCell.textContent = member.phone;

                row.appendChild(nameCell);
                row.appendChild(phoneCell);

                tableBody.appendChild(row);
            });
        });
    </script>

</body>
</html>

I've added the entire code to the scripts page properties, just the script section alone, and also added the style segment to the CSS page properties and none of it seems to render properly (Typing in the name field does not display any output).

I have unchecked the sanitize HTML option as well.

Am I missing something or is this not possible?

Answered by f3st3r113

Jun 28, 2024

OK, I stumbled upon the answer (in case anyone stumbles across this post).

Here

I did this both in the Raw HTML and in the Page Properties and it's now working.

View full answer

f3st3r113 · 2024-06-28T20:20:10Z

f3st3r113
Jun 28, 2024
Author

OK, I stumbled upon the answer (in case anyone stumbles across this post).

Here

I did this both in the Raw HTML and in the Page Properties and it's now working.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Simple script on page #7246

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Simple script on page #7246

f3st3r113 Jun 28, 2024

Replies: 1 comment

f3st3r113 Jun 28, 2024 Author

f3st3r113
Jun 28, 2024

f3st3r113
Jun 28, 2024
Author