ScoreSpot/ProjectSourceCode/src/views/pages/register.hbs

<div class="register-page">
  <div class="form-container">
    <h1 class="mt-5 mb-4">Register</h1>
    <form action="/register" method="POST" class="mt-3">
      <div class="mb-3">
        <label for="username" class="form-label">Username:</label>
        <input type="text" class="form-control" id="usernameInput" name="username" required>
      </div>
      <div class="mb-3">
        <label for="password" class="form-label">Password:</label>
        <input type="password" class="form-control" id="passwordInput" name="password" required>
      </div>
      <div class="dropdowns">
        <div>
          <label class="form-label">Preferred League :</label><br>
          <select id="league_dropdown">
            <option>Premier League</option>
            <option>La Liga</option>
            <option>Bundesliga</option>
            <option>Serie A</option>
            <option>Ligue 1</option>
            <option>Brasilerao</option>
          </select>
        </div>
        <div>
          <label class="form-label">Favorite Team   :</label><br>
          <select id="team_dropdown">
          </select>
        </div>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    <p class="mt-3">Already have an account? <a href="/login">Login</a></p>
  </div>

  <script>
    console.log("Hello");
    const league_select = document.getElementById('league_dropdown');
    const team_select = document.getElementById('team_dropdown');

    document.addEventListener("DOMContentLoaded", function() {

      league_select.addEventListener('change', updateTeamSelect);

      function updateTeamSelect() {
        var selectedLeague = league_select.value;

        team_select.innerHTML = "";
        console.log(selectedLeague);
        // Add options based on the selected value from the first select element
        if (selectedLeague === "La Liga") {
          // Add options for La Liga
              console.log("Hello");

          addOption(team_select, "Option 1 for LL", "option1A");
          addOption(team_select, "Option 2 for LL", "option2A");
        } else if (selectedLeague === "Serie A") {
          // Add options for Serie A
          addOption(team_select, "Team 1 in Serie A", "option1B");
          addOption(team_select, "Team 2 in Serie A", "option2B");
        } else if (selectedLeague === "Bundesliga") {
          // Add options for Bundesliga
          addOption(team_select, "Option 1 for Bun", "option1C");
          addOption(team_select, "Option 2 for Bun", "option2C");
        }
      }

      function addOption(selectElement, text, value) {
        var option = document.createElement("option");
        option.text = text;
        option.value = value;
        selectElement.add(option);
      }
    });
  </script>
</div>