0

我的表单具有动态下拉的选择，选择一个值时，它会自动填充其他两个表单字段，即短而长的描述。我正在尝试使用Ajax根据下拉选择的值来检索短和长 desc。我可以接收xmlhttp.responseText数据并将其显示在表单页面上，但我无法将 responseText解析为相应的表单字段。

您可以看到“添加新记录”标题上方显示的 responseText。可能很难阅读，所以又来了：（我在想我可能有错误的格式）

{"Stitl":"CHF STAFF","Ltitl":"Chief Of Staff"}

在此处输入图像描述

HTML 文件：

<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>

然后用户从动态下拉列表中选择一个值，它执行这个 JS 函数：

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();
 }

我知道下面的代码（见下文）不起作用，因为它被错误地引用，而且它还没有被解析。我只是把它扔在那里以供参考为什么表单字段是“未定义的”

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

然后 JS 函数输出到 getL2L5 PHP 脚本：

<?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);
?>

更新： 感谢您@TimSPQR的 JSFiddle。这帮助我走上了正确的轨道。我意识到我的问题是我自己做的。我用你的 JSFiddle 来提醒它的值，var mydata它显示了这个：

在此处输入图像描述

然后我去我的代码提醒我的变量并得到这个：

在此处输入图像描述

解决方案：一旦我将 html 注释标记为 php 注释，我就可以在 xmlhttp.responseText 上使用 JSON.parse 并填充引用其正确字段标题的两个表单字段（例如：data.Stitl）

4

0 回答 0