Linked Questions

Popular Questions

This involves PHP, AJAX, JQuery. Hopefully this is an easy question.

I have a dynamic dropdown menu that displays content when the dropdown is selected. The content i am trying to display is an image. I am using two tables - One is my table for teams, and the other table is for my logos.


|id|name |
|--| --- |
|1 | MTL |
|2 | BOS |
|3 | CGY |
|4 | EDM |


|id|name      |**filename**  |
|--| ---      |              |
|1 | Montreal |habs-svg.svg  |
|2 | Boston   |bruins-svg.svg|
|3 | Calgary  |flames-svg.svg|
|4 | Edmonton |oilers-svg.svg|

It works perfectly. When I select MTL in dropdown menu from 'team' for example, it will display the corresponding file name in text format which is 'habs-svg.svg'. So all my Jquery and AJAX is working great.

How can i get the actual image to display instead of the image name? Please see code below for my index.php, getJS.js & getlogo.php:

<div class="container">
    <h2>Drop-down Selection Data Load with ajax, PHP & MySQL</h2>       
    <div class="page-header">
            <select id="employee" class="form-control" >
                <option value="" selected="selected">Select Employee Name</option>
                $sql = "SELECT id, name FROM team";
                $resultset = mysqli_query($conn, $sql);
                while( $rows = mysqli_fetch_assoc($resultset) ) { 
                <option value="<?php echo $rows["id"]; ?>"><?php echo $rows["name"]; ?></option><?php } ?>
    <div class="hidden" id="errorMassage"></div>
    <table class="table table-striped hidden" id="recordListing">
            <th>Team Name</th>
          <tr> //My images that are dynamically printing will show here 
            <td id="empName"></td>
            <td id="empFileName"></td>

$(document).ready(function () {
  $("#employee").change(function () {
    var id = $(this).find(":selected").val();
    var dataString = "empid=" + id;
      url: "getlogo.php",
      dataType: "json",
      data: dataString,
      cache: false,
      success: function (empData) {
        if (empData) {
        } else {
          $("#errorMassage").removeClass("hidden").text("No record found!");

if($_REQUEST['empid']) {
    $sql = "SELECT name, filename 
    FROM gallery 
    WHERE id='".$_REQUEST['empid']."'";
    $resultSet = mysqli_query($conn, $sql); 
    $empData = array();
    while( $emp = mysqli_fetch_assoc($resultSet) ) {
        $empData = $emp;
    echo json_encode($empData);
} else {
    echo 0; 

I know how to insert images using PHP, but I feel it has something to do with my AJAX specifically on this line:


So far it seems as if I need to use 'attr' instead of 'text'? I tried this below but did not seem to work:

$("#empFileName").attr("filename", empData.filename);

Thank you in advance!

Related Questions