根据HTML下拉列表选择填充输入

时间:2016-09-26 13:15:35

标签: javascript php html sql-server auto-populate

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

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

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

您看到的“MR_Name”也是包含供应商FYI

所有名称的字段

以下是我的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;
    }

1 个答案:

答案 0 :(得分:0)

保持脚本与目前相同,但更改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的解析数据,然后它说电子邮件是数组的第一个值,tel是数组中的第二个值。然后我们用ID&#39;电子邮件&#39;现在等于数组中的email和输入ID&#39; tel&#39;现在等于数组中的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);
?>