javascript - 根据下拉字段选择从数据库填充表单文本字段

标签 javascript php mysql forms

我翻阅了很多帖子,但在这里找不到这样的场景...

我有一个 PHP 表单,其中包含一个下拉选项,其中包含来自 MySQL 数据库表的选项值。这部分工作正常。这是我需要帮助的地方...

有一个 textarea 字段,我需要用来自同一个数据库表但不同字段的数据填充。该表包含一个“名称”和一组相应的“文本”。下拉列表将“名称”显示为选项。所以我需要的是当做出选择时,脚本运行(如 onChange)...获取所选值,查询数据库以获取与所选“名称”关联的“文本”。然后,该“文本”显示在文本区域表单域内。

此代码的一部分供您查看:

echo "<form action=$PHP_SELF method=\"post\">\n";
echo "<select id=\"conditions\" name=\"conditions\">\n";
echo "<option value=\"Select\" selected>Select a Message</option>\n";

$result = mysqli_query($link, "SELECT * FROM db_scripts");
while ($data = mysqli_fetch_object($result)) {
    echo "<option value=".$data->script_id.">".$data->script_name."</option>\n";
}

echo "</select>\n";

echo "<br><textarea name=\"message\" style=\"width:300px; height:130px\" data-maxsize=\"160\" data-output=\"status1\" wrap=\"virtual\" maxlength=\"160\"></textarea><br />\n";

所以,就像我说的,这部分工作得很好。我有带有“script_name”作为选项的下拉菜单。现在我只需要将相应的消息放入文本区域“消息”字段中。非常感谢任何帮助!

最佳答案

以这种格式在 PHP 中创建关联的 javascript 对象文字数组:

<?php
echo "
<!-- this script goes in your <head> -->\n
<script>\n
var db_array = [";
$result = mysqli_query($link, "SELECT * FROM db_scripts");
$first = TRUE; // remove trailing comma from array
while ($data = mysqli_fetch_object($result)) {
  if ($first === TRUE) $first = FALSE;
  else echo ',';
  echo "
  {
    id: '$data->script_id',
    name: '$data->script_name'
    message: '$data->script_message'
  }";
}
echo "];\n
</script>";
?>

要注意的是,如果您的消息与 id 不在同一行,那么您需要使用 JOIN在您的查询中。这部分背后的想法是您只查询一次数据库。您不希望客户端每次在下拉菜单中切换选项时都查询数据库。这里的异常(exception)是如果您有超过 MB 的消息。在这种情况下,请考虑实现缓存措施。

继续......一旦你构建了数组,你就可以构建你的<option> s 像这样遍历数组:

<?php
echo "
<form action=\"$PHP_SELF\" method=\"post\">\n
<select id=\"conditions\" name=\"conditions\">\n
<option value=\"Select\" selected>Select a Message</option>\n
<script>\n
for (var i = 0; i < db_array.length; i++) {\n
  document.write('<option value=\"'+db_array[i].id+'\">'+db_array[i].name+'</option>');\n
}\n
</script>\n
</select>\n
<!-- notice the id attribute I added -->\n
<br><textarea id=\"message\" name=\"message\" style=\"width:300px; height:130px\" data-maxsize=\"160\" data-output=\"status1\" wrap=\"virtual\" maxlength=\"160\"></textarea><br />\n";
?>

...然后有一个脚本可以访问这些动态创建的 DOM 元素(例如,在 <body> 标记的末尾)

<script>
// returns the db_array index of the object id supplied
function returnIndex (id) {
  for (var i = 0; i < db_array.length; i++) {
    if (db_array[i].id === id) return i;
  }
  return -1; // returns index of -1 if id is not found
}
// changes the <textarea> message. notice the id I added to the messages <textarea> above
function changeMessage (id) {
  // remember to handle the case of an id not being found within db_array (where returnIndex returns -1)
  document.getElementById('message').innerHTML = db_array[returnIndex(id)].message;
}
// on the event that we switch options, do this event. realize that you'll have to run the changeMessage function once the page loads if you want the first option's message to show
document.getElementById('conditions').onchange = function() {
  changeMessage(this.selectedIndex);
}
</script>

关于javascript - 根据下拉字段选择从数据库填充表单文本字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19822704/

相关文章:

javascript - 通过JQuery重定向到另一个页面

php - 没有周末的日差

php - Slim PHP 和 GET 参数

php - 从数据库打印数据时出错;打印多次

MySQL查询一个结果

javascript - 检查滚动条是否到达了带有jquery的div

javascript - 如何从 html select 中删除选定的选项?

javascript - 使用 for 循环在 Javascript 中创建仅包含重复项的新数组

mysql - mysql中这个标记 ":="是什么意思?

php - 在数据库中存储 PHP session 数据的最佳实践是什么?