I am working on a registration page as part of my university project where users can create an account and store their information in a MySQL database.
One feature I'm implementing is the ability for users to select an avatar picture. Below is the code snippet:
<u>Choose your avatar:</u><br>
<?php
// Open the directory
$image_dir = opendir("images/avatars");
// Get each image file
while( $image = readdir( $image_dir ) )
{
$dirArray[] = $image;
}
// Close the directory
closedir($image_dir);
// Count the elements in the array
$indexCount = count($dirArray);
// Loop through the files and display them in a list
for($index=0; $index < $indexCount; $index++)
{
$extension = substr($dirArray[$index], -3);
if( $extension == "jpg" || $extension == "gif" )
{
echo("<img id='$index' onClick='SetAvatar($index)' img src='images/avatars/$dirArray[$index]' class='o'> ");
}
}
?>
<script>
function SetAvatar(id) {
var image = document.getElementById(id);
if( CurSelectedImage != null && id != CurSelectedImage )
{
var image_to_unselect = document.getElementById(CurSelectedImage);
image_to_unselect.Selected = false;
image_to_unselect.style.border = null;
}
if( image.Selected != true )
{
image.style.border = 'medium solid blue';
image.Selected = true;
SelectedImage = id;
}
else
{
image.style.border = null;
image.Selected = false;
SelectedImage = null;
}
}
</script>
The code allows users to select an avatar, highlights it with a blue border, and keeps track of the selected image ID. However, I'm not sure how to pass this variable containing the selected image ID back to PHP for saving. Any suggestions would be greatly appreciated.
Thank you!