根据下拉选择填充文本字段
Populate Textfields Depending on Dropdown Selection
我知道在Stack Overflow上有很多这样的问题,但我真的需要一些与我正在做的事情更相关的东西…所以这就是为什么我张贴这个问题。
我有一个HTML表单与PHP,从一个MSSQL数据库中提取数据,以填充下拉框。一旦我从下拉框中选择了一个名字,我希望能够填充联系人信息文本框。到目前为止,如果我选择一个特定的供应商,供应商名称会自动输入到name、Email和Phone Number字段中。但是,我希望在文本字段中输入不同的属性,而不是供应商名称本身。我怎么能这么做?
我要导入的数据库中包含姓名、电子邮件和电话号码的字段命名为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>
这是我在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;
}
这是我的联系信息代码:
<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>
由于您想要填充的数据已经在'$user'变量中,因此实现您想要做的事情的最佳方法是使用数据属性。
这很简单,你把你的数据存储在你的选项的属性中,然后你可以从你的js中访问这些值,这里是你可以做到的:
<select name="vendor_dropdown" id="ven" onChange="updateinput();">
<option value="">Choose a Vendor</option>
<?php foreach($users->fetchAll() as $user): ?>
<option
data-name="<?php echo $user['MR_POC_N'];?>"
data-email="<?php echo $user['MR_POC_E'];?>"
data-phone="<?php echo $user['MR_POC_P'];?>"
>
<?php echo $user['MR_Name'];?>
</option>
<?php endforeach; ?>
</select>
这样你的所有数据都可以从js端访问:
var venSelected = e.options[e.selectedIndex];
document.getElementById("name").value = venSelected.dataset.name
这里有一个关于数据属性的链接,它永远不会有坏处;)
https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes相关文章:
- 使用JSON文件中的变量(字符串)填充文本区域
- JavaScript在其他页面上用html内容填充文本框
- 如何制作每次填充文本框时都会填充的进度条
- 使用两个下拉列表的值填充文本框
- 编辑后无法用Javascript填充文本框
- HTML5使用Javascript填充文本标记的有效方式
- 填充文本框取决于php中的下拉选择
- html5具有特定alpha的画布填充文本和具有不同alpha的背景
- 如何从选定的组合框中填充文本框
- 点击剑道网格的编辑,在剑道窗口中填充文本框/DDL
- 有没有一种方法可以用包含ENTER键换行符的SQL数据填充文本区域表单
- 从下拉框中获取选定的值,并使用来填充文本框php javascript
- 使用带有数据库信息的下拉菜单填充文本框
- 使用php创建的下拉列表中的选择单独填充文本区域
- 使用JavaScript返回click-li项目的值,并用结果填充文本区域
- 用数字而不是文本填充文本框值
- 使用表单按钮填充文本输入
- 在模式窗口中填充文本区域
- 填充文本不起作用
- 我正在用来自选择的数据填充文本框,它可以工作,但是