lucaspatenaude/ScoreSpot
1
0
Fork 0
Code Projects 1 Releases 1 Wiki Activity

dynamically changing selects in register page

Browse Source
This commit is contained in:
dominicjk
2024-04-10 17:05:08 -06:00
parent a941195bdd
commit d564294275
1 changed files with 72 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
ProjectSourceCode/src/views/pages/register.hbs
View File

@@ -1,36 +1,76 @@
<div class="register-page"> <div class="register-page">
<div class="form-container"> <div class="form-container">
<h1 class="mt-5 mb-4">Register</h1> <h1 class="mt-5 mb-4">Register</h1>
<form action="/register" method="POST" class="mt-3"> <form action="/register" method="POST" class="mt-3">
<div class="mb-3"> <div class="mb-3">
<label for="username" class="form-label">Username:</label> <label for="username" class="form-label">Username:</label>
<input type="text" class="form-control" id="username" name="username" required> <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>
<div class="mb-3"> <div>
<label for="password" class="form-label">Password:</label> <label class="form-label">Favorite Team :</label><br>
<input type="password" class="form-control" id="password" name="password" required> <select id="team_dropdown">
</select>
</div> </div>
<div class="dropdowns"> </div>
<div> <button type="submit" class="btn btn-primary">Submit</button>
<label class="form-label">Preferred League :</label><br> </form>
<select id="league_dropdown"> <p class="mt-3">Already have an account? <a href="/login">Login</a></p>
<option value="option1">Premier League</option>
<option value="option2">La Liga</option>
<option value="option3">Bundesliga</option>
<option value="option4">Serie A</option>
<option value="option5">Ligue 1</option>
<option value="option6">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>
</div> </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>