通过从下拉菜单中选择一个选项来设置 HTML 输入值，而数据存储在 MySQL 数据库中答案

【问题标题】：Setting HTML input values by choosing an option from a dropdown menu, while the data is stored in a MySQL DB通过从下拉菜单中选择一个选项来设置 HTML 输入值，而数据存储在 MySQL 数据库中
【发布时间】：2018-03-23 12:28:28
【问题描述】：

在问这个问题之前，这里有一些关于我正在使用的架构的信息：

使用 PHP 的动态网站
数据被加载并存储到 MySQL DB 中
现在我正在尝试通过 Javascript 实现“实时”功能

我现在尝试实现的功能如下：

我的网站上有一个表格可以让您为客户设置条件
为了方便用户，我现在创建了几组“标准条件”
这个想法是，用户可以在页面顶部从下拉菜单中选择“标准条件类别”，所有输入都填充为此标准存储的值
之后，用户只需更改与标准不同的输入
由于这些标准被维护并存储在 MySQL 中，我需要动态创建所需的 JavaScript

这就是我得到的：

这是表格的一部分。顶部是下拉列表，我在其中添加了 onchange 事件：

<form class="form-signin" action="system.php?site=editterms&id=6" method= "post">
            <div class="form-group">
                <label for="from">G&uuml;ltig von</label>
                <input type="month" min="2018-03" value="2018-03" class="form-control" name="from" required>
            </div>
            <div class="form-group">
                <label for="function">Funktion</label>
                <select class="form-control" name="function" id="function" onchange="functionchange();" required>
                    <option value="1">BDM</option>
                    <option value="2">Minijob</option>
                    <option value="3">SVP</option>
                </select>
            </div>
            <div class="form-group">
                <label for="type">Verg&uuml;tungstyp</label>
                <select class="form-control" name="type" id="type" required>
                    <option value="truemonthly">Monatslohn (Feste monatliche Verg&uuml;tung)</option>
                    <option value="truehourly">Echter Stundenlohn (Monatsgehalt nach geleisteter Arbeit)</option>
                    <option value="monthlyhourly">Gleitzeit Stundenlohn (Monatsgehalt nach Wochenarbeitszeit)</option>
                    <option value="mixed">Gemischt - Monatliches Festgehalt zzgl. Stundenverg&uuml;tung</option>
                </select>
            </div>
            <div class="form-group">
                <label for="hourly">Stundenlohn</label>
                <input  type="number" step="0.01" class="form-control" name="hourly" id="hourly" value="0" required>
            </div>
            <div class="form-group">
                <label for="monthly">Monatslohn</label>
                <input  type="number" step="0.01" class="form-control" name="monthly" id="monthly" value="0" required>
            </div>

这里是动态生成所需 Javascript 的 PHP 代码：

<script>
    function functionchange()
{
    var selection = document.getElementById('function').selectedOptions[0].text
    <?php
    $query3 = "SELECT * FROM functions";
        foreach ($dbc->query($query3) as $row3) {
            echo "
    var ".$row3['F_Name']." = {wagetype:\"".$row3['F_Wagetype']."\", hourly:\"".$row3['F_Hourly']."\", monthly:\"".$row3['F_Monthly']."\", weeklyhours:\"".$row3['F_Weeklyhours']."\", rvb:\"".$row3['F_RVB']."\", holiday=\"".$row3['F_Holidayentitlement']."\"};";
        }
    ?>
    document.getElementById('type').value = eval(selection).wagetype;
    document.getElementById('hourly').value = eval(selection).hourly;
    document.getElementById('monthly').value = eval(selection).monthly;
    document.getElementById('weeklyhours').value = eval(selection).weeklyhours;
    document.getElementById('rvb').checked = eval(selection).rvb;
    document.getElementById('holiday').value = eval(selection).holiday;
}
</script>

这会在运行时产生以下代码：

<script>
function functionchange()
{
    var selection = document.getElementById('function').selectedOptions[0].text

    var BDM = {wagetype:"truemonthly", hourly:"0", monthly:"450", weeklyhours:"0", rvb:"0", holiday="0"};
    var Minijob = {wagetype:"monthlyhourly", hourly:"10.55", monthly:"0", weeklyhours:"2", rvb:"0", holiday="20"};
    var SVP = {wagetype:"monthlyhourly", hourly:"11.2", monthly:"0", weeklyhours:"12.5", rvb:"0", holiday="25"};    document.getElementById('type').value = eval(selection).wagetype;
    document.getElementById('hourly').value = eval(selection).hourly;
    document.getElementById('monthly').value = eval(selection).monthly;
    document.getElementById('weeklyhours').value = eval(selection).weeklyhours;
    document.getElementById('rvb').checked = eval(selection).rvb;
    document.getElementById('holiday').value = eval(selection).holiday;
}
</script>

问题是：JavaScript 不起作用。我觉得它可能与 eval() 函数有关，但在此示例中我需要使用动态变量名，因此我可以根据函数的选择打开正确的数组。

感谢任何帮助！

更新：这是生成的 HTML 页面的完整代码。似乎甚至没有调用 JavaScript 函数！（没有弹出消息框...）

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="Betreuungsdienst Verwaltungstoolkit">
        <meta name="author" content="Marcel Lehmann">
        <link rel="icon" href="./img/logo.gif">
        <link rel="stylesheet" href="./css/bootstrap.min.css">
        <title>Betreuungsdienst verwaltungstoolkit</title>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

<script>
window.alert("Script geladen!");
function functionchange()
{
    window.alert("Function Called!");
    var selection = document.getElementById('function').selectedOptions[0].text;

    var BDM = {wagetype:"truemonthly", hourly:"0", monthly:"450", weeklyhours:"0", rvb:"0", holiday="0"};
    var Minijob = {wagetype:"monthlyhourly", hourly:"10.55", monthly:"0", weeklyhours:"2", rvb:"0", holiday="20"};
    var SVP = {wagetype:"monthlyhourly", hourly:"11.2", monthly:"0", weeklyhours:"12.5", rvb:"0", holiday="25"};
    eval("document.getElementById('type').value = "+selection+".wagetype");
    eval("document.getElementById('hourly').value = "+selection+".hourly");
    document.getElementById('monthly').value = eval(selection).monthly;
    document.getElementById('weeklyhours').value = eval(selection).weeklyhours;
    document.getElementById('rvb').checked = eval(selection).rvb;
    document.getElementById('holiday').value = eval(selection).holiday;
}
</script>
    </head>
    <body>
    <div class="container">

      <!-- Static navbar -->
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-left"><img src="./img/logo.gif" alt="" height="49"></a><a class="navbar-brand">&nbsp;Betreuungsdienst Meissner</a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li ><a href="system.php">Start</a></li>
              <li ><a href="system.php?site=myuser">Meine Daten</a></li>
              <li ><a href="system.php?site=createreports">Zeitmeldung erstellen</a></li>
              <li ><a href="system.php?site=myreports">Meine Zeitmeldungen</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Administration<span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li class="dropdown-header">Mitarbeiter</li>
                  <li ><a href="system.php?site=editusers">Mitarbeiter verwalten</a></li>
                  <li ><a href="system.php?site=editfunctions">Funktionen verwalten</a></li>
                </ul>
              </li>
              <li><a href="login.php?Logout">Abmelden</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>
      <div class="jumbotron"><p>Mitarbeitervertragsbedingungen verwalten</p><table class="table">
    <thead class="thead-default">
        <tr>
            <th>G&uuml;ltig von</th>
            <th>G&uuml;ltig bis</th>
            <th>Funktion</th>
            <th>Verg&uuml;tungstyp</th>
            <th>Monatslohn</th>
            <th>Stundenlohn</th>
            <th>Wochenarbeitszeit</th>
            <th>RV-Befreiung</th>
            <th>Urlaubsanspruch</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>2018-03-01</th>
            <th>9999-12-31</th>
            <th>Minijob</th>
            <th>Echter Stundenlohn (Monatsgehalt nach geleisteter Arbeit)</th>
            <th>0</th>
            <th>10</th>
            <th>2</th>
            <th>1</th>
            <th>20</th>
        </tr>
    </tbody>
</table>
        <form class="form-signin" action="system.php?site=editterms&id=6" method= "post">
            <div class="form-group">
                <label for="from">G&uuml;ltig von</label>
                <input type="month" min="2018-03" value="2018-03" class="form-control" name="from" required>
            </div>
            <div class="form-group">
                <label for="function">Funktion</label>
                <select class="form-control" name="function" id="function" oninput="functionchange()" required>
                    <option value="1">BDM</option>
                    <option value="2">Minijob</option>
                    <option value="3">SVP</option>
                </select>
            </div>
            <div class="form-group">
                <label for="type">Verg&uuml;tungstyp</label>
                <select class="form-control" name="type" id="type" required>
                    <option value="truemonthly">Monatslohn (Feste monatliche Verg&uuml;tung)</option>
                    <option value="truehourly">Echter Stundenlohn (Monatsgehalt nach geleisteter Arbeit)</option>
                    <option value="monthlyhourly">Gleitzeit Stundenlohn (Monatsgehalt nach Wochenarbeitszeit)</option>
                    <option value="mixed">Gemischt - Monatliches Festgehalt zzgl. Stundenverg&uuml;tung</option>
                </select>
            </div>
            <div class="form-group">
                <label for="hourly">Stundenlohn</label>
                <input  type="number" step="0.01" class="form-control" name="hourly" id="hourly" value="0" required>
            </div>
            <div class="form-group">
                <label for="monthly">Monatslohn</label>
                <input  type="number" step="0.01" class="form-control" name="monthly" id="monthly" value="0" required>
            </div>
            <div class="form-group">
                <label for="weeklyhours">Wochenarbeitszeit</label>
                <input  type="number" step="0.01" class="form-control" name="weeklyhours" id="weeklyhours" value="0" required>
            </div>
            <div class="form-group">
                <label for="rvb">RV-Befreiung</label>
                <input type="hidden" class="form-control" name="rvb" value=0>
                <input type="checkbox" class="form-control" name="rvb" id="rvb" value=1>
            </div>
            <div class="form-group">
                <label for="holiday">Urlaubsanspruch</label>
                <input  type="number" step="1" class="form-control" name="holiday" id="holiday" value="20" required>
            </div>
            <button class="btn btn-lg btn-primary btn-block" type="submit" name="NewUserTerm">Neue Mitarbeitervertragsbedingung hinzuf&uuml;gen</button>
        </form>
      </div>

    </div> <!-- /container -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="./js/vendor/jquery.min.js"><\/script>')</script>
    <script src="./js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="./js/ie10-viewport-bug-workaround.js"></script>
  </body></html>

【问题讨论】：

“JavaScript 不工作。” - 以什么方式？没发生什么事？控制台中的错误？数据错误？有没有调试过？
什么也没发生。没有错误，只是完全没有反应。
我现在已经发布了完整的结果网站，因为它只能是 JavaScript 部分的问题......
我想知道是否没有javascript错误。 json 中的最后一个属性格式错误（= 而不是 :）。我猜在解析脚本时打开页面时已经发生错误。顺便说一句，我建议使用一个 JSON 对象而不是多个变量，这样您就可以在不使用“eval”的情况下访问属性。
oninput 函数似乎只适用于输入和文本区域，不适用于文本框

标签： javascript php html mysql

【解决方案1】：

问题实际上是在 JSON 对象中使用 = 而不是 :。感谢 Philipp 的帮助，现在它按预期工作了！

【讨论】：