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