基于 HTML 下拉选择填充输入

Question

我知道 Stack Overflow 上有很多类似这样的问题，但我确实需要一些与我正在做的事情更相关的问题......所以这就是我发布这个问题的原因。

我有一个带有 PHP 的 HTML 表单，它从 MSSQL 数据库中提取数据以填充下拉框。从下拉框中选择名称后，我希望能够填充联系信息文本框。到目前为止，如果我选择特定供应商，供应商名称会自动输入到名称、电子邮件和电话号码字段中。但是，我希望在文本字段中输入不同的属性，而不是供应商名称本身。我怎么能这样做？

数据库中包含我想要导入的姓名、电子邮件和电话号码的字段名为 MR_POC_N、MR_POC_E 和 MR_POC_P

您看到的“MR_Name”也是所有供应商名称的字段，仅供参考

这是我的 HTML 下拉列表代码：

<select name="vendor_dropdown" id="ven" onChange="updateinput();">
    <option value="">Choose a Vendor</option>
        <?php foreach($users->fetchAll() as $user): ?>
            <option><?php echo $user['MR_Name'];?></option>
        <?php endforeach; ?>
</select>

这是我的联系信息代码：

<table align="center">
    <tr>
        <td align="right">Name:</td>
        <td><input class="textbox" type="text" id="name" name="name"></td>
    </tr>
    <tr>
        <td align="right">Email:</td>
        <td><input class="textbox" type="email" id="email" name="email"></td>
    </tr>
    <tr>
        <td align="right">Phone Number:</td>
        <td><input class="textbox" type="tel" id="tel" name="number"></td>
    </tr>
</table>

这是我在 JS 中的更新输入功能。我知道这是关闭的，但正在寻找某种方向，因为我不是 JS 中最好的：

function updateinput() {


    var e = document.getElementById("ven");
        var venSelected = e.options[e.selectedIndex].value;

        document.getElementById("name").value=venSelected;
        document.getElementById("email").value=venSelected;
        document.getElementById("tel").value=venSelected;
    }

Answer 1

保持您的脚本与当前相同，但更改您的 JavaScript 和下拉菜单。在您的下拉列表中尝试做

<option value = "<?=$user['MR_Name'];?>"><?php echo $user['MR_Name'];?></option>

您想要发出所谓的 AJAX 请求。这将允许您转到另一个页面获取一些数据，如果您将获取一些用户信息，并将其返回到该页面，而无需用户实际更改页面！

查看this 链接以获取有关 AJAX 的更多信息。

您的 AJAX 调用将如下所示。

function updateinput() {
    var e = $("#ven").val();

    $.ajax({
        url: "get-user-info.php",
        type: "POST",
        data: {e: e},
        success: function(data){
            data = JSON.parse(data);

            var email = data[0];
            var tel = data[1];

            $("#email").val(email);
            $("#tel").val(tel);
        }
    });
}

此脚本首先获取下拉列表的选定值。然后它开始进行 AJAX 调用，就像提交表单一样，我们将值发布到下一页。因此，AJAX 将与之交谈的页面是get-user-info.php，它正在发布数据中的值。数据通过e 发送，这就是下拉值。成功后，它将执行下面的代码，将 PHP 数组中的数据解析为 JavaScript，然后说 email 是数组的第一个值，tel 是数组的第二个值。然后我们说 ID 为“email”的输入现在等于数组中的email，ID 为“tel”的输入现在等于数组中的tel。

您现在需要在名为 get-user-info.php 的同一目录中创建一个 php 脚本

在此脚本中调用您的数据库，其中用户与所选值 e 相同，并返回一个如下所示的 PHP 数组：

array(email, telephone)

这是您的 PHP 脚本 get-user-info.php 的伪代码：

<?php

$e = $_POST["e"];
//Do your SQL

//In the loop
$array[] = $user["email"];
$array[] = $user["tel"];

echo json_encode($array);
?>