I’m trying to build a signup system where I select names from the left column and add them to the right column, that much works. I’ve also been successful at having the right column pre-populated with already selected names from a previous submit. What I am struggling with is getting the left and right lists to refresh when I select a new value for game_date from the drop-down.
Here is my existing code:
<!DOCTYPE html>
<html>
<head>
<title>Player Selection</title>
<style>
.container {
display: flex;
justify-content: space-between;
}
.list-box {
width: 200px;
height: 400px;
}
</style>
<script>
let btnRight = document.getElementById('moveRight');
let btnLeft = document.getElementById('moveLeft');
btnRight.addEventListener('click', function()
{
moveSelectedPlayers('right');
});
btnLeft.addEventListener('click', function()
{
moveSelectedPlayers('left');
});
function moveSelectedPlayers(direction) {
var sourceSelect, targetSelect;
if (direction === 'right') {
sourceSelect = document.getElementById('available_players');
targetSelect = document.getElementById('selected_players');
} else if (direction === 'left') {
sourceSelect = document.getElementById('selected_players');
targetSelect = document.getElementById('available_players');
}
let selectedOptions = [];
for (let i = 0; i < sourceSelect.selectedOptions.length; i++) {
selectedOptions.push(sourceSelect.selectedOptions[i]);
}
for(let opt of selectedOptions)
{
targetSelect.appendChild(opt);
}
}
</script>
</head>
<body>
<h1>Register Players for Game</h1><br>
<h2>Select Game Date:</h2>
<form method="post" action="do_signup.php">
<select name="game_id" id="game_id">
<?php
include "db_open.php";
// Create a database connection
$conn = mysqli_connect($host, $username, $password, $database);
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
//Fetch game_id and game_date from game table
$query1 = "SELECT game_date, game_id FROM game";
$result1 = mysqli_query($conn, $query1);
if (mysqli_num_rows($result1) > 0) {
while ($row = mysqli_fetch_assoc($result1)) {
echo '<option value="' . $row['game_id'] . '">' . $row['game_date'] . '</option>';
}
};
?>
</select>
<br><br>
<h2>Select Players</h2>
<div class="container">
<select id="available_players" multiple="true" class="list-box">
<?php
// Fetch player data from the 'players' table and order by last_name
$query2 = "SELECT player_id, last_name, first_name FROM players where player_id not in (select player_id from signup) ORDER BY last_name";
$result2 = mysqli_query($conn, $query2);
if (mysqli_num_rows($result2) > 0) {
while ($row = mysqli_fetch_assoc($result2)) {
echo '<option value="' . $row['player_id'] . '">' . $row['last_name'] . ', ' . $row['first_name'] . '</option>';
}
};
?>
</select>
<div>
<button type="button" id="moveRight" onclick="moveSelectedPlayers('right')">Add →</button>
<br><br>
<button type="button" id="moveLeft" onclick="moveSelectedPlayers('left')">← Remove</button>
</div>
<select id="selected_players" name="selected_players[]" multiple="true" class="list-box">
<?php
// Fetch player data from the 'signup' table and order by last_name
$query3 = "SELECT signup.player_id, players.last_name, players.first_name from players inner join signup on players.player_id = signup.player_id where players.player_id = signup.player_id order by players.last_name";
$result3 = mysqli_query($conn, $query3);
if (mysqli_num_rows($result3) > 0) {
while ($row = mysqli_fetch_assoc($result3)) {
echo '<option value="' . $row['player_id'] . '">' . $row['last_name'] . ', ' . $row['first_name'] . '</option>';
}
};
// Close the database connection
mysqli_close($conn);
?>
</select>
</div>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
I’ve read several StackOverflow pages that describe how it could be done, but they’re a bit confusing to a javascript novice such as myself. I tried to add a an onSelect action to the game_id select but that didn’t work. I’m fairly certain that I’m on the right track there, but I don’t know how to craft the function that it should be calling.