jquery - Ajax Select, getting data out of database with select -

how value out of database using following: user selects id (i.e 1) within <select> function data displayed in <p> tag have following , able change text <p> can't data out of database reason

select code

<p id="dbinfo" >data comes here</p>   <select id='slct'>     <option value='empty'>select number</option>     <option value='1'> 1</option>     <option value='2'>2</option>     <option value='3'>3</option>     <option value='4'>4</option>     <option value='5'>5</option> </select>  <script>          document.getelementbyid("slct").onfocus = function()     {         alert(document.getelementbyid('slct').value);          var xmlhttp = new xmlhttprequest();         var text = "";         xmlhttp.onreadystatechange = function()         {             if (xmlhttp.readystate == 4 && xmlhttp.status == 200)             {                 var dbtext = xmlhttp.responsetext;                 var obj = json.parse();                  var text;                 var i;                 for(i =0; < obj.records.length; i++)                 {                     text += "<option value='" +obj.records[i].id+ "'>" + obj.records[i].id + "</option>";                 }                 document.getelementbyid('dbinfo').innerhtml = dbtext;              }                     }         xmlhttp.open("post", "http://localhost/somemaps/data.php", true);         xmlhttp.setrequestheader("content-type", "application/x-www-form-urlencoded");         xmlhttp.send();          document.getelementbyid("slct").onchange = function(){             var id = this.children[this.selectedindex].value;             document.getelementbyid("dbinfo").innerhtml = "text has changed: " +id;              xmlhttp1 = xmlhttprequest();              xmlhttp.send("id="+id);                  }     }   </script> 

data code

<?php     //haal de gegevens uit de database en echo ze naar dit scherm.     $servername = "localhost";     $username = "root";     $password = "";     $databasename = "blok-1-am1a";      if(isset($_post['id']))     {         $extra = "where ".$id. " = ".$_post['id'];     }     else     {         $extra = "";     }      try     {         $connection = new pdo("mysql:host=".$servername.";dbname=".$databasename, $username, $password);         $connection->setattribute(pdo::attr_errmode, pdo::errmode_exception);          $statement = $connection->prepare("select `id`, `firstname`, `db-name` ".$extra);           $statement->execute();          $result = $statement->setfetchmode(pdo::fetch_assoc);          $data = "";         foreach($statement->fetchall() $key => $value)         {             $data .= $value['id']." | ".$value['firstname'];         }      catch(pdoexception $e)     {         echo "dit een pdo foutmelding, de volgende fout heeft plaatsgevonden : ".$e->getmessage();       }      echo $data;   ?> 

i thinking should add value return? not seem work problem? tips/anwsers welcome (:

edit

after cliffs response , changing code result:

and after selecting happens:

so said data database shows instead of selected id

there 3 problems i've found in code:

• there typo on line 9 of php code posted:
  think $extra ="where ".$id=$_post['id']; should $extra ="where ".$id."=".$_post['id']; note equal sign = enclosed in double quotes.

• on line 32 still in php code $data .= $value['id']." | ".$value['firstname']"; remove last double quote before semicolon so:
  $data .= $value['id']." | ".$value['firstname'];

• the event looking make ajax call when user selects id within <select> onchange, in jquery .change().
  listen on event on line 14 of js code too: instead of onfocus use onchange document.getelementbyid("slct").onchange = function()

then, since tagged post jquery, can use ajax methods of jquery faster , easier use.

i suggest jquery.ajax() method:

$("#slct").change(function() {     var idvar = $(this).val(); // jquery version of this.children[this.selectedindex].value     $.ajax({         url:"http://localhost/somemaps/data.php",         type:"post",         data: {id: idvar},         async:true,         success: function(data) {             //  code executed if request succeeds eg:             $("#dbinfo").html(data);             //  data variable contains content returned server             },         error: function() {             //  code executed if request fails             }     }); });