Show options via checkboxes

Question

Show options via checkboxes

Looking to create a dynamic leaderboard for gym exercises, where users can select exercises from a database and have them appear as options in the navbar. Currently manually adding exercises, but seeking a more efficient solution using Bootstrap 5. Any tips or suggestions would be greatly appreciated!

<div class="collapse navbar-collapse justify-content-center" id="navbarCategories">
  <ul class="navbar-nav" id="navbar">
    <li class="nav-item"><a href="#squats" class="nav-link" style="color: #c5c6c8;">Squats</a></li>
    <li class="nav-item"><a href="#deadlifts" class="nav-link" style="color: #c5c6c8;">Deadlifts</a></li>
    <li class="nav-item"><a href="#benchpress" class="nav-link" style="color: #c5c6c8;">Bench Press</a></li>
    <li class="nav-item"><a href="#overheadpress" class="nav-link" style="color: #c5c6c8;">Overhead Press</a></li>
    <div class="dropdown">
      <button class="nav-link btn btn-primry dropdown-toggle" data-bs-toggle="dropdown" style="color: #c5c6c8;">Add favorite</button></li>
      <ul class="dropdown-menu">
        <form id="checkform">
          <input type="checkbox" id="benchpress" name="benchpress" value="Bench Press">
          <label for="benchpress">Bench Press</label><br>
          <input type="checkbox" id="deadlift" name="deadlift" value="Deadlifts">
          <label for="deadlift">Deadlifts</label><br>
          <input type="checkbox" id="overheadpress" name="overheadpress" value="Overhead Press">
          <label for="overheadpress">Overhead Press</label><br><br>
          <input type="submit" value="Submit">
        </form>
      </ul>
    </div>
  </ul>
</div>

javascript database forms dynamic bootstrap-5

Answer 1

Answer №1

To create a dynamic checkbox form and automatically populate the navbar options based on exercises in your database, you will require server-side scripting languages such as PHP or JavaScript. Below is a simple method using JavaScript:

Retrieve the exercise list from your database.
Dynamically generate the checkbox form based on the retrieved data.
Use JavaScript to manage form submission and update the navbar dynamically according to selected exercises.

Here's how you can adjust your code to achieve this:

<div class="collapse navbar-collapse justify-content-center" id="navbarCategories">
    <ul class="navbar-nav" id="navbar">
        <!-- Dynamically add Navbar options here -->
        <div class="dropdown">
            <button class="nav-link btn btn-primry dropdown-toggle" data-bs-toggle="dropdown" style="color: #c5c6c8;">Add favorite</button>
            <ul class="dropdown-menu" id="exerciseList">
                <!-- Dynamically add Checkbox form here -->
            </ul>
        </div>
    </ul>
</div>

<script>
    // Simulated list of exercises (replace with actual data from database)
    const exercises = ['Squats', 'Deadlifts', 'Bench Press', 'Overhead Press'];

    // Function to dynamically generate checkbox form
    function generateCheckboxForm() {
        const exerciseList = document.getElementById('exerciseList');
        exerciseList.innerHTML = ''; // Clear existing content

        exercises.forEach(exercise => {
            const checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            checkbox.id = exercise.toLowerCase().replace(' ', '');
            checkbox.name = 'exercise';
            checkbox.value = exercise;
            
            const label = document.createElement('label');
            label.htmlFor = checkbox.id;
            label.textContent = exercise;

            const br = document.createElement('br');

            exerciseList.appendChild(checkbox);
            exerciseList.appendChild(label);
            exerciseList.appendChild(br);
        });
    }

    // Call function to generate checkbox form
    generateCheckboxForm();

    // Function to handle form submission
    document.getElementById('checkform').addEventListener('submit', function(event) {
        event.preventDefault(); // Prevent default form submission behavior

        const selectedExercises = [];
        const checkboxes = document.querySelectorAll('input[name="exercise"]:checked');
        checkboxes.forEach(checkbox => {
            selectedExercises.push(checkbox.value);
        });

        // Update navbar options based on selected exercises
        const navbar = document.getElementById('navbar');
        navbar.innerHTML = ''; // Clear existing navbar options

        selectedExercises.forEach(exercise => {
            const listItem = document.createElement('li');
            listItem.classList.add('nav-item');
            const link = document.createElement('a');
            link.href = '#' + exercise.toLowerCase().replace(' ', '');
            link.classList.add('nav-link');
            link.textContent = exercise;
            listItem.appendChild(link);
            navbar.appendChild(listItem);
        });
    });
</script>

Providing more specifics will aid in addressing your query effectively, including backend technology and API call methods utilized.

Remember to substitute the exercises array with real data fetched from your database using AJAX or any server-side scripting language.

Answer 2

To create a dynamic checkbox form and automatically populate the navbar options based on exercises in your database, you will require server-side scripting languages such as PHP or JavaScript. Below is a simple method using JavaScript:

Retrieve the exercise list from your database.
Dynamically generate the checkbox form based on the retrieved data.
Use JavaScript to manage form submission and update the navbar dynamically according to selected exercises.

Here's how you can adjust your code to achieve this:

<div class="collapse navbar-collapse justify-content-center" id="navbarCategories">
    <ul class="navbar-nav" id="navbar">
        <!-- Dynamically add Navbar options here -->
        <div class="dropdown">
            <button class="nav-link btn btn-primry dropdown-toggle" data-bs-toggle="dropdown" style="color: #c5c6c8;">Add favorite</button>
            <ul class="dropdown-menu" id="exerciseList">
                <!-- Dynamically add Checkbox form here -->
            </ul>
        </div>
    </ul>
</div>

<script>
    // Simulated list of exercises (replace with actual data from database)
    const exercises = ['Squats', 'Deadlifts', 'Bench Press', 'Overhead Press'];

    // Function to dynamically generate checkbox form
    function generateCheckboxForm() {
        const exerciseList = document.getElementById('exerciseList');
        exerciseList.innerHTML = ''; // Clear existing content

        exercises.forEach(exercise => {
            const checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            checkbox.id = exercise.toLowerCase().replace(' ', '');
            checkbox.name = 'exercise';
            checkbox.value = exercise;
            
            const label = document.createElement('label');
            label.htmlFor = checkbox.id;
            label.textContent = exercise;

            const br = document.createElement('br');

            exerciseList.appendChild(checkbox);
            exerciseList.appendChild(label);
            exerciseList.appendChild(br);
        });
    }

    // Call function to generate checkbox form
    generateCheckboxForm();

    // Function to handle form submission
    document.getElementById('checkform').addEventListener('submit', function(event) {
        event.preventDefault(); // Prevent default form submission behavior

        const selectedExercises = [];
        const checkboxes = document.querySelectorAll('input[name="exercise"]:checked');
        checkboxes.forEach(checkbox => {
            selectedExercises.push(checkbox.value);
        });

        // Update navbar options based on selected exercises
        const navbar = document.getElementById('navbar');
        navbar.innerHTML = ''; // Clear existing navbar options

        selectedExercises.forEach(exercise => {
            const listItem = document.createElement('li');
            listItem.classList.add('nav-item');
            const link = document.createElement('a');
            link.href = '#' + exercise.toLowerCase().replace(' ', '');
            link.classList.add('nav-link');
            link.textContent = exercise;
            listItem.appendChild(link);
            navbar.appendChild(listItem);
        });
    });
</script>

Providing more specifics will aid in addressing your query effectively, including backend technology and API call methods utilized.

Remember to substitute the exercises array with real data fetched from your database using AJAX or any server-side scripting language.

Show options via checkboxes

Answer №1

Similar questions

Encountered JSON array, unable to retrieve certain attributes in AngularJS

Having difficulty accessing information from Firebase database using the .once() function

Trouble with the x-cloak attribute in alpine.js

Revise shiny datatable to display total column sum differently

What is the best method for calculating the total of a mongoose attribute?

Steps for converting a file with JSON objects to a JSON array

Printing doesn't display CSS styling

What is the method for setting a condition within the setState function?

Creating a series of promises in a structured chain

Encountering an issue with resolving the module - Material-UI

Phaser 3 shows images as vibrant green squares

What is the best way to show static files from the backend in a React application?

What is the correct way to assign an image to a state and function?

Changing SVG containing image tags into HTML canvas

iOS - Struggling with Multiple-to-Multiple Data Relationships?

Unable to retrieve information from a child component in React

Having trouble redirecting to the Google login screen with Passport Google Auth 2.0

Deactivating Webkit Input Form Shadow

Incorporating a series of image links into a Three.js project with the addition of a

Extract data from a JSON file and refine an array