Fetching column value from DB for a Select Option

Question

I've a drop-down list for selecting an Id on a php page, the values of which is getting fetched from the database(1st Column).

There's a text-field next to the drop-down in which I want to display the name of the member (2nd Column) from the database.

The code is below -

<?php
include ('connection.php');

$query = "SELECT Member_id FROM member_db ORDER BY Member_id ASC";
$result = mysqli_query($conn, $query) or die(mysqli_error($conn)."[".$query."]");
?>
   <Select id="st_id" placeholder="Enter Member id" name="ist_id" required class="styled-select green semi-square onChange="showMember(this.value)"">
      <option selected ="true" disabled="disabled">Select Member Id</option>
<?php while ($row = mysqli_fetch_array($result, MYSQL_ASSOC)){?>
   <option value=" <?php $row['Member_id']; ?> ">
     <?php echo $row['Member_id'];?>
    </option>
<?php }?>
</Select>

<input style="min-height:30px" type="text" id="st_name" placeholder="Member name" name="ist_name" disabled/>

The JavaScript code I'm calling is this -

function showMember(str) {
    if (str == "")
    {
        document.getElementById("txtHint").innerHTML = "";
        return;
    }
    else { 
        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 (this.readyState == 4 && this.status == 200)
            {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };

        xmlhttp.open("GET","getMember.php?q="+str,true);
        xmlhttp.send();
    }
}

The getMember.php is another php file in which I'm firing a query to get the Member_name based on the value of Member_id.

But the problem is that somehow, that onChange, the page doesn't call the showMember() function.

Answer 1

1) Missing echo in value attribute <option value="<?php $row['Member_id']; ?> "> <?php echo $row['Member_id'];?>

2) onchange should be outside the class attribute . <Select id="st_id" placeholder="Enter Member id" name="ist_id" required class="styled-select green semi-square" onChange="showMember(this.value)"> simple use jquery ajax

    function showMember(str) 
    {  

     $.ajax({
           url:'getMember.php',
           type:'post',
           data:{q:str},
           success:function(data)
                  {
                    $('#st_name').val(data);
                  }

     });
  }

Note :don't forgot to include jquery