Javascript 使用来自以下数据库的输入填充下拉框'；d导致另一个填充页面

因此，我自愿在工作中创建一个用户表单，并认为我应该添加一个有趣的小技巧，用HTML/CSS/PHP/mySQL而不是MS word来实现

基本上，这是一个用于从数据库中添加和删除用户的表单。我已经完成了初始表单，创建了一个PHP文件来保存数据库中的所有内容，并将其正确链接

我的问题是，如何创建一个包含所有姓名/姓氏/ID的下拉列表的页面，浏览该页面的用户可以单击“提交”并获取有关该用户的所有信息

我已经在谷歌上搜索了好几个小时了，但没有用，因为似乎有些人也有类似的问题，但也遗漏了一些我需要的大拼图

我知道这听起来有点混乱，所以这里是我的代码，以便您能更好地了解：

HTML:

@charset“UTF-8”；
桌子
th，
td{}表{
边界塌陷：塌陷；
}
运输署{
填充：3倍；
}
输入[type=“text”]，
文本区{
背景色：#F8FCFF；
边框：2个实心#eeeeee；
颜色：#333333；
字号：0.9em；
字体风格：普通；
字体大小：400；
字体系列：Tahoma；
赫尔维蒂卡；
}
身体{
背景色：#e6；
保证金：0自动；
}
f{
字体风格：普通；
字号：550；
字体系列：无衬线；
源sans-pro；
}
比格博尔德{
字体风格：普通；
字体大小：粗体；
字体大小：20px；
字体系列：无衬线；
源sans-pro；
}
信息{
字体风格：普通；
字体大小：粗体；
字体系列：无衬线；
源sans-pro；
}
.tr顶部{
边框顶部：1件纯黑；
}
左{
左边框：1pt纯黑；
}
.td左{
左边框：1pt纯黑；
宽度：35%；
}
.复选框标签{
显示：块；
浮动：左；
右边填充：10px；
空白：nowrap；
}
.复选框输入{
垂直对齐：中间对齐；
}
.复选框标签范围{
垂直对齐：中间对齐；
}
#车身1{
宽度：1000px；
背景：#fff；
身高：100%；
}
#包装纸{
最大宽度：1000px；
身高：100%；
背景：#fff；
保证金：0px自动0；
填充：20px；
}
#颜色{
背景：#C6DEFF；
}

无标题
文件
申请日期：


请求者：




新用户信息


员工姓氏：
名字
中名
就业类型
永久的
暂时的
承包商
安置
其他
性别


M
F
部门


职位名称
经理姓名
开始日期


完成日期


完整地址：




要使用的用户组/配置文件：
将包括的通讯组：
共享驱动器访问：


共享驱动器上的权限（详细信息）：




附加信息


所需项目列表（在项目旁边的框中打勾）：
 
所需软件/驱动器访问列表：
驱动器：
软件：
iPad+手机壳
老鼠
销售额
销售人员
iPhone+手机壳
笔记本电脑包
营销
虚拟专用网
笔记本电脑
台式电话
一般的
终端服务器
桌面
<?php
//Connection to database
$connection = mysqli_connect('localhost', 'root', 'your_password', 'your_database');
mysqli_set_charset($connection, 'utf8');
if (!$connection) {
    die("Database connection failed: " . mysqli_error());
}

//Simple query to populate the select box
$query = "SELECT id, FirstName, LastName FROM TestTable ORDER BY FirstName ASC, LastName ASC, id ASC;";
$result = mysqli_query($connection, $query);
if (mysqli_num_rows($result) > 0) { //If there are records in database table

    echo '<select id="user" name="user">';
    while ($row = mysqli_fetch_array($result)) {
        echo '<option value="'.$row['id'].'">'.$row['FirstName'].' '.$row['LastName'].'</option>';
    }
    echo '</select>';

} else {
    echo '<p class="alert">There are no data to select from.</p>';
}
?>
<div id="results">
</div>

<script>
    $(document).ready(function(){
        //Each time that the value of select box changes then make an ajax call and bring the user details
        $('#user').on('change', function() {
            var id = $(this).val();
            $.ajax({
                async: false,
                url: "ajax.php",
                type: "POST",
                data: {id : id},
                dataType: "json",
                success: function(data) {
                    //Check if data is empty or make some other validations
                    var firstName = data.FirstName;
                    var lastName = data.LastName;
                    var fullAddress = data.FullAddress;
                    var permissions = data.Permissions;
                    var str = '<p>Name: '+firstName+' '+lastName+' '+fullAddress+' '+permissions+'</p>';
                    //Replace content at #results div
                    $('#results').innerHtml(str);
                }
            });
        }
    }
</script>

<?php
//This is ajax.php
//Connection to database
$connection = mysqli_connect('localhost', 'root', 'your_password', 'your_database');
mysqli_set_charset($connection, 'utf8');
if (!$connection) {
    die("Database connection failed: " . mysqli_error());
}
$id = $_POST['id'];
//Never trust input from users
//Sanitize and validate variables
//Use prepared statemends or PDO
$query = "SELECT id, FirstName, LastName, FullAddress, Permissions FROM TestTable WHERE id = '$id';";
$result = mysqli_query($connection, $query);
$row = mysqli_fetch_array($result);

$json['id'] = $row['id'];
$json['firstName'] = $row['FirstName'];
$json['lastName'] = $row['LastName'];
$json['fullAddress'] = $row['FullAddress'];
$json['permisions'] = $row['Permissions'];
echo json_encode($json);
mysqli_close($connection);
?>

<?php
//Connection to database
$connection = mysqli_connect("****","****","****", "***");
mysqli_set_charset($connection, 'utf8');
if (!$connection) {
    die("Database connection failed: " . mysqli_error());
}

//Simple query to populate the select box
$query = "SELECT id, FirstName, LastName FROM TestTable ORDER BY FirstName ASC, LastName ASC, id ASC;";
$result = mysqli_query($connection, $query);
if (mysqli_num_rows($result) > 0) { //If there are records in database table

    echo '<select id="user" name="user">';
    while ($row = mysqli_fetch_array($result)) {
        echo '<option value="'.$row['id'].'">'.$row['FirstName'].' '.$row['LastName'].'</option>';
    }
    echo '</select>';

} else {
    echo '<p class="alert">There are no data to select from.</p>';
}
?>
<div id="results">
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">


    $(document).ready(function(){
        //Each time that the value of select box changes then make an ajax call and bring the user details
        $('#user').on('change', function() {
            var id = $(this).val();
            $.ajax({
                async: false,
                url: "ajax.php", //Tried changing this to domainname.com/ajax.php but that didn't change anything.
                type: "POST",
                data: {id : id},
                dataType: "json",
                success: function(data) {
                    //Check if data is empty or make some other validations
                    var firstName = data.FirstName;
                    var lastName = data.LastName;
                    var fullAddress = data.FullAddress;
                    var permissions = data.Permissions;
                    var str = '<p>Name: '+firstName+' '+lastName+' '+fullAddress+' '+permissions+'</p>';
                    //Replace content at #results div
                    $('#results').innerHtml(str);
                }
            });
        }
        }
</script>

<div id="results">
</div>

<?php
//This is ajax.php
//Connection to database
$connection = mysqli_connect("******","******","*******", "*******");
mysqli_set_charset($connection, 'utf8');
if (!$connection) {
    die("Database connection failed: " . mysqli_error());
}
$id = $_POST['id'];
//Never trust input from users
//Sanitize and validate variables
//Use prepared statemends or PDO
$query = "SELECT id, FirstName, LastName, FullAddress, Permissions FROM TestTable WHERE id = '$id';";
$result = mysqli_query($connection, $query);
$row = mysqli_fetch_array($result);

$json['id'] = $row['id'];
$json['firstName'] = $row['FirstName'];
$json['lastName'] = $row['LastName'];
$json['fullAddress'] = $row['FullAddress'];
$json['permisions'] = $row['Permissions'];
echo json_encode($json);
mysqli_close($connection);
?>

<!doctype html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <meta charset="utf-8">
  <title>Untitled D
    <!--#include file="NewUser_get.php" -->
    ocument</title>
  <link href="Untitled-4.css" rel="stylesheet" type="text/css">
</head>

<body>
  <!--<div id="body1">-->
  <div id="wrapper">

    <div id="head">

      <center>
        <img src="http://www.rwc.com/wp-content/themes/RWC_Global/assets/images/logo.png">
      </center>
      <form action="NewUser_get.php" method="POST">
        <table style="width:1000px">
          <tr>
            <td width=90%>
              <f>Request date:</f>
              <br>
              <input type="date" name="RequestDate">
            </td>
            <td width=10%>
              <f>Requested by:</f>
              <br>
              <input type="text" style="width: 166px;" name="RequestBy">
            </td>
          </tr>
        </table>
        <br>
        <div id="colour">
          <info>
            <center>New User Info</center>
          </info>
        </div>
        <br>
        <table style="width:100%">
          <tr>
            <td>
              <f>Employee's last name:&nbsp;</f>
              <input type="text" placeholder="Click to type" name="LastName">
            </td>
            <td>
              <f>First name&nbsp;
                <input type="text" placeholder="Click to type" name="FirstName">
            </td>
            <td>
              <f>Middle name&nbsp;
                <input type="text" placeholder="Click to type" name="MiddleName">
            </td>
            <td>
              <f>Employment type&nbsp;
                <select name="EmploymentType">
                  <option value="Permanent">Permanent</option>
                  <option value="Temporary">Temporary</option>
                  <option value="Contractor">Contractor</option>
                  <option value="Placement">Placement</option>
                  <option value="Other">Other</option>
                </select>
            </td>
            <td width="80px">
              <f>&nbsp;Gender</f>
              <br>
              <label for="GenderMale">
                <input type="checkbox" name="GenderMale" value="Yes" /> <span>M</span>
              </label>
              <label for="GenderFemale">
                <input type="checkbox" name="GenderFemale" value="Yes" /> <span>F</span>
              </label>
            </td>
          </tr>
          <tr>
            <td>
              <f>Department&nbsp;</f>
              <br>
              <input type="text" placeholder="Click to type" name="Department1">
            </td>
            <td>
              <f>Job title&nbsp;</f>
              <input type="text" placeholder="Click to type" name="JobTitle">
            </td>
            <td>
              <f>Manager's name&nbsp;</f>
              <input type="text" placeholder="Click to type" name="ManagerName">
            </td>
            <td>
              <f>Start date&nbsp;</f>
              <br>
              <input type="date" placeholder="Click to type" name="StartDate">
            </td>
            <td>
              <f>Finish date&nbsp;</f>
              <input type="date" style="width: 166px;" name="FinishDate">
            </td>
          </tr>
        </table>
        <br>
        <table style="width:100%">
          <tr>
            <td>
              <f>Full address:</f>
              <br>
              <input type="text" style="width: 992px;" placeholder="Click to type, Address/ P.O. Box, City, Street, Post code" name="FullAddress">
            </td>
          </tr>
        </table>
        <br>
        <table style="width:100%">
          <tr>
            <td>
              <f>User Group / Profile to Use:</f>
              <input type="text" style="width: 325px;" placeholder="Click to type, e.g. same as John, Accounts" name="UserGroup">
            </td>
            <td>
              <f>Distribution Groups to be included:</f>
              <input type="text" style="width: 325px;" placeholder="Click to type, e.g. Staff, Internal, External" name="DistributionGroup">
            </td>
            <td>
              <f>Shared Drive Access:</f>
              <input type="text" style="width: 325px;" placeholder="Click to type" name="SharedDriveAccess">
            </td>
          </tr>
        </table>
        <br>
        <table style="width:100%">
          <tr>
            <td>
              <f>Permissions on shared drives (in detail):</f>
              <br>
              <input type="text" style="width: 993px;" placeholder="Click to type, e.g. Marketing drive 'read only, Technical drive 'Full Access'" name="Permissions">
            </td>
          </tr>
        </table>
        <br>
        <div id="colour">
          <info>
            <center>Additional Info</center>
          </info>
        </div>
        <br>
        <div class="checkboxes">

          <table style="width:100%">
            <tr>
              <td width="%50">&nbsp;
                <bigbold>List of required items (Tick the &nbsp;box next to an item):</bigbold>
              </td>
              <td>&nbsp</td>
              <td class="td-left" width="%50">
                <bigbold>List of required software/drive access:</bigbold>
              </td>
            </tr>
            <tr>
              <td></td>
              <td></td>
              <td class="td-left">
                <info>&nbsp;Drives:</info>
              </td>
              <td>
                <info>&nbsp;Software:</info>
              </td>
            </tr>
            <tr>
              <td>
                <label for="iPad">
                  <input type="checkbox" name="iPad" value="Yes"> <span><f>iPad + case</f></span>
                </label>
              </td>
              <td>
                <label for="Mouse">
                  <input type="checkbox" name="Mouse" value="Yes"> <span><f>Mouse</f></span>
                </label>
              </td>
              <td class="td-left">
                <label for="Sales">
                  <input type="checkbox" name="Sales" value="Yes"><span><f>Sales</f></span>
                </label>
              </td>
              <td>
                <label for="Salesforce">
                  <input type="checkbox" name="Salesforce" value="Yes"> <span><f>Salesforce</f></span>
                </label>
              </td>
            </tr>
            <tr>
              <td>
                <label for="iPhone">
                  <input type="checkbox" name="iPhone" value="Yes"> <span><f>iPhone + case</f></span>
                </label>
              </td>
              <td>
                <label for="Laptopb">
                  <input type="checkbox" name="Laptopb" value="Yes"> <span><f>Laptop bag</f></span>
                </label>
              </td>
              <td class="td-left">
                <label for="Marketing">
                  <input type="checkbox" name="Marketing" value="Yes"> <span><f>Marketing</f></span>
                </label>
              </td>
              <td>
                <label for="VPN">
                  <input type="checkbox" name="VPN" value="Yes"> <span><f>VPN</f></span>
                </label>
              </td>
            </tr>
            <tr>
              <td>
                <label for="Laptop">
                  <input type="checkbox" name="Laptop" value="Yes"> <span><f>Laptop</f></span>
                </label>
              </td>
              <td>
                <label for="Dphone">
                  <input type="checkbox" name="Dphone" value="Yes"> <span><f>Desk phone</f></span>
                </label>
              </td>
              <td class="td-left">
                <label for="General">
                  <input type="checkbox" name="General" value="Yes"> <span><f>General</f></span>
                </label>
              </td>
              <td>
                <label for="Terminal">
                  <input type="checkbox" name="Terminal" value="Yes"> <span><f>Terminal server</f></span>
                </label>
              </td>
            </tr>
            <tr>
              <td>
                <label for="Desktop">
                  <input type="checkbox" name="Desktop" value="Yes" /> <span><f>Desktop</f></span>
                </label>
              </td>
              <td>
                <label for="Printerw">
                  <input type="checkbox" name="Printerw" value="Yes"> <span><f>Printer (work)</f></span>
                </label>
              </td>
              <td class="td-left">
                <label for="CAD">
                  <input type="checkbox" name="CAD" value="Yes"> <span><f>CAD</f></span>
                </label>
              </td>
            </tr>
            <tr>
              <td>
                <label for="Printerh">
                  <input type="checkbox" name="Printerh" value="Yes"> <span><f>Printer (home)</f></span>
                </label>
              </td>
              <td>
                <label for="Dongle">
                  <input type="checkbox" name="Dongle" value="Yes"> <span><f>Dongle</f></span>
                </label>
              </td>
              <td class="td-left">
                <label for="Finance">
                  <input type="checkbox" name="Finance" value="Yes"> <span><f>Finance</f></span>
                </label>
              </td>
            </tr>
            <tr>
              <td>
                <label for="Monitor">
                  <input type="checkbox" name="Monitor" value="Yes"> <span><f>Monitor</f></span>
                </label>
              </td>
              <td>
                <label for="MiFi">
                  <input type="checkbox" name="Mifi" value="Yes"> <span><f>MiFi (Mobile Wifi)</f></span>
                </label>
              </td>
              <td class="td-left">
                <label for="Accounts">
                  <input type="checkbox" name="Accounts" value="Yes"> <span><f>Accounts</f></span>
                </label>
              </td>
              <td></td>
            </tr>
            <tr>
              <td>
                <label for="Keyboard">
                  <input type="checkbox" name="Keyboard" value="Yes"> <span><f>Keyboard</f></span>
                </label>
              </td>
              <td></td>
              <td class="td-left"></td>
              <td></td>
            </tr>
            <tr>
              <td>
              </td>
            </tr>
            <tr>
              <td>
              </td>
          </table>
          <div id="colour">
            <center>
              <info>Miscellaneous:</info>
            </center>
          </div>
          <br>
          <table style="width:100%">
            <tr>
              <td>
                <f>Should the predecessor's email be assigned to this user?</f>
              </td>
              <td>
                <label for="Pemail">
                  <input type="checkbox" name="Pemail" value="Yes"> <span><f>Yes</f></span>
                </label>
              </td>
            </tr>
            <tr class="tr-top">
              <td>
                <f>Is the user replacing someone else from the staff or is he/she a completely new employee?</f>
              </td>
              <td>
                <label for="Replacement">
                  <input type="checkbox" name="Replacement" value="Yes"> <span><f>Replacement</f></span>
                </label>
              </td>
              <td>
                <label for="NewUser">
                  <input type="checkbox" name="NewUser" value="Yes"> <span><f>New user</f></span>
                </label>
              </td>
            </tr>
          </table>
          <br>
          <textarea name="AddRequirements" style="width:1000px;" placeholder="Please continue here for any other extra requirements e.g. need of a special signature, software, hardware etc. or needed access to another user’s files and documents, or assign another user’s email profile to this user so they inherit all files and folders form the old user."></textarea>
          <!--<input type='hidden' name='articleid' id='articleid' value='<? echo $_GET["id"]; ?>' /> -->
          <input type="submit">
      </form>
      </div>

    </div>
</body>

</html>