php - 根据另一个字段的输入使用 mysql 字段填充数据列表，而无需重新加载页面

Question

我正在尝试设置一个数据列表标记，该标记根据表单上第一个字段的输入使用数据库中的字段。

我正在尝试使用 AJAX 将第一个字段 (Builder) 中的值发送到我的 PHP 文件中，该文件将运行查询以根据该值提取所有记录。然后，它将选项回显到该生成器下所有可用联系人姓名的数据列表中。

<form id="newsurveyform" method="post" action="submitnewsurvey.php">
        ID: <input type="text" name="ID" readonly value=<?php print $auto_id; ?>>&nbsp;
Builder:<b style="color:red">*</b> <input list="builders" name="builders" onchange="findcontactnames(this.value)" required>
    <datalist id="builders">
    <?php 
        while ($builderinforow = mysqli_fetch_assoc($builderinfo)){
        echo'<option value="'.$builderinforow['Builder'].'">';
    }
    ?>
    </datalist>



       Contact Name:
       <input list="contactnames" name="contactnames" required>
        <datalist id="contactnames">
        <div id="contactnamesoptions"> </div>
        </datalist>
       </form>



        <!-- AJAX, send builder value to php file-->        
        <script>
        function findcontactnames(str) {
        if (str.length==0){
           document.getElementById("contactnames").innerHTML = "";
        return;}
        else{
        var xmlhttp = new XMLHttpRequest(); 
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("contactnamesoptions").innerHTML = this.responseText;
            }};
        xmlhttp.open("POST", "contactnames.php", true)
        xmlhttp.send(str);
           }
           } 
        </script>   
<?php
include 'dbconnector.php';

$buildername = $_POST["Builder"];

$contactnames = $conn->query("SELECT ContactName FROM SurveyLog'.$buildername.'");

while ($contactnamerow = mysqli_fetch_assoc($contactnames)){
          echo'<option value="'.$contactnamerow['ContactName'].'">';

}
  ?>

用户进入构建器后，他们将单击联系人姓名，并且应填充该构建器下的所有联系人姓名。

目前，它没有在联系人姓名字段中填充任何内容。

Answer 1

在index.php中

  <form id="newsurveyform" method="post" action="submitnewsurvey.php">
    ID: <input type="text" name="ID" readonly value=<?php print $auto_id ?? 0; ?>>&nbsp;
    Builder:<b style="color:red">*</b> <input list="builders" name="builders" onchange="findcontactnames(this.value)" required>
    <datalist id="builders">
      <?php
        while ($builderinforow = mysqli_fetch_assoc($builderinfo)){
          echo'<option value="'.$builderinforow['Builder'].'">';
        }
      ?>
    </datalist>

    Contact Name:
    <input list="contactnames" name="contactnames" required>
    <datalist id="contactnames">
      <div id="contactnamesoptions"> </div>
    </datalist>
  </form>

  <!-- AJAX, send builder value to php file-->
  <script>
    function findcontactnames(str) {
      if (str.length==0){
        document.getElementById("contactnames").innerHTML = "";
        return;
      } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
          console.log(this);
          if (this.readyState == 4 && this.status == 200) {
            alert('Fired');
            document.getElementById("contactnamesoptions").innerHTML = this.responseText;
            // document.getElementById("contactnamesoptions").innerHTML = "working";
          }
        };
        xmlhttp.open("POST", "response.php", true)
        xmlhttp.send(str);
       }
     }
  </script>

在response.php中

<?php echo "test"; ?>

验证有效后，查询数据库

编辑:现在您已经验证了这一点，请在response.php中查询数据库

include 'dbconnector.php';
  $buildername = $_POST["Builder"];
  $contactnames = $conn->query("SELECT ContactName FROM SurveyLog WHERE `columnName` LIKE '.$buildername.' LIMIT 100");
  $queryHTML = '';
  $result = 0;
  while ($contactnamerow = mysqli_fetch_assoc($contactnames)){
    $result = 1;
    $queryHTML .= '<option value="'.$contactnamerow['ContactName'].'">';
  }
  if ($result == 1) {
    echo $queryHTML;
  } else {
    echo 'No Builders found';
  }

注意:将查询中的columnName更改为您真实的列名称