如何从下拉菜单中选择后自动填充表格

Question

So i'm creating a Customize form so that i can edit my user data using a page. I have a dropdown menu which is contain username from database.

What im gonna do is , when i click the username i want to costumize , all data of the username goes into the form below it ( like email,password,etc )

This pict explain what i wanted to do

This is my dropdown code :

 <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>

And this is my form

<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>

Thank you before !

</div>

Answer 1

First thing: Never, look, NEVER put the DB rules into frontend. Create other file and put the content there.

Second: You have one elegant way to do this: Use ajax calling to a php file with to routing/factoring the user object with the data to retrieve to your modal.

Put a bind into dropdown when event change is triggered, call the ajax function, retrieve the data with your db routine returning the user object and on the success callback put that object content into frontend using

document.getElementsByTag/ByName/getElementById.value

, etcetera.

To study what you need, take that: https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByTagName