JSON Parse xmlhttp.requestText

Question

I have a form that has a dynamic drop down select that when a value is selected it auto populates two other form fields, short and long description. I am trying to use Ajax to retrieve the short and long desc based on the value of the drop down select. I can receive the xmlhttp.responseText data and display it back on the form page but I am unable to parse the responseText out to the respective form fields.

You can see the responseText displayed above "Add New Record" title. It might be hard to read so here it is again: (I was thinking I might have the 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 the user selects a value from the dynamic drop down it executes this JS function:

function populate(str)
{
     if (str=="")
     {
          document.getElementById("shortDesc").innerHTML="";
          return;

      }

      // Create an object 
      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 (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 that the following code (see below) doesn't work because it's being referenced wrong, plus it hasn't been parsed yet. I was just throwing that in there for reference as to why the form fields are "undefined"

document.getElementById("shortDesc").value=xmlhttp.responseText.shortDesc
document.getElementById("longDesc").value=xmlhttp.responseText.second;

Then the JS function goes out to the getL2L5 PHP script:

<?php

    define('DBHOST','**************');
    define('DBUSER','********');
    define('DBPASS','**********');
    define('DBNAME','**********');

    //Connect to database
    if (!$db = new mysqli(DBHOST, DBUSER, DBPASS, DBNAME)) die("Can't connect to database");

    // Retrieve the value from the title org drop down select 
    $q = $_GET['q']; 

    // Pull the Ltitl and Stitl based on the drop down value
    $sql="SELECT Stitl, Ltitl FROM tl2l5 WHERE l1l5= '".$q."'";

    // Execute the query 
    if (!$result = $db->query($sql))
    {
            die("There was an error running the query [" .$db->error. "]");
    }

    $data = array();
    // Step through the query result and fetch the values
    while ($row = $result->fetch_assoc()) {

            $Stitl = $row['Stitl'];
            $Ltitl = $row['Ltitl'];
            $data = array( 'Stitl' => $Stitl, 'Ltitl' => $Ltitl);
    }
    echo json_encode($data);
?> 

UPDATE: Thank you @TimSPQR for the JSFiddle. This helped me get on the right track. I realized my issue was of my own doing. I used your JSFiddle to alert the value of var mydata and it displayed this:

then I went to my code to alert my variable and got this:

SOLUTION: Once I marked the html comments as php comments I was able to use JSON.parse on the xmlhttp.responseText and populate the two form fields referencing their correct field titles (ex: data.Stitl)