使用与下拉菜单中的选择相关的数据库信息填充输入字段

Question

我有一个表格。在表单中，我有一个从数据库填充的人名下拉菜单。表单的其余部分由几个输入字段组成，地址、电话、电子邮件。此信息也存储在同一数据库中。我想要的是当您从下拉菜单中选择一个名称时，其余的表单字段会自动/动态地填充该人的相关数据。没有刷新，没有提交，没有转到刚刚填充的字段的另一个页面。我认为这是一个 ajax 请求，我可能需要表单上的 onChange 函数，但我不确定。不想只使用 jQuery 就使用 javascript。我在这方面没有取得太大的成功，这让我很生气。任何帮助，将不胜感激。这是我的代码的 sn-p 表单：

            <option value="" selected="selected" class="firstLine">select a name</option>               

            <?php $query = "SELECT * FROM customers ORDER BY id ASC";

              $run = mysqli_query($dbc, $query);

              while($row = mysqli_fetch_assoc($run)){ 

              $row['fullname'] = $row['first'].' '.$row['surname'];?>

              <option value="<?php echo $row['id'];?>"><?php echo $row['fullname']; ?></option><?php } ?>

        </select>

        <input type="text" name="address" id="address" value="" disabled="disabled"><br />          

        <input type="text" name="phone" id="phone" value="" disabled="disabled"><br />

        <input type="text" name="email" id="email" value="" disabled="disabled"><br />  

Answer 1

我经常采用的一种方法是创建一个小型 getData 类型的服务端点。

例如在 php 中：*但是您可以在 c# 中轻松地做到这一点，就像我在以下链接中所做的那样。 http://chadcollins.com/json-service-output-from-sql-select-using-c/

1. 创建一个 /services/getData.php 文件并在其中：
2. 确保页面仅在会话经过身份验证/检查身份验证时运行
3. 连接到您的数据库并通过将 sessionUserID 传递给您的选择来执行对数据库的查询。
4. 以 json 格式回显响应
5. 使用 jquery 来处理 ajax（使用原生 js 会有点代码，但如果你愿意也可以。
6. 在您的 UI 中的 onChange() 事件上，考虑使用 ajax 方法来调用您的 services/getData.php 脚本
7. 然后使用返回的 json 数据集合，循环数据并按 id 将值分配给表单字段。

请注意，在我的示例脚本中，我如何打印出 JSON ajax 读取调用所需的格式。如果您想要示例 php 代码，请告诉我，我可能可以将一些东西放在一起。

Answer 2

这是你需要做的

    <option value="" selected="selected" class="firstLine">select a name</option>               

                <?php $query = "SELECT * FROM customers ORDER BY id ASC";

                  $run = mysqli_query($dbc, $query);

                  while($row = mysqli_fetch_assoc($run)){ 

                  $row['fullname'] = $row['first'].' '.$row['surname'];?>

                  <option value="<?php echo $row['id'];?>" onchange="getdata()"><?php echo $row['fullname'];?></option>
    <input type="hidden" name="addressinfo" value="<?php echo $row['address']?>">
    <input type="hidden" name="phoneno" value="<?php echo $row['phone']?>">
    <input type="hidden" name="emailid" value="<?php echo $row['email']?>">

    <?php } ?>

            </select>

            <input type="text" name="address" id="address" value="" disabled="disabled"><br />          

            <input type="text" name="phone" id="phone" value="" disabled="disabled"><br />

            <input type="text" name="email" id="email" value="" disabled="disabled"><br /> 



now you can use javascript to populate the value to those input boxes
<script>
function myFunction() {
var phone= document.getElementById("phoneno").value;
 var address = document.getElementById("addressinfo").value;
var email= document.getElementById("emailid").value;
document.getElementById('phone').value(phone);
document.getElementById('email').value(email);
document.getElementById('address').value(address);
}
</script>