Display image from dynamic drop down list box

Question

I am trying to display image on web page where image path is stored in MySQL table (table column name-location). but I can't able to display the image.

I have a dynamic drop down list box where it populated all the image name. I want to display the image once the user click on the image name from this drop down list. If I place the full path to the img src, then I can able to see my image from the HTML table. Below is my code so far i tried to get output.

Your advice will help me to complete my task. Need your help to update my knowledge.

$(function () {
        $("#Code").change(function () {
            $("#image").load("image.php?choice=" + $("#Code").val());
        });
    });

index.php

<?php

mysql_connect('890.23.89.100', 'root', '');
mysql_select_db('abc');

$sql = "SELECT Code,location FROM Product_List ORDER BY Code ASC";
$result = mysql_query($sql);

echo "<select id='Code' name='Code' style='width: 120px'>";
while ($row = mysql_fetch_array($result))
{
    echo "<option value='" . $row['Code'] . "'>" . $row['Code'] . "</option>";

}
echo "</select>";

?>

<img
    src="../label_image/6015.jpg (??? how to get the image path here. i put thos manually and can display the image on webpage)"
    width="100%" height="100%">

image.php

<?php

$username = "root";
$password = "";
$hostname = "890.23.89.100";

$dbhandle = mysql_connect($hostname, $username, $password) or die("Unable to connect to MySQL");
$selected = mysql_select_db("abc", $dbhandle) or die("Could not select examples");
$choice = mysql_real_escape_string($_GET['choice']);

$query = "SELECT location FROM Product_List WHERE Code='$choice'";

$result = mysql_query($query);

while ($row = mysql_fetch_array($result))
{
    echo "<option>" . $row{'location'} . "</option>";
}
?>

Answer 1

Here is a simple way to changing image in drop down, we assume that each code has an image name like code1 has image code1.jpg etc.:

<select onchange="document.getElementById('Code').src = this.value">
    <option value="code1.jpg">image 1</option>
    <option value="code2.jpg">image 2</option>
    <option value="code3.jpg">image 3</option>
    <option value="code4.jpg">image 4</option>
</select>

<img id="Code" src="code1.jpg">

Test it on Fiddle.

And here is how to implement it in your code, I have chosen to do use mysqli statement, if you prefer to use other ways, just do minor modification the concept is the same, we assume also that location field contains image path and image name:

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "dummy";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error)
    die("Connection failed: " . $conn->connect_error);

$sql = "SELECT code, location FROM product_list ORDER BY code ASC";
$result = $conn->query($sql);

echo '<select onchange="document.getElementById(\'Code\').src = this.value">';
while ($row = $result->fetch_assoc())
    echo '<option value="' . $row['location'] . '">' . $row['code'] . '</option>';
echo '</select>';

$conn->close();

?>

<!--code1.jpg is defalut image-->
<img id="Code" src="code1.jpg">

Here is snapshot of how the test results looks like, select code1 get image1 (code1.jpg), select code3 get image3 (code3.jpg).

---

EDIT If you want to have full control over your img property and customize it the way you want, it can be done different ways. If we still want to keep it simple and do it on the same way of our example, we could use innerHTML like the example:

<select onchange="document.getElementById('code').innerHTML = this.value">
    <option value="<img id='img1' src='code1.jpg'>">image 1</option>
    <option value="<img id='img2' src='code2.jpg'>">image 2</option>
    <option value="<img id='img3' src='code3.jpg'>">image 3</option>
    <option value="<img id='img4' src='code4.jpg'>">image 4</option>
</select>

<div id="code">
    <img id='img1' src='code1.jpg'>
</div>

And here will be your new implementation to php:

PHP part

echo '<select onchange="document.getElementById(\'code\').innerHTML = this.value">';
while ($row = $result->fetch_assoc())
    echo '<option value="<img id=' . $row['location'] . ' src=' . $row['location'] . '>">' . $row['code'] . '</option>';
echo '</select>';

HTML part

<div id="code">
    <img id='img1' src='code1.jpg'>
</div>

Answer 2

You are close. Try something like this:

$(function () {
    $("#Code").change(function () {
        var tmp = $("#Code").val()
        $.ajax({
            type: 'post',
             url: 'image.php',
            data: 'MyImg=' + tmp,
            success: function(d){
                //if (d.length) alert(d); //Just use this for testing
                $('#imgDlg').html(d); //inject img tag into previously empty div
                //$('#imgDlg').dialog('open'); //optional - use with jQueryUI dialog (lightbox)
            }
        });
    });
});

PHP: (image.php)

<?php
    $i = $_POST['MyImg'];
    //do your query here to get the image name, etc. For example: dog.jpg in the `img` directory

    $out = '<img src="img/dog.jpg" />'
    echo $out

References:

AJAX request callback using jQuery