display multiple images from the same table simultaneously based on
dropdown php
I have a question regarding some php I am trying to implement. I am trying
to pull an image path from a database and display the corresponding image
on a page, based on which item the user selects from a dropdown. I am
absolutely a novice, but I was able to modify this example over at
w3schools to display an image (path) to a database instead of the names /
jobs / etc with the code below.
<?php
$q = intval($_GET['q']);
$con = mysqli_connect('','','','');
if (!$con)
{
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"shapes_images");
$sql="SELECT image FROM shapes_images WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);
echo "<table border='0'>
<tr>
</tr>";
while($row = mysqli_fetch_array($result))
{
echo "<tr>";
echo "<img src='/".$row['image']."' />";
echo "</tr>";
}
echo "</table>";
?>
The code on my HTML page is as W3S has it -
<script>
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getImage.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<div class="left">
<form>
<select name="users" onChange="showUser(this.value)">
<option value="">Select a color:</option>
<option value="1">Blue</option>
<option value="2">Red</option>
<option value="3">Yellow</option>
<option value="4">Green</option>
</select>
</form>
<br>
</div>
Which works correctly. When you click 'blue' on the dropdown, a blue squre
image appears, reading the path in from the database. The problem is when
I try to do more than one dropdown menu. I assumed (apparently incorrectly
:) ) that if I duplicated the function and changed the name, and
duplicated the php script I would have two independently controllable
dropdowns on the page, each displaying whichever color block (left is
squares, right is triangles) the user had chosen. It currently displays
both dropdowns and will display whatever image it points to, but as it
stands, when you select an image in the second dropdown, it replaces that
in the first, and vice versa as opposed to displaying them side by side.
As I said, im a bit of a novice here but venture I am not understanding
the PHP function properly.
Can anyone point me in the right direction? thank you.
No comments:
Post a Comment