根据来自其他字段的输入,使用mysql字段填充数据列表,而无需重新加载页面

时间:2019-05-29 19:36:36

标签: php html mysql ajax

我正在尝试建立一个datalist标记,该标记基于表单上第一个字段的输入来使用数据库中的字段。

我正在尝试使用AJAX将第一个字段(构建器)中的值发送到我的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'].'">';

}
  ?>

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

现在,它没有在联系人姓名字段中填充任何内容。

1 个答案:

答案 0 :(得分:0)

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

in 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更改为您的真实列名