php - JSON Parse xmlhttp.requestText -

i have form has dynamic drop down select when value selected auto populates 2 other form fields, short , long description. trying use ajax retrieve short , long desc based on value of drop down select. can receive xmlhttp.responsetext data , display on form page unable parse responsetext out respective form fields.

you can see responsetext displayed above "add new record" title. might hard read here again: (i thinking might have wrong format)

{"stitl":"chf staff","ltitl":"chief of staff"} 

html file:

<form id="addform" method="post"  action="units_add.php">   <legend>add new record</legend>      <label for="titleorg" class="control-label">title org</label>           <select class="form-control" name="titleorg" id="titleorg" onchange="populate(this.value)">                <option value=" "></option>                <?php                   while ($rowl1l5s = $l1l5result->fetch_assoc()) {                        echo "<option value=". $rowl1l5s['l1l5']. ">";                        echo $rowl1l5s['l1l5'] . "&nbsp&nbsp&nbsp&nbsp" .$rowl1l5s['ltitl']; ;                        echo "</option>";                   }?>           </select>       <label for="shortdesc" class="control-label">short desc</label>           <input name="shortdesc" class="form-control" id="shortdesc" type="text" readonly="readonly">       <label for="longdesc" class="control-label">long desc</label>           <input name="longdesc" class="form-control" id="longdesc" type="text" readonly="readonly">       <button type="submit" class="btn btn-default" id="save"><i class="glyphicon glyphicon-ok glyphicon-white"></i> save</button>       <a href="fdmamaint_v10.php"           <button class="btn btn-default"  id="cancel"><i class="glyphicon glyphicon-remove"></i> cancel</button>     </a> </form> 

then user selects value dynamic drop down executes js function:

function populate(str) {      if (str=="")      {           document.getelementbyid("shortdesc").innerhtml="";           return;        }        // create object        if (window.xmlhttprequest)       {// code ie7+, firefox, chrome, opera, safari            xmlhttp=new xmlhttprequest();       }        else       {// code ie6, ie5            xmlhttp=new activexobject("microsoft.xmlhttp");       }         xmlhttp.onreadystatechange=function()       {            if (xmlhttp.readystate==4 && xmlhttp.status==200)           {                data = xmlhttp.responsetext;                document.getelementbyid("messages").innerhtml=xmlhttp.responsetext;               document.getelementbyid("shortdesc").value=xmlhttp.responsetext.shortdesc               document.getelementbyid("longdesc").value=xmlhttp.responsetext.second;            }        }               xmlhttp.open("get","getl2l5.php?q="+str,true);               xmlhttp.send();  } 

i know following code (see below) doesn't work because it's being referenced wrong, plus hasn't been parsed yet. throwing in there reference why form fields "undefined"

document.getelementbyid("shortdesc").value=xmlhttp.responsetext.shortdesc document.getelementbyid("longdesc").value=xmlhttp.responsetext.second; 

then js function goes out getl2l5 php script:

<?php      define('dbhost','**************');     define('dbuser','********');     define('dbpass','**********');     define('dbname','**********');      //connect database     if (!$db = new mysqli(dbhost, dbuser, dbpass, dbname)) die("can't connect database");      // retrieve value title org drop down select      $q = $_get['q'];       // pull ltitl , stitl based on drop down value     $sql="select stitl, ltitl tl2l5 l1l5= '".$q."'";      // execute query      if (!$result = $db->query($sql))     {             die("there error running query [" .$db->error. "]");     }      $data = array();     // step through query result , fetch values     while ($row = $result->fetch_assoc()) {              $stitl = $row['stitl'];             $ltitl = $row['ltitl'];             $data = array( 'stitl' => $stitl, 'ltitl' => $ltitl);     }     echo json_encode($data); ?>  

update: thank @timspqr jsfiddle. helped me on right track. realized issue of own doing. used jsfiddle alert value of var mydata , displayed this:

then went code alert variable , got this:

solution: once marked html comments php comments able use json.parse on xmlhttp.responsetext , populate 2 form fields referencing correct field titles (ex: data.stitl)