我知道 Stack Overflow 上有很多这样的问题,但我真的需要一些与我正在做的事情更相关的东西......所以这就是我发布这个问题的原因。
我有一个带有 PHP 的 HTML 表单,它从 MSSQL 数据库中提取数据以填充下拉框。我希望能够在我从下拉框中选择一个名称后填充联系信息文本框。到目前为止,如果我选择一个特定的 vendor , vendor 名称会自动输入到名称、电子邮件和电话号码字段中。但是,我想在文本字段中输入不同的属性,而不是 vendor 名称本身。我怎么能这样做?
我的数据库中包含我要导入的姓名、电子邮件和电话号码的字段名为 MR_POC_N、MR_POC_E 和 MR_POC_P
此外,您看到的“MR_Name”是包含所有 vendor 名称的字段,仅供引用
这是我的 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;
}
最佳答案
保持您的脚本与当前相同,但更改您的 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,然后它表示电子邮件是数组的第一个值,电话是数组的第二个值。然后我们说 ID 为“email”的输入现在等于数组中的 email
,ID 为“tel”的输入现在等于数组中的 tel
。
您现在需要在同一目录中创建一个名为 get-user-info.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);
?>
关于javascript - 基于 HTML 下拉选择填充输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39703937/