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

标签 javascript php html mysql

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

  • PHP 动态网站
  • 数据被加载并存储到 MySQL 数据库中
  • 现在我正尝试通过 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>

最佳答案

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

关于javascript - 通过从下拉菜单中选择一个选项来设置 HTML 输入值，同时数据存储在 MySQL 数据库中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49449681/

上一篇：MySQL - 带有 IN 子句的查询表现不佳

下一篇：mysql - 如何创建一个在 10 天后自动更新状态的事件？

相关文章：

javascript - 即使 Promise.resolve() 的 Promise 解析也是异步完成的？

php - 如何在 php 中对来自 mysql 的多个结果进行编码...我得到 5 个结果，但是当我运行 API 时，它没有显示任何 JSON 格式的数据

php - 调用未定义的方法 DbConn::prepare()

javascript - 如何从 Laravel 4.2 中的 View 脚本调用模型函数

Android 浏览器中的 JavaScript 按键事件验证

javascript - 正则表达式删除所有非字母数字并用 + 替换空格

Javascript递归settimeout

javascript - 视频有时可以很好地加载，有时却需要很长时间才能加载，或者根本不加载？

javascript - 从 API 获取 ember 组件中的数据

javascript - Exif.js 始终返回 "undefined"

©2024 IT工具网  联系我们