Imagine a zoo with a postgresql database. To enable web access to this database, I am using php and javascript. Most of the web pages are working fine, but I am currently working on a page where clients can add or remove animals from existing exhibits. There is a dropdown menu that displays exhibit names from the database. The second dropdown is populated dynamically based on the exhibit name selected, showing animal names and their corresponding IDs (with reference to exhibit_id in the animal table). Upon initial loading of the page, everything works correctly. However, when the client clicks the add or remove button, although the database is updated properly, the page keeps loading instead of displaying a success message and allowing the client to choose another exhibit to see the updates. This issue may be due to my code being sloppy, as I have been teaching myself HTML, PHP, and JS. I would appreciate any assistance in resolving this problem and implementing appropriate fixes. Thank you!
<?php
//Read database information from file and assign it to variables
$myfile = fopen("../pg_connection_info.txt", "r") or die("Unable to open \"../pg_connection_info.txt\" file!");
$my_host = fgets($myfile);
$my_dbname = fgets($myfile);
$my_user = fgets($myfile);
$my_password = fgets($myfile);
fclose($myfile);
// Establish a connection to the database
$dbhost = pg_connect("host=$my_host dbname=$my_dbname user=$my_user password=$my_password");
// If there is an error in the $dbhost variable, display error message
if(!$dbhost)
{
die("Error: ".pg_last_error());
}
// Retrieve exhibits from the database
$query = "SELECT exhibit_id, name FROM exhibit";
$result = pg_query($dbhost, $query);
while($row = pg_fetch_row($result))
{
$categories[] = array("id" => $row[0], "val" => $row[1]);
}
// Get animals assigned to exhibits
$query2 = "SELECT animal_id, exhibit_id, name FROM animal";
$result2 = pg_query($dbhost, $query2);
while($row = pg_fetch_row($result2))
{
$subcats[$row[1]][] = array("id" => $row[0], "val" => $row[2]);
}
$jsonCats = json_encode($categories);
$jsonSubCats = json_encode($subcats);
?>
<html lang="en-us">
<head>
<title>Manage Animals/Exhibits</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type='text/javascript'>
<?php
echo "var categories = $jsonCats; \n";
echo "var subcats = $jsonSubCats; \n";
?>
function loadCategories(){
var select = document.getElementById("exhibit");
select.onchange = updateSubCats;
var j = 0;
select.options[0] = new Option("--Select an option--");
for(var i = 0; i < categories.length; i++){
select.options[j + 1] = new Option(categories[i].val,categories[i].id);
j++;
}
}
function updateSubCats(){
var catSelect = this;
var catid = this.value;
var subcatSelect = document.getElementById("animal");
subcatSelect.options.length = 0;
for(var i = 0; i < subcats[catid].length; i++){
subcatSelect.options[i] = new Option(subcats[catid][i].val + " - " + subcats[catid][i].id ,subcats[catid][i].id);
}
}
window.onmousedown = function(e)
{
var el = e.target;
if(el.tagName.toLowerCase() == 'option' && el.parentNode.hasAttribute('multiple'))
{
e.preventDefault();
if(el.hasAttribute('selected')) el.removeAttribute('selected');
else el.setAttribute('selected', '');
}
}
</script>
</head>
<body onload='loadCategories()'>
<h1>Manage Animals/Exhibits</h1>
<form action="Manage_Animal_Exhibit.php" method="post">
<p>Select an exhibit to add or remove animal(s) from:</p>
Exhibit: <select name="exhibit" id="exhibit">
</select><br><br>
<p>Current animals in the exhibit:</p>
<select name="animal[]" id='animal' multiple>
</select><br><br>
<input type="submit" name="Remove" value="Remove"/><br><br>
<p>Current unassigned animals:</p>
<select name="animalAvail[]" id='animalAvail' multiple>
<?php
$query3 = "SELECT name, animal_id FROM animal WHERE exhibit_id is NULL";
$result3 = pg_query($dbhost, $query3);
while($row = pg_fetch_row($result3)){
$name = $row[0];
$id = $row[1];
echo "<option value='$id'>$name - $id </option>";
}
?>
</select><br><br>
<input type="submit" name="Add" value="Add"/><br><br>
</form>
<form action="Home_Page.php" method="post">
<input type="submit" name="Exit" value="Exit"/>
</form>
<?php
if(isset($_POST["Add"]))
{
if($_POST["exhibit"] == "--Select an option--")
{
echo "<script type='text/javascript'>alert('Select an exhibit')</script>";
}
else
{
$arr = array();
foreach($_POST["animalAvail"] as $animalID)
{
array_push($arr, "$animalID");
}
$exhibitID = $_POST["exhibit"];
$query4 = "UPDATE Animal SET exhibit_id = $1 WHERE animal_id = $2";
pg_prepare($dbhost, "prepare1", $query4);
for($i = 0; i < count($arr); $i++)
{
$idToUpdate = $arr[$i];
pg_execute($dbhost, "prepare1", array($exhibitID, $idToUpdate));
}
echo "<script type='text/javascript'>alert('The animals were added to the exhibit')</script>";
}
}
if(isset($_POST["Remove"]))
{
if($_POST["exhibit"] == "--Select an option--")
{
echo "<script type='text/javascript'>alert('Select an exhibit')</script>";
}
else
{
$arr2 = array();
foreach($_POST["animal"] as $aID)
{
array_push($arr2, "$aID");
}
$query5 = "UPDATE Animal SET exhibit_id = NULL WHERE animal_id = $1";
pg_prepare($dbhost, "prepare2", $query5);
for($i = 0; i < count($arr2); $i++)
{
$idUpdate = $arr2[$i];
pg_execute($dbhost, "prepare2", array($idUpdate));
}
echo "<script type='text/javascript'>alert('The animals were removed from the exhibit')</script>";
}
}
pg_free_result($result);
pg_close($dbhost);
?>
</body>
</html>