从下拉菜单中选择后如何使数据自动填充表格答案

【问题标题】：How to Make data automatically fill the form after selecting from dropdown menu从下拉菜单中选择后如何使数据自动填充表格
【发布时间】：2017-08-25 16:06:54
【问题描述】：

所以我正在创建一个自定义表单，以便我可以使用页面编辑我的用户数据。我有一个下拉菜单，其中包含数据库中的用户名。

我要做的是，当我点击我想装扮的用户名时，用户名的所有数据都会进入它下面的表单（如电子邮件、密码等）

This pict explain what i wanted to do

这是我的下拉代码：

 <h1>Costumize Data</h1>
        <hr>
        <dl><dt>Select data to costumize</dt></dl>
        <select class="form-control" name="userlist">
            <?php
               $servername = "localhost";
               $username = "root";
               $password = "";
               $dbname = "gamestore";

            // Create Connection
            $conn = mysqli_connect($servername, $username, $password, $dbname);

            // Check connection
            if (!$conn) {
                trigger_error("Connection failed: " . mysqli_connect_error());

            }
            //Run Query
            $stmt = "SELECT DISTINCT `username` FROM `login` ORDER BY user_id ASC";
            $result = mysqli_query($conn,$stmt) or die(mysqli_error($conn));
            while(list($category) = mysqli_fetch_row($result)){
                echo '<option value="'.$category.'">'.$category.'</option>';
            }
            mysqli_close($conn);
            ?>

        </select>
        <hr>

这是我的表格

<form class="form-horizontal" method="post" action="edit_user.php">
  <div class="form-group">
    <label class="control-label col-sm-4" for="username">Username:</label>
    <div class="col-sm-6">
      <input type="username" class="form-control" name="username" placeholder="Enter username">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-4" for="email">Email:</label>
    <div class="col-sm-6"> 
      <input type="email" class="form-control" name="email" placeholder="Enter email">
    </div>
  </div>
    <div class="form-group">
    <label class="control-label col-sm-4" for="country">Country:</label>
    <div class="col-sm-6"> 
      <input type="country" class="form-control" name="country" placeholder="Enter Country">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-4" for="password">Password:</label>
    <div class="col-sm-6"> 
      <input type="password" class="form-control" name="password" placeholder="Enter password">
    </div>
  </div>
  <div class="form-group"> 

<label class="control-label col-sm-4" for="user_type">Level:</label>
<div class="col-sm-4"> 
<select class="form-control" name="user_type">
    <option value="user">User</option>
    <option value="admin">Admin</option>
</select>
</div>
</div><div class="form-group"> 
    <div class="col-sm-offset-4 col-sm-7">
      <a href="delete_user.php"><button type="submit" class="btn btn-default">Delete</button></a>
      <button type="submit" class="btn btn-primary">Edit</button>
    </div>
  </div>
</form>

谢谢你！

【问题讨论】：

您需要为此编写javascript。基本上，您根据选择加载表单输入。
stackoverflow.com/questions/28091038/…的可能重复
感谢您的跟进，先生，您有任何资源来学习我需要的 javascript 吗？
查看我发布的链接。它会让你朝着正确的方向前进

标签： javascript php html mysql

【解决方案1】：

第一件事：永远不要将数据库规则放入前端。创建其他文件并将内容放在那里。

第二：您有一种优雅的方法来做到这一点：使用 ajax 调用 php 文件来路由/分解用户对象以及要检索到您的模态的数据。

在触发事件更改时将绑定放入下拉列表，调用 ajax 函数，使用您的 db 例程返回用户对象检索数据，并在成功回调中将该对象内容放入前端使用

document.getElementsByTag/ByName/getElementById.value

，等等。

要研究您需要什么，请采取以下措施： https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByTagName

【讨论】：